transition в canvas

#javascript #анимация #canvas #animate

Можно ли элементу в canvas добавить transition во время анимации? 






    
    
    
    



    
    
Время загрузки 0.1
сек







    

Ответы

Ответ 1

CSS transition никак не применить к элементам на канве.



Для получения плавной анимации в общем случае необходимо получать значения в зависимости
от времени а не прибавлять каждый кадр фиксированные значения:

Я изменил в Вашем примере одну функцию:

let delay = 2; // задержка перед анимацией
let duration = 3; // кол во секунд анимации роста значения
let time = new Date().getTime(); // Время начала анимации

let Engine = () => {
    // кол-во секунд с начала анимации
    let t = (new Date().getTime() - time) / 1000;
    val(+getValueFromTime(t).toFixed(1));
    requestAnimFrame(Engine);
};

// получить значение спидометра в зависимости от текущего времени
function getValueFromTime(t) {

    if (t < delay) // если еще не прошло время задержки
       return 0 // вернем 0

    t -= delay; // иначе вычитаем время задержки

    if (t < 0.95*duration) { // если прошло меньше 95 % времени анимации
        // переводим значение времени в значение при помощи функции сглаживания 
        // EasingFunctions.easeOutCubic (значение на входе должно быть от 0 до 1)
        return 98 * EasingFunctions.easeOutCubic(t/duration);
     }

     // иначе это функция от синуса от этого значения
     return 98 + Math.sin(t * 55);
}


Функции сглаживания взяты отсюда, больше функций сглаживания тут




    
    
Время загрузки 0.1
сек