https://github.com/cvan/aframe-role
Popmotion Role for A-Frame animation, tracking and physics.
https://github.com/cvan/aframe-role
Last synced: about 1 year ago
JSON representation
Popmotion Role for A-Frame animation, tracking and physics.
- Host: GitHub
- URL: https://github.com/cvan/aframe-role
- Owner: cvan
- License: other
- Created: 2015-12-17T17:05:06.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-12-17T17:09:00.000Z (over 10 years ago)
- Last Synced: 2025-03-24T09:50:17.221Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://popmotion.io
- Size: 543 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# A-Frame plugin for Popmotion
Popmotion Actor role to enable A-Frame animation, physics and input tracking.
## Examples
- [Physics](http://codepen.io/popmotion/pen/pgyoYx?editors=101)
- Some rather obnoxious-yet-demonstrative animation](http://codepen.io/popmotion/pen/GoZpjo?editors=101)
## Use
```html
```
```javascript
import ui from 'popmotion';
import aframeRole from 'popmotion-aframe-role';
const cube = new ui.Actor({
element: document.querySelector('a-cube'),
as: aframeRole
});
```
`cube` is now a standard Popmotion `Actor`, except with an applied A-Frame Role.
This allows you to run a standard `Tween`, `Simulate` or `Track` action:
```javascript
const moveBackAndForth = new ui.Tween({
values: {
x: 5
},
duration: 600,
ease: 'easeInOut',
yoyo: true
});
cube.start(moveBackAndForth);
```
### Create many A-Frame Actors
As A-Frame elements are DOM elements, you can use `ui.select` to create multiple `Actors` at once. For instance:
```javascript
ui.select('a-cube', {
as: aframeRole
});
```
Will return an `Iterator` of `Actor` elements (see [full documentation](http://popmotion.io/api/popmotion/select)). You must remember to set `as` on Actor initialisation.
## Supported properties
All numerical properties can be set with Popmotion.
- `position` properties can be set with `x`, `y`, and `z`.
- `scale` and `rotation` properties can be set eg `scaleX` and `rotateY`.
- Dash-case characters are set as camelCase, eg `radius-bottom` becomes `radiusBottom`.
## Advanced: create an A-Frame Actor
If you're creating a lot of A-Frame Actors and don't want to set `as` each time, you could make something like this:
```javascript
import { Actor } from 'popmotion';
import aframeRole from 'popmotion-aframe-role';
class AFrameActor extends Actor {
constructor(props, ...args) {
props.as = aframeRole;
super(props, ...args);
}
}
const cube = new AFrameActor(document.querySelector('a-cube'));
```