在 A 帧中同时制作两个动画 [英] making two animations at once in A-frame
问题描述
例如,通过使用相机装备,我想通过单击从 A 移动到 B,然后从 B 移动到 C.我通常写to 0 0 0"在onclick"事件中.
For example, by using camera rig, I want to move from A to B then B to C in just one single click. I normally write "to 0 0 0" in the event "onclick".
我想触发两个动画1"和1_1".目前只有1_1"这是由点击触发的.我正在使用来自 https://www.npmjs.com/package 的时间线/aframe-animation-timeline-component
I want trigger both animations "1" and "1_1". At the moment it is only the "1_1" that is triggered by a click. I'm using a timeline from https://www.npmjs.com/package/aframe-animation-timeline-component
我的代码可以在 https://glitch.com/edit/中找到#!/winter-deserted-topaz
推荐答案
这个话题很笼统,所以我把它分成不同的案例:
The topic is general, so I'll split it into separate cases:
同时触发两个动画
如果实体内的动画组件共享一个事件(定义在 startEvents ) 它们会同时触发:
If the animation components within an entity share an event ( defined in startEvents ) they will all fire at once:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene cursor="rayOrigin: mouse">
<a-box position="0 1 -3" rotation="0 45 0" scale="0.25 0.25 0.25" color="#4CC3D9"
animation__rotation="property: rotation; from: 0 45 0; to: 0 405 0; dur: 4000;
easing: linear; startEvents: click"
animation__scale="property: scale; from: 0.25 0.25 0.25; to: 1.5 1.5 1.5; dur: 2000;
dir: alternate; easing: linear; loop: 2; startEvents: click">
</a-box>
</a-scene>
在另一个动画完成后开始动画
您可以等待一个动画完成,然后使用一些 javascript 开始另一个动画.
You can wait for one animation to finish and start another one with a bit of javascript.
您可以通过 animationcomplete__确定动画是否结束a>(ID 是 animation__ 位之后的名称"字符串)事件.
You can determine if an animation has ended with the animationcomplete__(ID is the 'name' string after the animation__ bit) event.
然后你可以发出一个信号,开始第二个动画:
Then you can emit a signal, which starts the second animation:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("animation-manager", {
init: function() {
// wait for the first animation to finish
this.el.addEventListener("animationcomplete__first", e => {
// start the second animation
this.el.emit("second")
})
}
})
</script>
<a-scene cursor="rayOrigin: mouse">
<a-box position="0 1 -3" rotation="0 45 0" scale="0.25 0.25 0.25" animation-manager color="#4CC3D9"
animation__first="property: rotation; from: 0 45 0; to: 0 405 0; dur: 2000;
easing: linear; startEvents: click"
animation__second="property: scale; from: 0.25 0.25 0.25; to: 1.5 1.5 1.5; dur: 2000;
dir: alternate; easing: linear; loop: 2; startEvents: second">
</a-box>
</a-scene>
这篇关于在 A 帧中同时制作两个动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!