XR- Frame 动画

admin

XR- Frame 动画

本节主要说明动画的一种实现方法：

首先将动画配置作为资源引入：

   <xr-asset-loadasset-id="basic-anim"type="keyframe"src="/assets/animation/basic-animation.json"/>

可以看下这个json，其实和css大同小异

   {
    "keyframe": {
      "cube": {
        "0": {
          "position": [-3, 0, 2]
        },
        "50": {
          "rotation": [0, 0, 0],
          "scale": [1, 1, 1]
        },
        "100": {
          "position": [3, 0, 2],
          "rotation": [0, 3.14, 0],
          "scale": [1.4, 1.4, 1.4]
        }
      },
      ...
    },
    "animation": {
      "default": {
        "keyframe": "cube",
        "duration": 1,
        "ease": "ease-in-out",
        "loop": 400000,
        "delay": 1,
        "direction": "both"
      },
      ...
    }
   }

先定义关键帧，再定义动画参数，之后在节点上关联就可以了

   <xr-mesh
   node-id="mesh-cube"position="-3 0 2"scale="1 1 1"rotation="0 0 0"geometry="cube"material="standard-mat"uniforms="u_baseColorFactor:0.298 0.764 0.85 1"
   anim-keyframe="basic-anim"anim-autoplay="clip:cube, speed:2"
   cast-shadow
></xr-mesh>

anim-keyframe对应asset-id，anim-autoplay对应json中的动画名，还可以指定速度

可以参与动画的属性：

属性的值为number、number-array和color类型的数据都可以进行动画，程序会自动计算关键帧之间每一帧每个属性的值应该是多少。

除了position、rotation、scale之外，像material.u_baseColorFactor这样的属性也可以，如下，可以改变物体的颜色：

   "0": {
    "material.u_baseColorFactor": [0.48, 0.78, 0.64, 1]
},
"100": {
    "material.u_baseColorFactor": [0.176, 0.368, 0.937, 1]
}