在requestAnimationFrame上添加缓动 [英] Adding easing on requestAnimationFrame
问题描述
我需要重现与此处相同的效果: http:// www。 chanel.com/fr_FR/mode/haute-couture.html =对鼠标移动事件的滑动效果。
I need to reproduce the same effect as here: http://www.chanel.com/fr_FR/mode/haute-couture.html = a swipe effect on mouse move event.
我只需要一些关于动画部分的帮助。
I just need some help on the animation part.
function frame() {
$('.images-gallery').css({
'transform': 'translateX('+ -mouseXPerc +'%)'
});
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
$(document).on('mousemove',function(e){
mouseXPerc = e.pageX/containerWidth*100;
});
这是我到目前为止所做的。 它按预期工作,但你可以想象,它非常原始,我需要一些缓解。如何编辑我的 frame()函数
以使其更顺畅?
Here's what I've done so far. It works as supposed, but as you can imagine, it's pretty raw, I need some easing in that. How can I edit my frame() function
to get something smoother ?
编辑:我无法使用CSS转换/动画,因为我在requestAnimationFrame上更改了值(每1/30秒)。
Edit : I can't use CSS transition / animation as I change the value on requestAnimationFrame (each 1/30 sec).
推荐答案
我想我找到了答案。它基于此库
I think I've found an answer for you. It's based on this library
首先,我只会从该网站获取一个函数
First, I would just grab a function from that site
function inOutQuad(n){
n *= 2;
if (n < 1) return 0.5 * n * n;
return - 0.5 * (--n * (n - 2) - 1);
};
然后,我会使用示例代码的修改形式,类似这样
Then, I would use a modified form of the example code, something like this
function startAnimation(domEl){
var stop = false;
// animating x (margin-left) from 20 to 300, for example
var startx = 20;
var destx = 300;
var duration = 1000;
var start = null;
var end = null;
function startAnim(timeStamp) {
start = timeStamp;
end = start + duration;
draw(timeStamp);
}
function draw(now) {
if (stop) return;
if (now - start >= duration) stop = true;
var p = (now - start) / duration;
val = inOutQuad(p);
var x = startx + (destx - startx) * val;
$(domEl).css('margin-left', `${x}px`);
requestAnimationFrame(draw);
}
requestAnimationFrame(startAnim);
}
我可能会改变计算停止的方式,我可能会写一些东西以确保它以 destx
等结束,但这是基本格式
I might change how 'stop' is calculated, I might write something to ensure that it ends on destx
, etc, but that's the basic format
我真的很自豪这个。我一直想要解决这个问题。很高兴我有理由。
I'm actually kinda proud of this one. I've been wanting to figure this out for a while. Glad I had a reason to.
这篇关于在requestAnimationFrame上添加缓动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!