我的项目中有两个动画："animation"one_answers"animation_mouseenter"。我试图通过使用startEvents、resumeEvents和pauseEvents等属性来控制动画。在实体从"animation_mouseenter"切换到"animation"之前，一切都很正常。动画完成后__mouseenter'。实体从"animation"离开实体的最后一个位置开始，而我想要的是它应该从"animotion_mouseenter"指定的新位置继续。
我还尝试使用JavaScript中的.setAttribute，并尝试在tick函数的帮助下调整"animation"的from属性，该函数将不断更新实体的新位置。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('eventhandling', {
tick: function () {
var el = this.el;
var entity = document.querySelector('#duck1');
el.addEventListener('animationcomplete', function(){
entity.emit('starteventforAnimation');
});
}
});
</script>
</head>
<body>
<a-scene>
<a-entity class="rota" id="duck1" color="#FF0000" scale="0.1 0.1 .1" position="2 0 -7" animation="property: rotation;from: ; to:0 -360 0; loop:true; easing:linear; dur:30000; pauseEvents: mouseenter; resumeEvents: starteventforAnimation " animation__mouseenter="property: rotation;from: ; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter ;pauseEvents: starteventforAnimation; resumeEvents: mouseenter" eventhandling>
<a-box class="rota" color="#FF0000" gltf-model="spaceship.glb" position="20 0 -10" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-box>
</a-entity>
<a-camera position="0 1.2 1.3"><a-cursor objects=".rota" ></a-cursor></a-camera> <
</a-scene>
</body>
</html>据我所知，您希望在任何点更改旋转方向(并放慢速度等(。
通过旋转父对象来移动对象。这意味着位置在这里不起主要作用——轮换起作用。
我只使用一个动画和一个组件，该组件将：
- 获取当前旋转，加或减360
- 更改持续时间
- 使用新值更新现有动画
这里有一个例子，有几个巧妙的技巧：
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent("animation-manager", {
init: function() {
// bind updateAnimation() so that we have new functions
// doing exactly what we need
this.rotateClockwise = this.updateAnimation.bind(this, 1);
this.rotateCounterClockwise = this.updateAnimation.bind(this, -1);
// bind the above functions to mouseenter/mouseleave
this.el.addEventListener("mouseenter", this.rotateClockwise)
this.el.addEventListener("mouseleave", this.rotateCounterClockwise)
},
updateAnimation: (function() {
// this is an IIFE - there two vectors are created only once
// even though the returned function is called multiple times
const fromRotation = new THREE.Vector3();
const toRotation = new THREE.Vector3();
return function(dir) {
// get current rotation, and move the target rotation by 360 or -360
// depending on the direction
fromRotation.copy(this.el.getAttribute("rotation"));
toRotation.copy(this.el.getAttribute("rotation"));
toRotation.y += dir * 360
// update the animation
this.el.setAttribute("animation", {
"from": AFRAME.utils.coordinates.stringify(fromRotation),
"to": AFRAME.utils.coordinates.stringify(toRotation),
"dur": dir == -1 ? "8000" : "1000"
})
}
})()
})
</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: a-box">
<a-box position="0 1 -4" color="blue" animation-manager
animation="property: rotation; to:0 -360 0; loop:true; easing:linear; dur:8000">
<a-sphere position="2 0 0" color="green" radius="0.25" foo></a-sphere>
</a-box>
</a-scene>巧妙的技巧是函数绑定、IIFE和AFRAME。Utils