Conversion de l'exemple Popmotion à GreenSock

Question

J'essaie de convertir cet exemple Popmotion en 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); 

}); 

Être un noob total à la GreenSock, est-ce facile à faire? Est-ce que GreenSock a des acteurs et des simulateurs?

Answer 1

Je n'ai jamais utilisé GreenSock pour faire des animations dynamiques continues (c'est peut-être possible, je ne suis pas un expert en GreenSock). Je préfère quitter cette bibliothèque pour faire une animation spécifique. Dans l'exemple suivant, j'ai essayé de reproduire le même effet Popmotion que vous avez posté en utilisant mes propres calculs et j'utilise simplement la bibliothèque d'animation pour retourner la boîte à son emplacement d'origine. Je pense que cela peut vous aider dans votre objectif:

J'ai supprimé les préfixes des fournisseurs pour rendre plus facile à lire le code, mais l'exemple CodePen a les préfixes.

Code HTML:

<div id="container"> 

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

</div> 

CSS code

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

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

} 

Ici, vous avez un CodePen avec un exemple de travail.

EDIT: J'ai mis à jour le CodePen pour fonctionner avec Touch Events.

CodePen