Conversione di esempio di popmotion in GreenSock

Question

Sto tentando di convertire questo esempio Popmotion in 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); 

}); 

Essendo un noob totale al GreenSock, è così facile da fare? GreenSock ha attori e simulatori?

Answer 1

Non ho mai utilizzato GreenSock per creare animazioni dinamiche continue (forse è possibile, non sono un esperto in GreenSock). Preferisco lasciare questa libreria per creare un'animazione specifica. Nel prossimo esempio, ho provato a replicare lo stesso effetto Popmotion che hai postato utilizzando i miei calcoli e io uso la libreria di animazione per riportare la scatola nella sua posizione originale. Penso che può aiutare nel vostro scopo:

Ho rimosso i prefissi vendor per rendere il codice più facile da leggere, ma l'esempio CodePen ha i prefissi.

codice HTML:

<div id="container"> 

    <div class="box"></div> 

</div> 

codice 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; 
} 

codice 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; 

} 

Qui si ha un CodePen con un esempio funzionante.

MODIFICA: Ho aggiornato il CodePen per funzionare con Touch Events.

CodePen