带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(17) https://developer.aliyun.com/article/1243462?groupCode=taobaotech
按规则执行动画
按照我们既定的规则「每 2 秒来回转动 20 度」，实现代码如下：
const duration = 2000; setTimeout(() => locate(-20), duration); setTimeout(() => locate(0), duration * 2); setTimeout(() => locate(20), duration * 3); setTimeout(() => locate(0), duration * 4);
可以看到移动的效果非常地生硬，不像是正常的人眼睛转动的感觉。因为我们的程序缺少了对执行过程的描述。可以引入动画来进行优化，让「 x 时间转动到 x 位置」的执行过程化：
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)); });
最终效果：
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(19) https://developer.aliyun.com/article/1243460?groupCode=taobaotech
