function animate({timing, draw, duration}) {
let start = performance.now();
requestAnimationFrame(function animate(time) {
// timeFraction goes from 0 to 1
let timeFraction = (time - start) / duration;
if (timeFraction > 1) timeFraction = 1;
// calculate the current animation state
let progress = timing(timeFraction)
draw(progress); // draw it
if (timeFraction < 1) {
requestAnimationFrame(animate);
}
});
}
用法示例:
animate({
duration: 1000,
timing(timeFraction) { // here you can put other functions
return timeFraction;
},
draw(progress) {
elem.style.width = progress * 100 + '%';
}
});
其他功能:
function quad(timeFraction) {
return Math.pow(timeFraction, 2)
}
6条答案
按热度按时间6ss1mwsb1#
就我个人而言,我更愿意使用一个在[0;1]并输出[0;1],因此我们可以将结果应用于任何类型(2D向量,3D向量,...)。
溶液1
对于二次缓入/缓出,曲线根据
t
的值分为两个不同的函数:t
〈= 0.5时:f(x) = 2 * x * x
其中x在[0;0.5](graph)t
〉0.5时:f(x) = 2 * x * (1 - x) + 0.5
其中x在[0;0.5](x一e1一f1 x)以下是图表:
由于第二个函数也在[0;0.5],但是
t
〉0.5,当我们开始使用它时,我们需要将t
减少0.5。这是C中的结果:
方案二(贝塞尔曲线)
另一个有趣的混合曲线是由Bézier给出的,它的优点是非常优化(没有if)。下面是来自Wolfram的曲线:
下面是C代码:
方案三(参数函数)
@DannyYaroslavski提出的另一种方法是这里提出的简单公式。
它是参数化的,并得到一个很好的进/出加速和减速。
当alpha = 2时,你得到这个函数:
在C中的翻译如下:
c3frrgcw2#
二次缓出,其中:
t =当前时间
B =起始值
c =价值变化
d =持续时间
来源:http://gizma.com/easing/
2uluyalo3#
所有上述解决方案都缺乏使用示例。
找到良好的解决方案here:
用法示例:
其他功能:
更多here
huwehgph4#
我也有同样的问题:我想动画我的图表
(Ease in-out)
。Brainstorm给了我两种方法:
1)三角公式,首先写
y=(sin(x/π*10-π/2)+1)/2
,模拟为sin^2((5*x)/π)
2)两个抛物线,不难,我就用
y=2*x*x
对[0;0.5]
,y=-2(x-1)^2+1
对[0.5;1]
对
x=[0;1]
使用这种方法,也返回y=[0;1]
。现在,您可以比较这些图表:
gdx19jrr5#
这里是一个版本的曲率作为一个参数的数额,以下这个一般的解决方案链接到克里克。
iecba09b6#
此版本允许您使用任何缓入和缓出函数(EaseIn和EaseOut)。这两个函数都必须接受介于0和1之间的时间值参数,并返回介于0和1之间的缓入时间值。