在普通动画anime.js中摇动动画答案

【问题标题】：Shake animation inside normal animation anime.js在普通动画anime.js中摇动动画
【发布时间】：2021-10-08 22:58:10
【问题描述】：

我正在尝试像此视频中那样为电视制作动画：https://www.youtube.com/watch?v=ptV0VgEP0ws 但我不知道如何在每个黑色电视屏幕旋转和放大时制作“抖动”效果。现在我已经尝试了这个

anime({
    targets: '.blackScreen',
    rotate: [anime.stagger([0, 15]),anime.stagger([90, 105])],
    scale: {
         value: [0, 3],
    },
    translateX: {
        value: [160, -160],
        direction: 'alternate',
        duration: 100,
        delay: 1500,
        loop: true,
      },
    easing: 'easeInOutCubic',
    duration: 3000,
    loop: false,
    delay: anime.stagger(130, {start: 600, easing: 'linear'})
});

但是 translateX 中的“loop: true”似乎不起作用，它只会执行一次。我不知道是否有可能做到这一点。我可以这样做，但它不是很干净，还有其他方法吗？

translateX: [
    {value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},
    {value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},
    {value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},
    {value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},
    {value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},
    {value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},{value: xMax * -1,},{value: xMax,},{value: xMax/-2,},{value: xMax/2,},{value: 0},
],

【问题讨论】：

为什么不用css来变换旋转和缩放，而用js处理帧数呢？

标签： javascript shake anime.js

【解决方案1】：

使用“缓动”效果为晃动设置动画。缓动效果可以在anime.js 文档中找到：

https://animejs.com/documentation/#springPhysicsEasing

【讨论】：