如何在 A-Frame 中重用动画？

Question

有没有办法以更漂亮的方式重复使用相同的动画？

<a-entity channel-selection class="channels" mixin="fontplane" material="opacity:0.6">
  <a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
  <a-animation attribute="material.opacity" begin="unfade" to="0.6"></a-animation>
  <a-entity class="channels" mixin="channelfont" text="text: Channel6">
    <a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
    <a-animation attribute="material.opacity" begin="unfade" to="0.6"></a-animation>
  </a-entity>
</a-entity>

Answer 1

有几种方法。

一：你可以在a-animation上使用mixins：

<a-mixin id="fade" attribute="material.opacity" begin="fade" to="0"></a-mixin>
<a-mixin id="fade" attribute="material.opacity" begin="unfade" to="0.6"></a-mixin>
<a-entity channel-selection class="channels" mixin="fontplane" material="opacity:0.6">
      <a-animation mixin="fade"></a-animation>
      <a-animation mixin="unfade"></a-animation>

      <a-entity class="channels" mixin="channelfont" text="text: Channel6">
        <a-animation mixin="fade"></a-animation>
        <a-animation mixin="unfade"></a-animation>
      </a-entity>
    </a-entity>

还有 animation component with mixins or aframe-mss (mixin stylesheet format)，但不幸的是，存在一些与可以具有多个实例的组件的混合有关的错误。

二：template component也可以

  <head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  <script src="https://unpkg.com/ngokevin/aframe-template-component/dist/aframe-template-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-assets>
      <script id="fadeAnimations" type="text/html">
        <a-animation></a-animation>
        <a-animation></a-animation>
      </script>
    </a-assets>

    <a-entity template="src: #fadeAnimations">
      <a-entity template="src: #fadeAnimations"></a-entity>
    </a-entity>
   </a-scene>

如何在 A-Frame 中重用动画？

How to reuse animations in A-Frame?

aframe