Question

我的使用案例是根据用户向左或向右滑动，一次将相机旋转60度。所以我决定用动画来试试。我可以像摄像机或天空一样拖动相机，当我滑动它会旋转60度并停止，我可以继续向左或向右滑动，移动60度，再拖动相机。

我还想看看如果可能的话，我是否可以对外观控制产生ease效果，无法在网上找到任何相关内容。

我试过了：

1）根据mousedown和mouseup位置动态设置动画方向normal和reverse，但它总是根据初始值旋转一个方向。

2）我尝试绑定from和to，并根据a）from和b）的旋转值设置动画的vr-camera { {1}}并将动画的camera-wrapper设置为to。但是动画总是重置到原始位置并从该点开始并忽略camera.x camera.y + (+/-60degree) camera.z值，即使DOM已更新。

3）我试图在没有包装的情况下旋转from和vr-camera，但都将旋转重置为原始点。

4）我试图在相机上camera-wrapper，这会移除相机的拖动，但滑动仍然会从原始位置重置。

＆＃13;

look-controls="enabled: false"

＆＃13;

      handleMouseDown(e) {
        console.log("mousedown");
        document.querySelector('a-animation').stop();
        this.mousedownPosition = { x: e.x, y: e.y };
      },
      handleMouseUp(e) {
        console.log("mouseup");
        this.mouseupPosition = { x: e.x, y: e.y };

        const direction = this.mousedownPosition.x > this.mouseupPosition.x ? 60 : -60;
       
        debugger;
        const cameraRotation = document.getElementById('camera-wrapper').getAttribute('rotation')
        this.fromRotation = `${cameraRotation.x} ${cameraRotation.y} ${cameraRotation.z}`;

        const yRotation = cameraRotation.y + direction;
        this.toRotation = `${cameraRotation.x} ${yRotation} ${cameraRotation.z}`;

       
        // Make sure DOM is updated before emit event 
        this.$nextTick(function () {
          document.getElementById('camera-wrapper').emit('swipe');
        });

       },

＆＃13;

动画运行后：相机包装器的旋转值为<a-scene id="aframescene" class="aframebox" vr-mode-ui="enabled: false" embedded physics="gravity: 0;" debug> <a-entity id="camera-wrapper">  <a-camera id="vr-camera" look-controls="reverseMouseDrag: true" fov="60" easing="ease-in-out"> </a-camera> <a-animation id="swipe" :from="fromRotation" :to="toRotation" attribute="rotation" direction="normal" begin="swipe" dur="4000" repeat="0" easing="ease-in-out"> </a-animation> </a-entity> <a-assets timeout="1"> <video id="videoid" crossorigin="anonymous" src="video.src" type="video/mp4" webkit-playsinline playsinline ></video> <img id="imageid" crossorigin="anonymous" src="image.src"></img> </a-assets>  <a-entity id="sky" geometry="primitive: sphere; radius: 100" :material="src: #imageid; side:front; color:#FFF; shader:flat; npot:true'" scale="-1 1 1"> </a-entity> </a-scene>，我希望它在0 60 0，这与动画的0 0 0值相同。

Answer 1

我可以使用aframe-animation-component在运行时绑定from和to值。

require('aframe-animation-component');



      const scene = document.querySelector('a-scene');
      scene.addEventListener('mousedown', this.handleMouseDown);
      scene.addEventListener('mouseup', this.handleMouseUp);
      
      handleMouseDown(e) {
        this.mousedownPosition = { x: e.x, y: e.y };
      },
      handleMouseUp(e) {
        this.mouseupPosition = { x: e.x, y: e.y };
        const direction = this.mousedownPosition.x > this.mouseupPosition.x ? 60 : -60;

        const cameraRotation = document.getElementById('camera-wrapper').getAttribute('rotation')
        this.fromRotation = `${cameraRotation.x} ${cameraRotation.y} ${cameraRotation.z}`;

        const yRotation = cameraRotation.y + direction;
        this.toRotation = `${cameraRotation.x} ${yRotation} ${cameraRotation.z}`;


        // Make sure DOM is updated before emit event
        this.$nextTick(() => {
          document.getElementById('camera-wrapper').emit('swipe');
        });
      },

<a-scene  id="aframescene" class="aframebox" vr-mode-ui="enabled: false" embedded physics="gravity: 0; debug: true" debug>
        <a-entity id="camera-wrapper"
                  :animation__rotation="`property: rotation; dir: normal; dur: 1000; startEvents:swipe ;
                  easing: easeInSine; from:${fromRotation}; to:${toRotation}`">
          <a-camera id="vr-camera" universal-controls look-controls="{enable: false}" fov="60"></a-camera>
        </a-entity>
         
        <!-- below replace a-videosphere and a-sky for video and image -->
        <a-entity id="sky" geometry="primitive: sphere; radius: 100"
                  :material="'src: ' + currentSource +'; side:front; color:#FFF; shader:flat; npot:true'"
                  scale="-1 1 1">
        </a-entity>
      </a-scene>

AFrame - 一次连续旋转一个相机实体60度

1 个答案: