未考虑新数据的 A-Frame 相机旋转和移动动画答案

【问题标题】：A-Frame Camera rotation and movement animation not taking into account new data未考虑新数据的 A-Frame 相机旋转和移动动画
【发布时间】：2018-02-11 10:30:13
【问题描述】：

我正在尝试让我的相机移动并旋转到 js 中动态给出的某些位置和旋转。

但是，相机从起始值旋转到 0 0 0。当数据说它应该是其他值时。旋转立即完成，没有动画。即使数据成功改变，位置也不会改变。

我正在使用 aframe-animation-component。

// JS
var camera = document.getElementById('camera');

camera.components.animation__movecamera.data.from = camera.components.position.data;
camera.components.animation__rotatecamera.data.from = camera.components.rotation.data;

camera.components.animation__movecamera.data.to = (positions.x - positionX)+ ' ' + positions.y + ' ' + (positions.z + 10);
camera.components.animation__rotatecamera.data.to = rotations.x + ' ' + rotations.y + ' ' + rotations.z;

camera.emit('rotateCamera');
camera.emit('moveCamera');


// HTML
<a-camera id="camera"
    look-controls
    wasd-controls="acceleration:200"
    animation__rotateCamera="property: rotation; startEvents: rotateCamera;"
    animation__moveCamera="property: position; startEvents: moveCamera;"
>

感谢您的帮助。

【问题讨论】：

标签： javascript animation aframe

【解决方案1】：

data 属性不应该直接访问，它是组件的内部变量。必须改用公共 API：

el.setAttribute('animation__rotateCamera', { to: foo });

【讨论】：

谢谢，它解决了动画不发生的问题。但是，您知道为什么我的动画开头有一个看起来像图形故障的帧吗？