aframe
Animation
Recherche…
Introduction
Les animations et les transitions dans A-Frame sont définies à l'aide de l'élément <a-animation> tant qu'enfant. Le système est basé approximativement sur la spécification Web Animations. A-Frame utilise tween.js en interne.
Remarques
Les attributs
Voici un aperçu des attributs d'animation. Nous allons entrer dans plus de détails ci-dessous.
| Attribut | La description | Valeur par défaut |
|---|---|---|
| attribut | Attribut à animer. Pour spécifier un attribut de composant, utilisez la syntaxe componentName.property (par exemple, light.intensity ). | rotation |
| commencer | Nom de l'événement à attendre avant de commencer l'animation. | '' |
| retard | Délai (en millisecondes) ou nom de l'événement à attendre avant de commencer l'animation. | 0 |
| direction | Direction de l'animation (entre from et to ). Un alternate , alternateReverse , normal , reverse . | Ordinaire |
| dur | Durée en (millisecondes) de l'animation. | 1000 |
| assouplir | Fonction d'accélération de l'animation. Il y a beaucoup à choisir. | facilité |
| fin | Nom de l'événement à attendre avant d'arrêter l'animation. | '' |
| remplir | Détermine l'effet de l'animation lorsqu'il n'est pas actif. L'un des backwards , les both , forwards , none . | en avant |
| de | Valeur de départ. | Valeur actuelle. |
| répéter | Répétez le compte ou indefinite . | 0 |
| à | Valeur finale Doit être spécifié | Aucun |
Commencer
L'attribut begin définit quand l'animation doit commencer à jouer.
Cela peut être un nombre , représentant des millisecondes à attendre, ou un nom d'événement à attendre. Par exemple, nous pouvons définir une animation qui attend 2 secondes avant de mettre à l'échelle une entité.
<a-entity>
<a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation>
</a-entity>
Ou nous pouvons définir une animation qui attend que l'élément parent déclenche un événement nommé fade avant de fondre une entité.
<a-entity id="fading-cube" geometry="primitive: box" material="opacity: 1">
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
</a-entity>
// Trigger an event to begin fading.
document.querySelector('#fading-cube').emit('fade');
Direction
L'attribut direction définit la manière d'animer entre la valeur de départ et la valeur finale.
Lorsque nous définissons une direction en alternance, l'animation va et vient entre les valeurs de from et to arrivée comme un yo-yo. Les directions alternatives ne prennent effet que lorsque nous répétons l'animation.
| Valeur | La description |
|---|---|
| alterner | Sur les cycles pairs, animer from à to . Sur les cycles impairs, animation de to à from |
| renversement | Sur les cycles impairs, animer from à to . Sur les cycles paires, animation à partir to à from de |
| Ordinaire | Animer de from à to . |
| sens inverse | Animer de to à from . |
Assouplissement
L'attribut easing définit la fonction d'accélération de l'animation, qui est par défaut ease . Il y a trop de fonctions d'accélération à lister, mais nous pouvons les expliquer implicitement.
Une valeur possible est linear . Et les fonctions d'accélération de base sont la ease , la ease-in , la ease-out et la ease-in-out .
Ensuite, il y a plus de groupes de fonctions d'accélération. Les fonctions d'accélération de base ci-dessus préfixent chaque groupe de fonctions d'accélération. Les groupes de fonctions d'accélération sont cubic , quad , quart , quint , sine , expo , circ , elastic , back et bounce .
Par exemple, le cubic groupe de fonctions d' accélération consisterait ease-cubic , la ease-in-cubic , la ease-out-cubic , la ease-in-out-cubic .
Remplir
L'attribut de fill définit l'effet de l'animation lorsqu'il n'est pas actif. Pensez à fill comme à la valeur des animations sur l'entité avant et / ou après chaque cycle d'animation. Vous trouverez ci-dessous les valeurs possibles pour le fill et leurs effets.
| Valeur | La description |
|---|---|
| en arrière | Avant que l'animation ne commence, définissez la valeur de départ sur la valeur from . |
| tous les deux | Combinez les effets du remplissage en arrière et du remplissage en avant. |
| en avant | Après la fin de l' animation, la valeur finale restera à to valeur. Le remplissage par défaut |
| aucun | Avant que l'animation ne commence, définissez la valeur de départ sur la valeur initiale. Une fois l'animation terminée, réinitialisez la valeur à la valeur initiale. |
Répéter
L'attribut de repeat définit la fréquence de répétition de l'animation. Nous appelons chaque répétition de l'animation un cycle. Repeat peut être un nombre qui compte à rebours sur chaque cycle d'animation jusqu'à ce qu'il atteigne 0 L'animation se termine alors, ou nous pouvons définir la repeat sur indefinite et l'animation sera mise en boucle jusqu'à ce que l'animation soit supprimée ou supprimée manuellement.
ÉVÉNEMENTS
L'élément <a-animation> émet quelques événements.
| Nom de l'événement | La description |
|---|---|
| animationend | Emis lorsque l'animation se termine. En cas de répétitions, émises lorsque le nombre de répétitions atteint 0 . Pas émis pour les répétitions indéfinies. |
| animationstart | Emis immédiatement lorsque l'animation commence à jouer. |
Exemple d'animation
En guise d'exemple d'introduction, pour définir une orbite de 5 mètres sur une entité autour de l'axe Y qui prend 10 secondes, nous pouvons décaler la position et animer la rotation. Cette animation commence par la rotation initiale autour de l'axe des Y de 0 degré et tourne autour de 360 degrés. Il est défini avec une durée de 10 000 millisecondes, maintient la valeur finale sur chaque cycle de l'animation et boucle à l'infini.
<a-entity position="5 0 0" rotation="0 0 0">
<a-animation attribute="rotation"
to="0 360 0"
dur="10000"
fill="forwards"
repeat="indefinite"></a-animation>
</a-entity>
Animation de différents types de propriétés
Le système d'animation d'A-Frame peut animer différents types de propriétés.
vec3 Propriétés
A-Frame possède des composants vec3 standard ( position , rotation et scale ). Ces composants sont constitués de trois facteurs: X, Y et Z. Nous pouvons passer trois nombres séparés par des espaces to attributs from et to comme nous les définirions sur une entité. Dans ce cas, le système d'animation supposera que nous vec3 une valeur vec3 .
Par exemple, si nous voulons animer une entité allant d’un point à un autre, nous pouvons animer le composant de position .
<a-entity>
<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
Propriétés booléennes
A-Frame a des composants standard qui acceptent une seule valeur booléenne. Les valeurs booléennes peuvent aussi être "animées" en retournant le booléen à la fin de chaque cycle d'animation.
Par exemple, nous pouvons définir une animation qui désactive la visibilité d'une entité après 5 secondes.
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
Propriétés numériques
Nous pouvons également animer des attributs numériques. Par exemple, nous pouvons animer l'intensité de la primitive de lumière.
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
Propriétés de couleur
Nous pouvons animer toute propriété de composant ayant un type de couleur. Par exemple, nous pouvons animer une boîte du blanc au rouge.
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
Propriétés du composant
Nous pouvons animer une certaine propriété d'un composant multi-propriété. Pour ce faire, nous sélectionnons la propriété du composant à l'aide de la syntaxe à points: componentName.propertyName .
Par exemple, pour animer le rayon supérieur d'un cône, vous pouvez sélectionner la valeur radiusTop avec geometry.radiusTop .
<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>