设置连续动画

Question

有没有办法设置连续动画？示例：基于相机旋转，每次相机旋转时围绕它旋转球体。

Answer 1

持续检查相机旋转并使用 tick 更新球体的组件：

AFRAME.registerComponent('rotation-updater', {
  tick: function () {
    var sphere = this.el;
    var camera = this.el.sceneEl.cameraEl;

    var cameraRotation = camera.getAttribute('rotation');
    // var sphereRotation = DO SOMETHING WITH CAMERA ROTATION.
    sphere.setAttribute('rotation', sphereRotation);
  }
});

Answer 2

嗯，当动画应该是有限的时候可以使用这个：

AFRAME.registerComponent('camera-seeker', {
    init() {
        this.CAMERA = document.querySelector('#player');
        this.newCords = {};
        this.setupAnimation();
    },

    setupAnimation () {
        let el = this.el;
        var this_ = this;
        seekAnim = new AFRAME.TWEEN.Tween(this.el.getAttribute('rotation'))
            .to(this.newCords, 30000)
            .easing(AFRAME.TWEEN.Easing.Quadratic.Out)
            .onUpdate(function () {
                el.setAttribute('rotation', `${this.x}, ${this.y}, ${this.z}`);
            })
            .repeat(Infinity)
            .start();
    },

    tick () {
        if (!isGameStart()) return;
        if (AFRAME.utils.coordinates.stringify(this.CAMERA.getAttribute('rotation')) !== AFRAME.utils.coordinates.stringify(this.el.getAttribute('rotation'))) {
            Object.assign(this.newCords, this.CAMERA.getAttribute('rotation'));
        }
    }
});

设置连续动画

Set continuous animation

javascript

aframe