带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(18)

const duration = 2000;
setTimeout(() => locate(-20), duration);
setTimeout(() => locate(0), duration * 2);
setTimeout(() => locate(20), duration * 3);
setTimeout(() => locate(0), duration * 4);

import animejs from 'animejs';
function runAnimate( update) {
 const anim = {
 x: 0,
 };
 animejs.timeline({
 targets: anim,
 duration: 2000, // 间隔 2 秒
 easing: 'linear', // 线性执行
 update: () => update(anim),
 })
 .add({ x: -20, })
 .add({ x: 0, })
 .add({ x: 20, })
 .add({ x: 0, });
 }
// 视频播放即开始执行动画
video.addEventListener('play', () => {
 runAnimate(({ x }) => locate(x));
});