Lottie Animation in fabricjs canvas

问题

Is it possible to load the Lottie animation in fabricjs canvas

I have tried the following samples

    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();

I cant able to add the animation in the fabric js canvas. if any one overcome this issue kindly do comments on it

回答1:

I might be late to answer this, but for anyone else looking, this pen could give you some pointers: https://codepen.io/shkaper/pen/oEKEgG

The idea here, first of all, is to extend fabric.Image class overriding its internal render method to render the contents of an arbitrary canvas that you yourself provide:

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

You can make this canvas a constructor argument, e.g.

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

Then you'll just need to use lottie's canvas renderer to draw animation on a canvas and pass it to your new fabric.AEAnimation object.

回答2:

I would assume so, by combining your code with something similar to https://itnext.io/video-element-serialization-and-deserialization-of-canvas-fc5dbf47666d. Depending on your scenario you might be able to get away with using something like http://fabricjs.com/interaction-with-objects-outside-canvas

来源：https://stackoverflow.com/questions/52113707/lottie-animation-in-fabricjs-canvas

标签

fabricjs

lottie

bodymovin