Required to use master branch of A-Frame (0.8.0 milestone) for v4.x. Try https://rawgit.com/ngokevin/aframe/animationbugless/dist/aframe-master.min.js
Also check out the animation-timeline component for defining and orchestrating timelines of animations.
|property||Property to animate. Can be a component name, a dot-delimited property of a component (e.g.,
|from||Initial value at start of animation. If not specified, the current property value of the entity will be used (will be sampled on each animation start). It is best to specify a
|to||Target value at end of animation.||null|
|delay||How long (milliseconds) to wait before starting.||0|
|dir||Which dir to go from
|dur||How long (milliseconds) each cycle of the animation is.||1000|
|easing||Easing function of animation. To ease in, ease out, ease in and out.||easeInQuad||See easings|
|elasticity||How much to bounce (higher is stronger).||400|
|loop||How many times the animation should repeat. If the value is
|round||Whether to round values.||false|
|startEvents||Comma-separated list of events to listen to trigger play/restart. Animation will not autoplay if specified.||null|
|pauseEvents||Comma-separated list of events to listen to trigger pause. Can be resumed with
|resumeEvents||Comma-separated list of events to listen to trigger resume after pausing.||null|
|autoplay||Whether or not the animation should
Base name is
animation. We can attach multiple animations to one entity by
name-spacing the component with double underscores (
|animationbegin||Animation began. Event detail contains
|animationcomplete||Animation completed. Event detail contains
anime is a popular and powerful animation engine. The component prefers to do
just basic tweening and touches only the surface of what anime can do (e.g.,
timelines, motion paths, progress, seeking). If we need more animation
features, create a separate component that uses anime.js directly. anime is
Install and use by directly including the browser files:
My A-Frame Scene
Install via npm:
npm install aframe-animation-component
Then register and use.
I expect to deprecate
<a-animation> in favor for this component.
<a-animation>, we must do
<a-animation>, we must wait for it to append to the DOM and register a callback listener.
<a-animation>tag is the only outlier in which we must use a DOM element to modify an entity.
<a-animation>'s API is loosely based off of Web Animations draft specification which is overly complex.
<a-animation>uses the Custom Element polyfill directly with tween.js. anime.js's features makes the animation codebase much slimmer (140 vs 550 lines of code).
<a-animation>has not been touched in ages. This component has lesss issues filed against it, and people usually end up switching to the component once they run into issues with