[英]How to add an easing function to increase a variable value during animation
I am looking for some math genius to help me with this one: 我正在寻找一些数学天才来帮助我解决这个问题:
I have a quite simple keyframe js animation: 我有一个非常简单的关键帧js动画:
var i = 0;
var o = 0; // opacity
var y_frames = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H"];
function draw_y() {
requestAnimationFrame( draw_y );
// drawing
if ( i < y_frames.length ) {
$y .text( y_frames[i] )
.css( { opacity: o } );
i++;
o += 0.03;
} else {
// code to be executed when animation finishes
}
};
draw_y();
In addition to stepping the keyframes I add some opacity until it reaches the value 1. This works very well and very smooth. 除了步进关键帧外,我还添加了一些不透明度,直到达到值1。这非常好并且非常流畅。 So far so good.
到现在为止还挺好。 What I would like to add is some easeOutSine to the increment of the opacity value.
我想在不透明度值的增量上添加一些easeOutSine。 I know that this is possible by using this function:
我知道使用此功能是可能的:
function easeOutSine(t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
}
but I need some help how to combine the two. 但我需要一些如何将两者结合的帮助。 How can I do this?
我怎样才能做到这一点? Anyone who did this before me?
有人在我之前这样做吗? Thanks a lot!
非常感谢!
Garavani 加拉瓦尼
This is how you combine both functions 这是您结合两种功能的方式
var i = 0;
var o = 0; // opacity
var y_frames = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H",];
function draw_y() {
// drawing
if ( i < y_frames.length ) {
o = easeOutSine( i , 0 , 1, y_frames.length);
$y .text( y_frames[i] )
.css( { opacity: o } );
i++;
window.requestAnimationFrame( draw_y );
} else {
// code to be executed when animation finishes
}
};
function easeOutSine(t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
}
window.requestAnimationFrame( draw_y );
Note: Always call the requestAnimationFrame
inside the condition or it will keep running infinitely. 注意:请始终在条件内调用
requestAnimationFrame
,否则它将无限运行。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.