Different libraries, have different parameters and behaviors but its fundamental parameterization is similar among all.
JQuery although isn’t an animation library per se, it has countless animation plugins in its ecosystem that animate web elements, but each has its own mechanism of timing and interaction.
ABeamer decouples its access to the DOM tree by using adapters, allowing ABeamer and plugins not only to animate CSS properties, but also SVG, Canvas, WebGL without extra complexity. Plugins can also be created to reduce the complexing of a CSS animation by mapping a ABeamer property into multiple CSS properties.
But instead of requiring that the user or the plugin to handle its own timing and interpolation mechanism, it provides Virtual Animators to handle the timing and interpolation of the plugin properties.
The support of Virtual Animators in ABeamer has been for quite a while but the version 1.1, it was added the class
SimpleVirtualAnimator to simplify its usage, and it was added the optional
frameRendered method to the adapters to reduce the render count when multiple animation properties are used.
To demonstrate how to use Virtual Animators, we will use the code pen example.
This example demonstrates how to animate Canvas using ABeamer.
Why use ABeamer instead of a timer?
- ABeamer guaranties that each frame can generate a PNG file and it has the infrastructure to generate it.
- The canvas animation can be part of a larger project that involves CSS animations.
- ABeamer is bundle with a package fully of goodies: easings, oscillators, paths, formatters, …
The html code contains a simply
canvas tag inside a scene.
ABeamer.SimpleVirtualAnimator. This class manages the get/set of properties and implements the
The class in the code above contains the method
animateProp. This method will be called by ABeamer for each animation property, which in turn will execute
draw to draw text and a line into the canvas. Further ahead, we will see that in this example is better to use
animateProps instead of
animateProp. But for now we will use this method, in order to understand the usage of
In the code bellow, it creates an instance of this class, initializes with the initial values, and adds this virtual animator to the story by using
The selector of the virtual animator is
canvas-fx, and to distinguish from the CSS selectors, ABeamer uses the prefix
% to determine that is a pick a virtual animator instead of CSS selector.
So when in the
scene1.addAnimations is selected the
%canvas-fx, ABeamer will use the
CanvasAnimator to iterate the values of each animation property.
The usage is exactly the same as when a property represents a CSS property, but this time instead changing a CSS property value, it will call
CanvasAnimator.setProp, and this if it’s not the
uid property will call the
animateProp, which in turn will update the canvas with the new value.
The above example fits well for a CSS animator or SVG animator where is required to update the each property individually, but in case of
canvas and WebGL animators, most cases it’s only necessary to update once per frame if any property changed.
In the example above, the
draw method will be called 3 times per frame, while once is enough.
To solve this problem, ABeamer 1.1 introduces a new optional method called
frameRendered for the adapters, and
SimpleVirtualAnimator uses this method to call
animateProps once per frame if at least one property changed, except for the
So, in the example by changing the
animateProps, it will reduce the render count of 3 per frame to 1.
Using your own custom animators
If you want to use ABeamer just to render frames but you have your own animators, you can use a simple virtual animator just to trigger the next render frame.