A-Frame：如何使用場景動畫場景上的物體

Question

讓我們來談談3D電影或者像那樣的模糊。好的，我知道如何使用<a-animation>來動畫屬性。我也嘗試基於animejs的aframe-animation-component。我喜歡animejs。它有用anime.timeline()。您可以根據需要設置此幀並設置更多動畫。但它有非常嚴重的麻煩：它不能動畫複雜的屬性，如position或scale或另一個序列化組件。這個麻煩我已經描述過here。 Animejs的時間表非常適合DOM，但非常難以使用A幀。 我也爲three.js找到了this example。也許我可以爲我的A-Frame場景生成相同的動畫？尋找關於場景關鍵幀或時間表的任何建議。

Answer 1

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

我出版的動畫時間線的組成部分。

<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>