javascript – 将Popmotion示例转换为GreenSock

我正在尝试将此Popmotion示例转换为GreenSock.

var SELECTOR      = '.Box';
var velocityRange = [-1000,1000];
var maxRotate     = 30;
var smoothing     = 100;

var Box = ui.select(SELECTOR,{
    values: {
        x: 0,y: 0,rotateY: {
            watch: function (actor) {
                return actor.values.x.velocity;
            },mapFrom: velocityRange,mapTo: [-maxRotate,maxRotate],smooth: smoothing
        },rotateX: {
            watch: function (actor) {
                return actor.values.y.velocity;
            },mapTo: [maxRotate,-maxRotate],smooth: smoothing
        }
    }
});

var track2D = new ui.Track({
    values: {
        x: {},y: {}
    }
});

var springBack = new ui.Simulate({
    simulate: 'spring',spring: 500,friction: 0.3,values: {
        x: 0,y: 0
    }
});

$('body').on('touchstart mousedown',SELECTOR,function (e) {

    e.preventDefault();        
    Box.start(track2D,e);

});

$('body').on('touchend mouseup',function () {

    Box.start(springBack);

});

作为GreenSock的总菜鸟,这很容易吗？ GreenSock有演员和模拟器吗？

解决方法

我从未使用GreenSock制作连续的动态动画(也许有可能,我不是GreenSock的专家).我更喜欢离开这个库来制作一个特定的动画.在下一个示例中,我尝试使用自己的计算复制您发布的相同Popmotion效果,我只使用动画库将框返回到其原始位置.我认为它可以帮助您达到目的：

I’ve removed the vendor prefixes to make the code easier to read,but the CodePen example has the prefixes.

HTML代码：

<div id="container">

  <div class="Box"></div>

</div>

CSS代码

html {
    height: 100%;
}

body {
    background: #e25875;
    height: 100%;
}

#container {
    height: 100%;
    perspective: 700;
    perspective-origin: 50% 50%;
    position: relative;
    transform-style: preserve-3d;
    width: 100%;
}

.Box {
    background: white;
    border-radius: 4px;
    height: 150px;
    left: 50%;
    margin-left: -75px;
    margin-top: -75px;
    position: absolute;
    cursor: pointer;
    top: 50%;
    will-change: transform;
    width: 150px;
}

JavaScript代码：

//---Variables
var doc = document,Box = doc.querySelector(".Box"),startX = 0,startY = 0,posX = 0,posY = 0,speedX = 0,speedY = 0,obj = {x: 0,speedX: 0,speedY: 0};

//---Main Events
Box.addEventListener("mousedown",startMove);
doc.addEventListener("mouseup",stopMove);

//---Start the movement
function startMove (evt) {

    startX = evt.pageX;
    startY = evt.pageY;

    //---Add the mouse move events
    doc.addEventListener("mousemove",updatePosition);

}

//---Update variables
function updatePosition (evt) {

    speedX = (evt.pageX - posX) * 5;
    speedY = (evt.pageY - posY) * 5;

    if (speedX < -45) { speedX = -45 }
    if (speedX > 45) { speedX = 45 }
    if (speedY < -45) { speedY = -45 }
    if (speedY > 45) { speedY = 45 }

    posX = evt.pageX;
    posY = evt.pageY;

    obj.x += (posX - startX - obj.x) * .15;
    obj.y += (posY - startY - obj.y) * .15;
    obj.speedX += (speedX - obj.speedX) * .15;
    obj.speedY += (speedY - obj.speedY) * .15; 

    updateTransform();

}

//---Stop movement,returns the Box to its place
function stopMove () {

    TweenLite.to(obj,0.75,{
        ease: Elastic.eaSEOut.config(1,0.3),x: 0,speedY: 0,onUpdate: updateTransform
    });

    doc.removeEventListener("mousemove",updatePosition);

}

//---Update the Box transformations
function updateTransform () {

    var transformStr = "translate(" + obj.x + "px," + obj.y + "px) rotateX(" + (-obj.speedY) + "deg) rotateY(" + obj.speedX + "deg)";

    Box.style.transform = transformStr;

}

这里有一个CodePen和一个工作示例.

编辑：我已更新CodePen以使用Touch Events.

CodePen

javascript – 将Popmotion示例转换为GreenSock

解决方法

猜你在找的JavaScript相关文章