我正在尝试将此Popmotion
示例转换为GreenSock
。
https://codepen.io/popmotion/pen/xVeWmm
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
是否有 Actor 和模拟器? 最佳答案
我从未使用过GreenSock
来制作连续的动态动画(也许有可能,我不是GreenSock
的专家)。我更喜欢离开这个库来制作特定的动画。在下一个示例中,我尝试使用自己的计算来复制您发布的Popmotion
效果,而我只是使用动画库将框返回到其原始位置。我认为它可以帮助您实现目标:
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
关于javascript - 将Popmotion示例转换为GreenSock,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35401503/