我正在尝试使用Anime.js为对象设置动画。它有一个打开动画(旋转),播放一次,之后它应该有一个不同的旋转动画,无限循环。我把这两个动画放在一个时间轴上,但它不会循环第二个动画。
JavaScript:
var tl = anime.timeline({
easing: 'easeOutExpo',
targets: '.fles',
});
tl
.add({
rotate: 20,
duration: 750,
loop: false,
})
.add({
duration: 6000,
loop: true,
easing: 'easeInOutQuad',
keyframes: [
{rotate: '+=1'},
{rotate: '-=1'},
{rotate: '+=1.5'},
{rotate: '-=2'},
{rotate: '+=1.5'},
],
})
Anime.js可以做到这一点吗?如何做到?
先谢谢你了!
3条答案
按热度按时间klsxnrf11#
这是不可能做到这一点与时间线,时间线只是循环时,你传递
loop: true
的创建。从源代码看,添加的对象中的loop
属性似乎被忽略了。但是,您可以在
anime
示例上使用promise.finished
:并模仿继承属性:
xqkwcwgp2#
这可以通过使用内部和外部
<div>
来解决。在其中一个上放置循环动画,在另一个上放置打开动画。ztigrdn83#
只是想跟进@WerWet的答案,你也可以用时间表来做这件事。在我的例子中,我对SVG应用了一系列效果,并在页面加载时对文本进行动画处理,但希望文本在完成加载动画后无限期地出现故障。我是这么做的...
(我使用react,因此在useEffect钩子中调用了
animation()
)希望这有帮助!