微信小程序xr-frame实现动画
基础知识：
-
动画系统
xr-frame中所有的动画都是通过动画系统AnimationSystem统一管理的，在每帧的同一个时机统一更新。动画系统自身没有什么逻辑，所有的逻辑都是在动画组件Animator和动画实现Animation中的。
-
动画实现
1.动画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]
}
},
"sphere": {
"0": {
"position": [-3, 0, 0],
"scale": [0.8, 0.8, 0.8]
},
"50": {
"position": [0, 0.2, 0],
"scale": [1, 1, 1]
},
"100": {
"position": [3, 0, 0],
"scale": [0.8, 0.8, 0.8]
}
},
"cylinder": {
"0": {
"position": [-3, 0, -2],
"rotation": [0, 0, 0]
},
"50": {
"rotation": [0, 0, -3.14]
},
"100": {
"position": [3, 0, -2],
"rotation": [0, 0, 3.14]
}
},
"plane": {
"0": {
"material.u_baseColorFactor": [0.48, 0.78, 0.64, 1]
},
"50": {
"material.u_baseColorFactor": [0.368, 0.937, 0.176, 1]
},
"100": {
"material.u_baseColorFactor": [0.176, 0.368, 0.937, 1]
}
},
"spotLight": {
"0": {
"position": [-4, 1, -4]
},
"25": {
"position": [-4.3, 0.5, -2]
},
"75": {
"position": [-3, 1.5, 2]
},
"100": {
"position": [-4, 1, 4]
}
}
},
"animation": {
"default": {
"keyframe": "cube",
"duration": 1,
"ease": "ease-in-out",
"loop": 400000,
"delay": 1,
"direction": "both"
},
"sphere": {
"keyframe": "sphere",
"duration": 1,
"ease": "ease-out",
"loop": 400000,
"delay": 1,
"direction": "both"
},
"cylinder": {
"keyframe": "cylinder",
"duration": 1,
"ease": "ease-in",
"loop": 400000,
"delay": 1,
"direction": "both"
},
"plane": {
"keyframe": "plane",
"duration": 4,
"ease": "linear",
"loop": 400000,
"delay": 1,
"direction": "both"
},
"spotLight": {
"keyframe": "spotLight",
"duration": 2,
"ease": "ease-in-out",
"loop": 400000,
"delay": 1,
"direction": "both"
}
}
}
可以参与动画的属性：
- 属性的值为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]
}2.引入动画（type="keyframe"）
3.模型或者节点绑定动画
整体代码效果(来源于：动画系统 | 微信开放文档)
- wxml部分：
- js部分:
Component({
properties: {
a: Number,
},
data: {
loaded: false
},
lifetimes: {},
methods: {
handleReady({detail}) {
const xrScene = this.scene = detail.value;
console.log('xr-scene', xrScene);
},
handleAssetsProgress: function({detail}) {
console.log('assets progress', detail.value);
},
handleAssetsLoaded: function({detail}) {
console.log('assets loaded', detail.value);
this.setData({loaded: true});
},
handleRaf: function({detail}) {
console.log('raf', detail.value);
}
}
})- 动画json部分：
{
"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]
}
},
"sphere": {
"0": {
"position": [-3, 0, 0],
"scale": [0.8, 0.8, 0.8]
},
"50": {
"position": [0, 0.2, 0],
"scale": [1, 1, 1]
},
"100": {
"position": [3, 0, 0],
"scale": [0.8, 0.8, 0.8]
}
},
"cylinder": {
"0": {
"position": [-3, 0, -2],
"rotation": [0, 0, 0]
},
"50": {
"rotation": [0, 0, -3.14]
},
"100": {
"position": [3, 0, -2],
"rotation": [0, 0, 3.14]
}
},
"plane": {
"0": {
"material.u_baseColorFactor": [0.48, 0.78, 0.64, 1]
},
"50": {
"material.u_baseColorFactor": [0.368, 0.937, 0.176, 1]
},
"100": {
"material.u_baseColorFactor": [0.176, 0.368, 0.937, 1]
}
},
"spotLight": {
"0": {
"position": [-4, 1, -4]
},
"25": {
"position": [-4.3, 0.5, -2]
},
"75": {
"position": [-3, 1.5, 2]
},
"100": {
"position": [-4, 1, 4]
}
}
},
"animation": {
"default": {
"keyframe": "cube",
"duration": 1,
"ease": "ease-in-out",
"loop": 400000,
"delay": 1,
"direction": "both"
},
"sphere": {
"keyframe": "sphere",
"duration": 1,
"ease": "ease-out",
"loop": 400000,
"delay": 1,
"direction": "both"
},
"cylinder": {
"keyframe": "cylinder",
"duration": 1,
"ease": "ease-in",
"loop": 400000,
"delay": 1,
"direction": "both"
},
"plane": {
"keyframe": "plane",
"duration": 4,
"ease": "linear",
"loop": 400000,
"delay": 1,
"direction": "both"
},
"spotLight": {
"keyframe": "spotLight",
"duration": 2,
"ease": "ease-in-out",
"loop": 400000,
"delay": 1,
"direction": "both"
}
}
}
- 效果展示：
xr-frame动画