洛蒂动画fabricjs帆布(Lottie Animation in fabricjs canvas

是否有可能加载fabricjs画布洛蒂动画

我曾尝试以下样本

    bodymovin.loadAnimation({
          wrapper: animateElement,       // div element
          loop: true,
          animType: 'canvas',            // fabricjs canvas
          animationData: dataValue,      // AE json
          rendererSettings: {
             scaleMode: 'noScale',
             clearCanvas: true, 
             progressiveLoad: false, 
             hideOnTransparent: true,
           }
       });
canvas.add(bodymovin);
canvas.renderAll();

我不能能够添加动画在面料JS画布。 如果任何一个解决这个问题好心做就可以评论

Answer 1:

我可能会晚点来回答这个问题，但对于其他人看，这种笔可以给你一些指点： https://codepen.io/shkaper/pen/oEKEgG

这里的想法，首先是延长fabric.Image类中重写其内部渲染方法来呈现你自己提供一个任意画布内容：

fabric.AEAnimation = fabric.util.createClass(fabric.Image, {
  drawCacheOnCanvas: function(ctx) {
    ctx.drawImage(this._AECanvas, -this.width / 2, -this.height / 2);
  },
})

你可以让这个帆布构造函数的参数，如

initialize: function (AECanvas, options) {
  options = options || {}
  this.callSuper('initialize', AECanvas, options)
  this._AECanvas = AECanvas
},

然后，你只需要使用洛蒂的画布渲染画在画布上的动画，并把它传递给你的新fabric.AEAnimation对象。

Answer 2:

我假设的话，你的代码相似的东西结合https://itnext.io/video-element-serialization-and-deserialization-of-canvas-fc5dbf47666d 。 根据你的情况，你也许能逃脱使用类似http://fabricjs.com/interaction-with-objects-outside-canvas

文章来源: Lottie Animation in fabricjs canvas