如何添加缓动函数以在动画期间增加变量值

Question

我正在寻找一些数学天才来帮助我解决这个问题：

我有一个很简单的关键帧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();

除了步进关键帧外，我还添加了一些不透明度，直到它达到值 1。这非常有效且非常流畅。到目前为止，一切都很好。我想添加一些 easeOutSine 到不透明度值的增量。我知道这可以通过使用这个函数来实现：

function easeOutSine(t, b, c, d) {
    return c * Math.sin(t/d * (Math.PI/2)) + b;
}

但我需要一些帮助如何将两者结合起来。我怎样才能做到这一点？在我之前有人做过这个吗？非常感谢！

加拉瓦尼

Answer 1

这就是结合这两个功能的方式

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

注意：始终在条件中调用 requestAnimationFrame 否则它将无限保持运行。

如何添加缓动函数以在动画期间增加变量值

How to add an easing function to increase a variable value during animation

javascript

jquery

animation

easing-functions