Lottie Web：同时在同一画布中播放2个动画

Question

我是洛蒂（Lottie）的新手，想知道如何在网络上的同一帆布元素中同时播放2个动画。

我遵循了这个示例[1]，然后在此处给出的建议[2]分别在每个框架上转换画布以分别定位一个动画。

我想实现的是：2个红球并排在同一画布上弹跳。一个在x = 0的比赛中，一个在同一画布上播放x = 100。

这是我在Codepen [3]中的方法。我提取了JS以获得可见性。

      const testjson = {...animation...};
      const cvs = document.getElementById("canvas");
      const ctx = cvs.getContext("2d");

      // Drawing sth on the context to see whether sharing works
      ctx.fillStyle = "green";
      ctx.fillRect(0, 0, 40, 40);

      function renderAnimation(canvasContext, translation) {
        const animData = {
          renderer: "canvas",
          loop: true,
          rendererSettings: {
            context: canvasContext,
            clearCanvas: true,
          },
          animationData: testjson,
        };

        const anim = bodymovin.loadAnimation(animData);
        
        // Transform the canvas for the respective animation on enter-frame
        anim.addEventListener("enterFrame", () => {
          ctx.translate(translation.x, translation.y);
        });

        // If efective, causes onion-effect
        // anim.setSubframe(false);
      }

      renderAnimation(ctx, { x: 0, y: 0 });
      renderAnimation(ctx, { x: 100, y: 0 });

las，我实施的方式似乎不起作用。 有人知道我缺少什么吗？

谢谢你！

[1]: https://codepen.io/RenanSgorlom/pen/orgxyJ
[2]: https://github.com/airbnb/lottie-web/issues/1671
[3]: https://codepen.io/user1207504/pen/MWVYvxd

Answer 1

您不需要太多代码就可以在同一画布上弹跳一些球...
当然，图书馆无需这样做。

我们可以使用 arc 函数绘制的球：

• 移动是增加x或y的位置，代码中是 x += vx
• 弹跳我们只是更改方向，您可以看到它在我的代码 vx *= -1 中

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

class ball {
  constructor(data) {
    this.data = data
  }
  draw() {
    this.data.x += this.data.vx
    this.data.y += this.data.vy
    if (this.data.x > canvas.width || this.data.x < 0) this.data.vx *= -1
    if (this.data.y > canvas.height || this.data.y < 0) this.data.vy *= -1
    
    ctx.beginPath()
    ctx.fillStyle = this.data.color
    ctx.arc(this.data.x,this.data.y, this.data.radius, 0, 2*Math.PI);
    ctx.fill()
  }
}

const balls = [
  new ball({x: 10, y: 10, vx: 0, vy: 1, radius: 8, color: "pink" }),
  new ball({x: 90, y: 90, vx: 0, vy: -1, radius: 8, color: "red" }),
  new ball({x: 5, y: 50, vx: 1, vy: 1.5, radius: 8, color: "cyan" })
]
 
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  balls.forEach(b => b.draw())
  requestAnimationFrame(animate)
}

animate()

<canvas id="canvas" width=100 height=100></canvas>