如何先给Anime.js元素一个开场动画，然后再给它一个循环动画？
如何先给Anime.js元素一个开场动画，然后再给它一个循环动画？
提问于 2020-06-03 22:33:25
我正在尝试用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可以做到这一点吗？
提前感谢！
回答 2
Stack Overflow用户
发布于 2020-11-15 01:51:41
使用时间轴是不可能的，当你在创建时传递loop: true时，时间轴就会循环。从源代码看，添加的对象中的loop属性似乎被忽略了。
但是，您可以在anime实例上使用promise .finished：
anime({/*first animation*/}).finished.then(()=>
anime({/*next animation*/}))并模仿继承属性：
let base = {
easing: 'easeOutExpo',
targets: '.fles',
}
anime(Object.assign({}, base, {
rotate: 20,
duration: 750,
loop: false,
}))
.finished.then(()=>
anime(Object.assign({}, base, {
duration: 6000,
loop: true,
easing: 'easeInOutQuad',
keyframes: [
{rotate: '+=1'},
{rotate: '-=1'},
{rotate: '+=1.5'},
{rotate: '-=2'},
{rotate: '+=1.5'},
],
})));Stack Overflow用户
发布于 2021-09-27 18:27:41
这可以通过使用内部和外部<div>来解决。将循环动画放在其中一个上，将打开动画放在另一个上。
<div id="outer">
<div id="inner">
Foo
</div>
</div>
// opening animation
anime({
targets: '#outer',
scale: [0, 1],
loop: false
});
// looping animation
anime({
targets: '#inner',
rotate: [-5, 5],
loop: true,
direction: 'alternate'
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62175472
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号