Документация для разработчиков

Анимационные функции

EaseIn-функции

Стандартно BX.easing поддерживает 9 видов функций (линейная, квадратная, кубическая и др.), которые позволяют делать различного вида плавные анимации:

  • BX.easing.transitions.linear
  • BX.easing.transitions.quad
  • BX.easing.transitions.cubic
  • BX.easing.transitions.quart
  • BX.easing.transitions.quint
  • BX.easing.transitions.bounce
  • BX.easing.transitions.elastic
  • BX.easing.transitions.back
  • BX.easing.transitions.circ

Наглядно посмотреть как работает анимация этих функций можно здесь.

EaseOut и EaseInOut-фунции

Следующие два статических метода переобразуют easeIn-функцию в easeOut-функцию и easeInOut-функцию соответственно. Таким образом BX.easing стандартно поддерживает 27 видов анимаций.

BX.easing.makeEaseInOut(easingFunction)
BX.easing.makeEaseOut(easingFunction)

Можно определить и свою собственную функцию:

(new BX.easing({
	duration : 1200,
	start:{opacity: 0},
	finish:{opacity: 100},
	transition: function(progress) {
		return Math.abs(Math.sin(3 * Math.PI * progress / 2));
	},
	step : function(state){
		node.style.background = 'rgba(242,245,220,'+(state.opacity/100)+')'
	},
	complete: function()
	{
		node.style.background = '#f2f5dc';
	}
})).animate();

Здесь progress и возвращаемое значение функции - это состояние анимации от 0 до 1.



Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2019, «1С-Битрикс», 2019
Наверх