CODEWITHSUNDEEP
aframeanime.js
Jaysonvdw
Jaysonvdw

Reputation: 51

Animation Component Property for 360° Rotation

Does anyone perhaps know the animation component property that I would add to a model in a scene to make it 'rotate' 360° (as in, when a car rotates on a circular platform at a motor show or something)? Would ideally be adding it to this and would hope to be able to make looping true or false:

<a-entity gltf-model="#id" scale="0.5 0.5 0.5" rotation="0 90 0" animation__scale="property: scale; dir: alternate; dur: 200; easing: easeInSine; loop: false; to: 1.2 1 1.2">
</a-entity>

Had a look at the anime.js readme but couldn't seem to find it.

Thank you

Upvotes: 1

Views: 416

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

You can use the basic animation component:

<a-animation attribute="rotation"
             dur="2000"
             fill="forwards"
             to="0 360 0"
             repeat="indefinite"
             easing="linear"
             ></a-animation>

The attribute is rotation, set the angle to 0 360 0, and set the easing to linear so it is smooth.

or use ngoKevin's animation component:

animation__rot="property:rotation;
                dur:3000;
                to:0 360 0;
                loop: true;
                easing:linear;"

check it out here: https://jsfiddle.net/gL0pkgz7/.

Upvotes: 1

Related Questions