aframe-animation-component
Advanced tools
An animation component for A-Frame using anime.js.
Also check out the animation-timeline component for defining and orchestrating timelines of animations.
Latest version requires A-Frame v0.8.0.
| Property | Description | Default Value | Values |
|---|---|---|---|
| property | Property to animate. Can be a component name, a dot-delimited property of a component (e.g., material.color), or a plain attribute. | ||
| isRawProperty | Flag to animate an arbitrary object property outside of A-Frame components for better performance. If set to true, for example, we can set property to like components.material.material.opacity. If property starts with components or object3D, this will be inferred to true. | false | |
| 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 from value when possible for stability. | null | |
| to | Target value at end of animation. | null | |
| type | Right now only supports color for tweening isRawProperty color XYZ/RGB vector values. | '' | |
| delay | How long (milliseconds) to wait before starting. | 0 | |
| dir | Which dir to go from from to to. | normal | alternate, reverse |
| 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 true, the animation will repeat infinitely. | 0 | |
| 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. | null | |
| resumeEvents | Comma-separated list of events to listen to trigger resume after pausing. | null | |
| autoplay | Whether or not the animation should autoplay. Should be specified if the animation is defined for the animation-timeline component. | null | |
| enabled | Toggle startEvents effect. | true |
Base name is animation. We can attach multiple animations to one entity by
name-spacing the component with double underscores (__):
<a-entity animation="property: rotation"
animation__2="property: position"
animation__color="property: material.color"></a-entity>
| easeIn | easeOut | easeInOut |
|---|---|---|
| easeInQuad | easeOutQuad | easeInOutQuad |
| easeInCubic | easeOutCubic | easeInOutCubic |
| easeInQuart | easeOutQuart | easeInOutQuart |
| easeInQuint | easeOutQuint | easeInOutQuint |
| easeInSine | easeOutSine | easeInOutSine |
| easeInExpo | easeOutExpo | easeInOutExpo |
| easeInCirc | easeOutCirc | easeInOutCirc |
| easeInBack | easeOutBack | easeInOutBack |
| easeInElastic | easeOutElastic | easeInOutElastic |
| Property | Description |
|---|---|
| animationbegin | Animation began. Event detail contains name of animation. |
| animationcomplete | Animation completed. Event detail contains name of animation. |
| Member | Description |
|---|---|
| animation | anime.js object. |
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
accessible via AFRAME.anime.
Read through and explore the anime.js documentation and website.
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component@^4.1.2/dist/aframe-animation-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity geometry="primitive: box" material="color: black"
animation__color="property: material.color; dir: alternate; dur: 1000;
easing: easeInSine; loop: true; to: #FFF">
</a-entity>
<a-entity geometry="primitive: box" material="color: orange"
animation__fadein="property: material.opacity; dur: 100;
easing: linear; from 0; to: 1; startEvents: fadein"
animation__fadeout="property: material.opacity; dur: 100;
easing: linear; from 1; to: 0; startEvents: fadeout"
</a-entity>
<a-cylinder color="#F55" radius="0.1"
animation="property: color; dir: alternate; dur: 1000;
easing: easeInSine; loop: true; to: #5F5"
animation__scale="property: scale; dir: alternate; dur: 200;
easing: easeInSine; loop: true; to: 1.2 1 1.2"
animation__yoyo="property: position; dir: alternate; dur: 1000;
easing: easeInSine; loop: true; to: 0 2 0">
</a-cylinder>
</a-scene>
</body>
Install via npm:
npm install aframe-animation-component
Then register and use.
require('aframe');
require('aframe-animation-component');
<a-animation>I expect to deprecate <a-animation> in favor for this component.
setAttribute call. With <a-animation>, we must
do createElement, multiple setAttributes, appendChild, and
addEventListener('loaded')..setAtttribute flow.<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 <a-animation>.FAQs
Animations in A-Frame using anime.js
We found that aframe-animation-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.