利用anime和rematrix进行动画叠加-CSDN博客

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

原文链接: 利用anime和rematrix进行动画叠加

上一篇: 从animejs中学到的一些东西

下一篇: 汉明码

https://github.com/juliangarnier/anime

https://github.com/jlmakes/rematrix#readme

思想为, 使用anime的数值库, 计算执行过程中的百分比, 获得数值差, 然后利用矩阵相乘叠加效果

注意长度可以直接叠加

但是scale不能, 直接叠加使用的乘法会使得数值不对

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/rematrix"></script>
    <style>
      .box {
        width: 50px;
        height: 50px;
        background: deepskyblue;
      }
    </style>
  </head>
  <body>
    <button onclick="move('x')">moveX</button>
    <button onclick="move('y')">moveY</button>
    <button onclick="scale()">scale</button>
    <br />
    <br />
    <br />
    <div id="box" class="box"></div>
    <script>
      const box = document.getElementById("box");
      const sleep = (n = 16) => new Promise((r) => setTimeout(r, n));
      async function move(direction) {
        const x = 100;
        for (let i = 0; i < 100; i++) {
          await sleep();
          const oldMtx =
            getComputedStyle(box).transform === "none"
              ? "matrix(1, 0, 0, 1, 0, 0)"
              : getComputedStyle(box).transform;
          const transform = Rematrix.fromString(oldMtx);
          const s =
            direction === "x" ? Rematrix.translateX(1) : Rematrix.translateY(1);
          let product = [transform, s].reduce(Rematrix.multiply);
          box.style.transform = Rematrix.toString(product);
          console.log("product", product);
        }
      }
      async function scale() {
        const scale = 2;
        for (let i = 1; i <= 100; i++) {
          await sleep();
          const oldMtx =
            getComputedStyle(box).transform === "none"
              ? "matrix(1, 0, 0, 1, 0, 0)"
              : getComputedStyle(box).transform;
          const transform = Rematrix.fromString(oldMtx);
          const s = Rematrix.scale(1.01);
          let product = [transform, s].reduce(Rematrix.multiply);
          box.style.transform = Rematrix.toString(product);
        }
      }
    </script>
  </body>
</html>