animejs 外层duration设置为0不生效的问题

最新推荐文章于 2023-03-01 00:28:22 发布

阿豪boy

最新推荐文章于 2023-03-01 00:28:22 发布

阅读量233

点赞数

文章标签： js nodejs animation aof slam

本文链接：https://blog.csdn.net/qq_35516360/article/details/122064550

版权

原文链接: animejs 外层duration设置为0不生效的问题

上一篇: peerDependencies 优化npm包大小

下一篇: ae 导出html动画提取每帧数据解决错切导出失败的问题

duration有优先级, 数组形式的值数值中的优先级高于外层的, 不会自动进行缩放

下面这种设置, 即使最外层duration为0, 但是动画真正执行时是按照值里面的duration来的, 需要将里面的也设置为0才行, 最好是里面的是总时间的均分

        anime({
          targets: ".box",
          translateX: [
            {
              value: 0,
              duration: 0,
            },
            {
              value: 100,
              duration: 1000,
            },
            { value: 200, duration: 1000 },
          ],
          duration: 0,
          easing: "linear",
          complete: () => {
            console.error("11");
          },
        });
      });



        anime({
          targets: ".box",
          keyframes: [
            { translateX: 0, duration: 0 },
            {
              translateX: 100,
              duration: 1000,
            },
            { translateX: 200, duration: 1000 },
          ],
          duration: 0,
          easing: "linear",
          complete: () => {
            console.error("11");
          },
        });

html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../node_modules/animejs/lib/anime.min.js"></script>
    <style>
      .box {
        width: 100px;
        height: 100px;
        opacity: 0.5;
        background: yellowgreen;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <button id="move">move</button>
    <button id="show">show</button>
    <script>
      document.getElementById("move").addEventListener("click", (e) => {
        anime({
          targets: ".box",
          translateX: [
            {
              value: 0,
              duration: 0,
            },
            {
              value: 100,
              duration: 1000,
            },
            { value: 200, duration: 1000 },
          ],
          duration: 0,
          easing: "linear",
          complete: () => {
            console.error("11");
          },
        });
      });
      document.getElementById("show").addEventListener("click", (e) => {
        anime({
          targets: ".box",
          opacity: [0.5, 1],
          duration: 5000,
          easing: "easeInOutSine",
          complete: () => {
            console.error("222");
          },
        });
      });
    </script>
  </body>
</html>