A-Frame: comment animer des objets sur scène avec scénario

Question

Parlons de films en 3D ou de choses comme ça. Ok, je sais comment animer des propriétés avec <a-animation>. J'ai également essayé aframe-animation-component basé sur animejs. J'aime les animejs. Il a utile anime.timeline(). Vous pouvez simplement définir des cadres de cette et animer beaucoup d'objets que vous le souhaitez. Mais il a des problèmes très sérieux: il n'est pas capable d'animer des attributs complexes comme position ou scale ou un autre composant sérialisé. Ce problème que j'ai décrit here. La timeline d'Animejs est parfaite pour DOM, mais très difficile à utiliser avec A-Frame. J'ai aussi trouvé this example pour three.js. Peut-être que je peux générer la même animation pour ma scène A-Frame? Vous recherchez des suggestions sur les images clés ou les chronologies de la scène.

Answer 1

https://www.npmjs.com/package/aframe-animation-timeline-component

I a publié la composante chronologie d'animation.

<a-scene animation-timeline__1="timeline: #myTimeline; loop: true"> 

<a-timeline id="myTimeline"> 
    <a-timeline-animation select="#text1" name="togglevisible"></a-timeline-animation> 
    <a-timeline-animation select="#text1" name="fadein"></a-timeline-animation> 
    <a-timeline-animation select="#text1" name="fadeout"></a-timeline-animation> 
    <a-timeline-animation select="#text1" name="togglevisibleoff"></a-timeline-animation> 

    <a-timeline-group> 
    <a-timeline-animation select="a-entity[mixin~=box]" name="fadein"></a-timeline-animation> 
    <a-timeline-animation select="a-entity[mixin~=box]" name="scale"></a-timeline-animation> 
    <a-timeline-animation select="a-entity[mixin~=box]" name="color"></a-timeline-animation> 
    </a-timeline-group> 

    <a-timeline-group> 
    <a-timeline-animation select="#text2" name="togglevisible"></a-timeline-animation> 
    <a-timeline-animation select="#text2" name="fadein"></a-timeline-animation> 
    <a-timeline-animation select="#text2" name="textcolor"></a-timeline-animation> 
    </a-timeline-group> 

    <a-timeline-animation select="#text2" name="fadeout"></a-timeline-animation> 
    <a-timeline-animation select="#text2" name="togglevisibleoff"></a-timeline-animation> 

    <a-timeline-animation select="#text3" name="togglevisible"></a-timeline-animation> 
    <a-timeline-group> 
    <a-timeline-animation select="a-entity[mixin~=box]" name="color"></a-timeline-animation> 
    <a-timeline-animation select="a-entity[mixin~=box]" name="rotate"></a-timeline-animation> 
    <a-timeline-animation select="a-entity[mixin~=box]" name="position"></a-timeline-animation> 
    <a-timeline-animation select="#text3" name="fadein"></a-timeline-animation> 
    <a-timeline-animation select="#text3" name="positionin"></a-timeline-animation> 
    </a-timeline-group> 

    <a-timeline-animation select="#text3" name="positionout"></a-timeline-animation> 
    <a-timeline-animation select="#text3" name="togglevisibleoff"></a-timeline-animation> 

    <a-timeline-animation select="#text4" name="togglevisible"></a-timeline-animation> 

    <a-timeline-group> 
    <a-timeline-animation select="#sky" name="color"></a-timeline-animation> 
    <a-timeline-animation select="#text4" name="fadein"></a-timeline-animation> 
    </a-timeline-group> 

    <a-timeline-animation select="#text4" name="fadeout" offset="500"></a-timeline-animation> 
</a-timeline> 

<a-mixin id="box" 
    geometry="primitive: box" 
    material="color: #AAA; opacity: 0" 
    animation__fadein="property: material.opacity; dur: 2000; from: 0; to: 1; autoplay: false" 
    animation__scale="property: scale; to: 2 20 2; dur: 2000; easing: easeInOutElastic; autoplay: false" 
    animation__position="property: position; to: 0 30 -3; dur: 2000; autoplay: false" 
    animation__color="property: material.color; from: #AAA; to: #222; dur: 2500; autoplay: false" 
    animation__rotate="property: rotation; to: 0 360; dur: 1000; easing: easeInQuad; autoplay: false" 
    scale="0.0001 0.0001 0.0001" 
></a-mixin> 

<a-mixin id="text" 
    text="align: center; color: #333; width: 6; opacity: 0" 
    animation__fadein="property: text.opacity; from: 0; to: 1; dur: 3000; easing: linear; autoplay: false" 
    animation__fadeout="property: text.opacity; from: 1; to: 0; dur: 3000; easing: linear; autoplay: false" 
    animation__togglevisible="property: visible; from: false; to: true; dur: 1; autoplay: false" 
    animation__togglevisibleoff="property: visible; from: true; to: false; dur: 1; autoplay: false" 
    position="0 2 -3" 
    visible="false"></a-mixin>