Popmotion örneğini GreenSock'a dönüştürme

Question

Bu Popmotion örneğini GreenSock ürününe dönüştürmeye çalışıyorum. GreenSock de

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

}); 

toplam noob olmak, bunu yapmak kolay? GreenSock'un aktörleri ve simülatörleri var mı?

Answer 1

Sürekli dinamik animasyonlar yapmak için hiçbir zaman GreenSock kullanmamıştım (belki de, GreenSock'da uzman değilim). Belirli bir animasyon yapmak için bu kütüphaneden ayrılmayı tercih ediyorum. Bir sonraki örnekte, kendi hesaplamalarımı kullanarak gönderdiğiniz aynı Popmotion etkisini çoğaltmaya çalıştım ve kutuyu orijinal yerine geri döndürmek için animasyon kütüphanesini kullanıyorum. Bunun senin amaç size yardımcı olabilir düşünüyorum:

Ben kaldırdık satıcı önekleri okumak için kod kolaylaştırmak için, ama CodePen örnek önekleri vardır.

HTML Kodu:

<div id="container"> 

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

</div> 

CSS Kod

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 Kodu:

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

} 

Burada, çalışan bir örnekle CodePen var.

DÜZENLEME:Touch Events ile çalışmak üzere CodePen güncelleştirdim. Gördüğünüz eğer

CodePen