javascript - 鼠标按下时补间旋转停止并开始补间

Question

我有一个在 z 轴上旋转的物体。 onMouseDown 旋转停止，onMouseUp 旋转在 2 秒后恢复。有没有办法让旋转缓慢恢复(就像 CSS 的 Easy in)？

旋转开始和停止的代码。

                if ( etaj1 !== undefined ) {
                    etaj1.rotation.z += delta * 0;
                    if(!isMouseDown){
                        etaj1.rotation.z += delta * 0.05 ;

                    }
                }

如果在 2 秒过去之前进行新的点击，则还有一个 resetTimer 条件。

            var timerHandle = setTimeout (wait , 2000);
            function resetTimer () {
                window.clearTimeout (timerHandle);
                timerHandle = setTimeout (wait , 2000);
            }

            function onMouseDown(){
                console.log("Mouse DOWN");
                isMouseDown = true;               
            }

            function onMouseUp(){                   
                window.clearTimeout (timerHandle);
                timerHandle = setTimeout (wait , 2000);                 
            }

            function wait (){
                resetTimer;
                console.log("Mouse UP");
                isMouseDown = false;
            }

这个想法是为 isMouseDown = false; 进行一个转换，并为 isMouseDown = true; 进行另一个转换

基本上，我想要做的是使用 quart.out 补间从下面的链接停止旋转，等待 2 秒，如果没有单击，则使用 quart.in 补间恢复旋转。

https://threejs.org/examples/#webgl_loader_collada

谢谢。

Answer 1

我不是一个三.js 人，但是你所问的问题也适用于其他领域。所以我会在这里提出一个通用的解决方案。首先是概念验证:

https://jsfiddle.net/ibowankenobi/u4xwnLam/4/

我将开始声明我需要的全局变量，根据需要将它们包装起来:

var rotation = 0;
var bar = document.getElementById("bar");
var container = document.getElementById("container");

我需要在没有 Three.js 的情况下演示这一点，所以我需要一个容器和一些可以旋转的东西，这样你就不需要 bar和container在你的情况下。在你的情况下轮换是你的 etaj1.rotation.z

我们首先需要一个将 0-1 再次映射到 0-1 的函数，但不是线性的。这些被称为插值，有很多，余弦，这个，那个，最广泛使用的是缝合和变换的x^3，并给出“慢进慢出”的效果:

 function slowInSlowOut(t){
    if(2*t<<0){
        return 4*(t-1)*(t-1)*(t-1)+1;
    } else {
        return 4*t*t*t;
    }
}

我们必须用这个函数做一些事情，所以我会写另一个动画

function changeSpeed(obj,newSpeed){
    var oldSpeed = obj.__oldSpeed || 0;
    var startTime;
    newSpeed = newSpeed || 0;
    obj.__currentFrame && window.cancelAnimationFrame(obj.__currentFrame);//cancel a previous changeSpeed if fired twice
    obj.__currentFrame = window.requestAnimationFrame(anim);
    function anim(t){
        startTime = startTime || t;
        var elapsed = t - startTime,
            parametric = slowInSlowOut(elapsed/2000);
        if(parametric>=1){
            obj.__oldSpeed = newSpeed;
        } else {
            obj.__oldSpeed = newSpeed + (oldSpeed-newSpeed) * (1-parametric);
            obj.__currentFrame = window.requestAnimationFrame(anim);
        }
    }
}

您为该函数提供一个对象，它会附加一个专有的 __oldSpeed属性(property)，newSpeed参数以度/17ms为单位进行测量(因为我使用的是requestAnimationFrame，它将每约17ms触发一次)。所以在你的情况下 obj是你的etaj1 .

在此功能中，您已经可以更新您的 etaj1.rotation.z如果你想。但我会写第三个函数来连续触发并听 __oldSpeed属性(property)并据此采取行动:

function animate(obj){
    rotation += (obj.__oldSpeed || 0);
    rotation = rotation % 360;
    obj.style.transform = "rotate("+rotation+"deg)";
    window.requestAnimationFrame(function(){animate(obj)});
}

这里，obj 是你的 etaj1旋转为etaj1.rotation.z 。我这里使用 DOM，所以我需要使用样式。您可以根据您的情况进行调整。

Animate 不会被解雇，所以我们需要解雇他:

window.requestAnimationFrame(function(){animate(bar)});

我将按照您的描述添加事件监听器:

container.addEventListener("mousedown",function(){changeSpeed(bar,0)},false);
container.addEventListener("mouseup",function(){changeSpeed(bar,12)},false);

现在我们给它一个起始速度:

changeSpeed(bar,12);

给你。如果您想知道如何自己做，这可能会帮助您开始。我想使用其他技术堆栈的人也可以根据自己的情况进行调整。

PS:

有人提到了延迟，在这种情况下修改 changeSpeed一点:

function changeSpeed(obj,newSpeed,delay){
    delay = delay || 0;
    var oldSpeed = obj.__oldSpeed || 0;
    var startTime;
    newSpeed = newSpeed || 0;
    obj.__currentFrame && window.cancelAnimationFrame(obj.__currentFrame);
    obj.__currentFrame = window.requestAnimationFrame(anim);
    function anim(t){
        startTime = startTime || t;
        var elapsed = t - startTime;
    if(elapsed < delay) {
       return obj.__currentFrame = window.requestAnimationFrame(anim);
    }
        var parametric = slowInSlowOut((elapsed-delay)/2000);
        if(parametric>=1){
            obj.__oldSpeed = newSpeed;
        } else {
            obj.__oldSpeed = newSpeed + (oldSpeed-newSpeed) * (1-parametric);
            obj.__currentFrame = window.requestAnimationFrame(anim);
        }
    }
}

这是一个有 2 秒延迟的 fiddle :

https://jsfiddle.net/ibowankenobi/u4xwnLam/10/