gpt4 book ai didi

javascript - 带有滚动事件的 Raphael 动画

转载 作者:行者123 更新时间:2023-12-03 12:38:17 26 4
gpt4 key购买 nike

有没有办法使用 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 轻松完成此操作。

只需应用拉斐尔开始和停止方法即可。

Have a look at this weave.

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;

更新

Here's a weave with a stopping and starting animation.

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;

关于javascript - 带有滚动事件的 Raphael 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23630768/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com