AE2Canvas is a HTML Canvas 2D renderer for After Effects Shape Layers.
The following properties/objects for shape layers are supported:
- All Transform Properties (including Motionpath)
- Group
- Rectangle
- Rounded Rectangle
- Ellipse
- Polystar (may be buggy)
- Path
- Stroke
- Fill
- Merge (partially)
- Trim Paths (only for Path and Ellipse atm)
AE2Canvas contains an ExtendScript file to save the animation data to JSON and a Javascript runtime to play the animation in the Browser.
In After Effects, open and select the composition you want to export and run the file ae2canvas-export.jsx
from the menu: File -> Scripts -> Run Script File...
.
Save the the file as JSON.
Include ae2canvas.js
or ae2canvas.min.js
in your html.
<script src="ae2canvas.js"></script>
Load the json file and pass the result to the AE2Canvas.Animation constructor.
fetchJSONFile('animation.json', function (result) {
animation = new AE2Canvas.Animation({data: result});
});
You can pass the following options to the constructor, or set it later on the instance:
- canvas {DOM Node} if this is empty, AE2Canvas will create a canvas for you
- loop {Boolean} set this to
true
to loop the animation - hd {Boolean} set this to
true
to render for high dpi devices - reversed {Boolean} set this to
true
to run the animation backwards - onComplete {Function} Function which will be called when the animation finishes
If you didn't pass a canvas to the constructor, you have to add the canvas manually to the DOM. If your canvas has a different size than your animation, you can call resize on the instance to scale the animation accordingly.
document.getElementById('wrapper').appendChild(animation.canvas);
animation.resize();
AE2Canvas needs a tick to run, so you want to add the update function to your animation loop
function loop(time) {
requestAnimationFrame(loop);
AE2Canvas.update(time);
}
An animation instance has the following control functions:
play()
play from the actual framepause()
pause at the actual framestop()
stop the animation set the time back to start and render the first framesetStep(Number)
pass a number between 0 and 100 to render the frame at this positiongotoAndPlay(String or Number)
pass a in an identifier to jump to the marker and play the animation from theregotoAndStop(String or Number)
pass a in an identifier to jump to the marker, render this frame and stop the animation
Markers can be set in After Effects as composition marker. You can add a text to the comments field to access this marker later via gotoAndPlay()
or gotoAndStop()
.
If you pass a number to gotoAndPlay()
or gotoAndStop()
the marker at this index will be used.