Анимация
Встроенный анимационный JavaScript движок с функциями плавности. В отличии от других анимационных движков не требует дополнительного подключения, что хорошо для сохранения скорости загрузки страниц.Используйте CSS анимации и родной HTMLElement.animate где это возможно.
Чтобы плавно менять свойства объекта, используется переменная (p) прогресс, который всегда начинается 0 и заканчивается 1.const animation = cb.animation({
onFrame: p => {
const x = cb.map(p, NumberFrom 0, NumberTo 1)
const y = cb.map(p, NumberFrom 2, NumberTo 4)
console.log(x) // 0 0.1 0.2... 1
console.log(y) // 2 2.1 2,2... 4
},
duration: 2.5
})Опции
onFrame(p)
Callback с параметром progress от 0 (начало) до 1 (конец).duration
Продолжительность анимации в секундах.
easing
Функция плавности. Можно выбрать из готовых или
cubic-bezier.Свойства
animation.running
Текущее состояние анимации. (
true или false)Методы
animation.stop()
Остановка анимации.
Easing
Сгладить линейное движение в начале или на выходе добавив ему реалистичности:
linear() ease() 'ease-in'() 'ease-out'() 'ease-in-out'() cubicBezier(a,b,c,d) easeIn(power) easeOut(power) easeInOut(power) backIn(power) backOut(power) backInOut(power) bounceIn(power) bounceOut(power) bounceInOut(power) elasticIn(power, intensity) elasticOut(power, intensity) elasticInOut(power, intensity)cb.easing.cubicBezier(.18, .29, 0, 1)