Как добавить функцию замедления для увеличения значения переменной во время анимации

Question

Я ищу математического гения, чтобы помочь мне с этим:

У меня довольно простая анимация ключевых кадров:

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 внутри условия, или он будет продолжать работать бесконечно.