Question

在查询中使用tweenlite动画时出现问题。我想根据变量切换动画方向。我有一个代表“左”或“右”的变量。当用户在该方向上拖动鼠标时，将设置这些值。我需要更改我的动画，以便根据此变量在正确的方向上进行动画制作。动画基本上翻了一个div。像卡片翻转。需要以某种方式获得旋转值动态。

有什么建议吗？

var tb = false;
if (dirX == "right") {
    if (tb == false) {
        TweenLite.to($(this).find(".obj"), 1, {
            rotationY: -180,
            transformStyle: "preserve-3d",
            ease: Back.easeOut,
            onComplete: function () {
                TweenLite.set($(this).find(".obj"), {
                    rotationY: -180
                });
                tb = true;
            }
        });
    }
    if (tb == true) {
        TweenLite.to($(this).find(".obj"), 1, {
            rotationY: -360,
            transformStyle: "preserve-3d",
            ease: Back.easeOut,
            onComplete: function () {
                TweenLite.set($(this).find(".obj"), {
                    rotationY: -360
                });
                tb = false;
            }
        });
    }
}
if (dirX == "left") {
    //the opposit
}

Answer 1

可以使用'+='或'-='语法相对于当前位置设置补间。

    var prevPos, obj = $('#obj');

    TweenLite.set(obj, {rotationX:30, transformOrigin:"middle middle",transformPerspective:500});

    var tweenLeft =  new TweenLite.to(obj, 1, { rotationY: '+=180', ease: Back.easeOut, paused:true});
    var tweenRight = new TweenLite.to(obj, 1, { rotationY: '-=180', ease: Back.easeOut, paused:true});

    $('#container').mouseenter(function( e ) {
        prevPos = e.clientX;  
    });

    $('#container').mousemove(function( e ) {

        if(!tweenLeft.isActive() && !tweenRight.isActive()){

            if(prevPos > e.clientX){
                tweenRight.restart(); 
            }else if(prevPos < e.clientX){
                tweenLeft.restart();
            }
        }     
        prevPos = e.clientX;

    });

这里有效：http://jsfiddle.net/Boolean/teyHa/5/

Answer 2

这是你的小提琴http://jsfiddle.net/Boolean/b6TUf/4/

的工作分叉

由于以下原因，您的版本无效。

您需要包含JQueryUI框架。
您在prevXPos = event.pageX;的第一个回答中没有设置prevPos = e.clientX;。这需要在设置方向后帮助跟踪当前方向。
您没有实例化dirX变量。
我的目标是ID而非课程。它可以没有工作，但不会非常优化。
由于您在可拖动函数中实例化补间，因此它旋转了很多次。这意味着每次拖动时都会创建新的补间。
您需要在拖动开始时重置prevXPos = event.pageX;。

希望这会有所帮助：）

根据var切换旋转方向

2 个答案: