0

查询中的补间动画有一些问题。我想根据变量切换动画方向。我有一个代表“左”或“右”的变量。当用户在该方向拖动鼠标时设置这些值。而且我需要更改我的动画，以便它根据这个变量在正确的方向上动画。动画基本上翻转了一个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
}
4

2 回答 2

0

这是您的小提琴http://jsfiddle.net/Boolean/b6TUf/4/的工作分支

由于以下原因，您的版本无法正常工作。

  1. 您需要包含 JQueryUI 框架。
  2. 你没有prevXPos = event.pageX;像我在第一个回答中那样设置prevPos = e.clientX;。这需要在设置方向后完成，以帮助跟踪当前方向。
  3. 您没有实例化dirX变量。
  4. 我的目标是 ID 而不是类。如果没有它也可以工作，但它不会被优化。
  5. 它旋转了很多次，因为您在可拖动函数中实例化补间。这意味着每次拖动时都会创建新的补间。
  6. 您需要重置prevXPos = event.pageX;拖动开始。

希望这可以帮助 ：）

于 2013-11-07T12:21:48.710 回答
0

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

    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/

于 2013-11-06T17:02:50.563 回答