所以我在javascript中有一个动画的函数
anime.timeline({loop: true})
.add({
targets: '.ml5 .line',
opacity: [0.5,1],
scaleX: [0, 1],
easing: "easeInOutExpo",
duration: 1000
}).add({
targets: '.ml5 .line',
duration: 1000,
easing: "easeOutExpo",
translateY: (_el, i) => (-0.625 + 0.625*2*i) + "em"
})
.add({
targets: '.ml5 .letters-left',
opacity: [0,1],
translateX: ["0.5em", 0],
easing: "easeOutExpo",
duration: 600,
offset: '-=300'
}).add({
targets: '.ml5 .letters-right',
opacity: [0,1],
translateX: ["-0.5em", 0],
easing: "easeOutExpo",
duration: 600,
offset: '-=600'
}).add({
targets: '.ml5',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000 ,
});
我想要做的是让它在第一次扫描后停止循环(最基本的是显示行的移动,然后文本出现,之后我想让它在我的站点上保持静止)。最基本的方法,我可以使它做得很好,只是,把延迟的价值,无限,但这似乎不是正确的,有任何其他选择更“学术”。
null
anime.timeline ({loop: false})
并删除
应该是这样的:
anime.timeline({loop: false})
.add({
targets: '.ml5 .line',
opacity: [0.5,1],
scaleX: [0, 1],
easing: "easeInOutExpo",
duration: 1000
}).add({
targets: '.ml5 .line',
duration: 1000,
easing: "easeOutExpo",
translateY: (_el, i) => (-0.625 + 0.625*2*i) + "em"
})
.add({
targets: '.ml5 .letters-left',
opacity: [0,1],
translateX: ["0.5em", 0],
easing: "easeOutExpo",
duration: 600,
offset: '-=300'
}).add({
targets: '.ml5 .letters-right',
opacity: [0,1],
translateX: ["-0.5em", 0],
easing: "easeOutExpo",
duration: 600,
offset: '-=600'
}).add({
targets: '.ml5',
//opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000 ,
});