將Popmotion示例轉換爲GreenSock

Question

我試圖將此Popmotion示例轉換爲GreenSock。

http://codepen.io/popmotion/pen/ojrmmd

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; 
      }, 
      mapFrom: velocityRange, 
      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有演員和模擬器嗎？

Answer 1

我從來沒有用過GreenSock製作連續的動態動畫（也許這可能，我不是GreenSock的專家）。我寧願離開這個庫來製作一個特定的動畫。在下一個示例中，我試圖複製使用我自己的計算髮布的相同Popmotion效果，然後使用動畫庫將該框返回到原始位置。我認爲它可以幫助您達到您的目的：

我已刪除供應商前綴以使代碼更易於閱讀，但CodePen示例具有前綴。

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, y: 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, 
     y: 0, 
     speedX: 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