[英]Raphael Animation with scroll event
有沒有一種方法可以使用Raphaël-JavaScript庫在用戶滾動網站時開始為對象設置動畫,並在用戶停止滾動時停止動畫播放?
我已經創建了動畫,但是找不到有關如何將動畫與網站滾動條同步的任何信息。
編輯:
var path6 = paper.path('M 148 140 L 176 164 L 94 189 L 148 140 Z').attr("fill","#9B5024").attr("stroke","transparent").attr("stroke-width",0);
_path3 = Raphael.transformPath('M 148 140 L 102 155 L 94 189 L 148 140 Z');
path6.animate({path: _path3}, 4000);
上面是我的代碼,我想做的是使我的動畫與頁面滾動同步,因此,只要用戶滾動,我不希望在.animate()中提供4000毫秒,而是希望該對象進行動畫處理。
您可以使用純JavaScript輕松完成此操作。
只需應用Raphaël啟動和停止方法即可。
var timer = null;
function scrolling() {
document.getElementById("Status").innerHTML = "scrolling..";
if(timer !== null) {
clearTimeout(timer);
}
timer = setTimeout(function() {
document.getElementById("Status").innerHTML = "stopped scrolling";
}, 150);
}
window.onscroll = scrolling;
var paper = new Raphael('Animation', 100, 100);
var rect = paper.rect(20, 20, 20, 20).attr({fill: '#F00'});
var anim = Raphael.animation({transform: "r360"}, 2500).repeat(Infinity);
var timer = null;
function scrolling() {
document.getElementById("Status").innerHTML = "scrolling..";
if(timer !== null) {
rect.animate(anim);
}
timer = setTimeout(function() {
rect.stop();
}, 150);
}
window.onscroll = scrolling;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.