Анимация в Ext JS

Также как и библиотека jQuery, Ext JS представляет прекрасные возможности для создания различных анимаций элементов и компонентов.

Итак, создадим на веб-странице простой элемент <div id="blackQv"></div>, в виде черного квадрата, для чего определим для него стиль:

<style>
#blackQv{
	margin:100px;
	width: 200px;
	height:200px;
	opacity:80;
	background-color:black;
}
</style>

Чтобы применить анимацию, нам надо использовать один из методов, которые имеются в наличии у класса Ext.Element. Все они имеют ряд общих параметров:

• useDisplay. Принимает булевое значение true/false, которое показывает, будет ли элемент скрыт после завершения анимации. Например, если мы установим значение false, то элемент будет скрыт методом hide и станет невидимым. Но если мы установим true, тогда элемент не только будет скрыт, но и перестанет использовать пространство страницы.

• duration. Этот параметр принимает в качестве значения число, которое показывает в миллисекундах, сколько будет длиться анимация.

• easing. Принимает в качестве значения строку. Он указывает на эластичность анимации и принимает следующие значения: backIn, easeIn,easeOut, bounceOut, elasticeIn

Используем первую функцию анимации - puff. Эта функция в течение определенного времени растягивает элемент, при этом постепенно делая его прозрачным:

Ext.onReady(function(){
	var element = Ext.get('blackQv');
	element.puff({
		easing: 'easeIn',
		duration: 2000,
		useDisplay: false
	});
});

Другая функция анимации - switchOff - действует противоположным образом, постепенно уменьшая элемент, пока он полностью не исчезнет:

element.switchOff({
		easing: 'easeOut',
		duration: 3000,
		remove: false,
		useDisplay: false
	});

Еще две функции анимации - slideIn и slideOut производят скольжение элемента в указанном направлении. Если slideIn постепенно выдвигает элемент на страницу как бы из-за границ , то slideOut, наоборот, убирает его со страницы:

element.slideIn('t', {
	easing: 'easeIn',
	duration: 2000
});
element.slideOut('r', {
	easing: 'easeOut',
	duration: 3000,
	remove: false,
	useDisplay: false
});

Первый параметр здесь представляет направление анимации:

• t - анимация начинается сверху
• b - снизу
• r - справа
• l - слева

Функция fadeOut постепенно обесцвечивает элемент, делая его прозрачным:

element.fadeOut({
	opacity: 0,
	easing: 'easeOut',
	duration: 2000,
	remove: false,
	useDisplay: false
});

В данном случае параметр opacity задает прозрачность, который обретет в конце анимации элемент. Здесь используется число 0, то есть элемент станет полностью прозрачным. Этот параметр использует числа с плавающей точкой, то есть диапазон допустимых значений от 1 до 0. К примеру, чтобы сделать полупрозрачный элемент, надо указать число 0.5

Еще одна функция анимации - pulse задает пульсацию элемента:

element.frame("#0000b9", 5, {
	duration: 1000
});

Первый параметр задает цвет пульсирующей границы, а второй - сколько раз элемент будет пульсировать.

Анимация компонентов Ext JS

Анимация компонентов похожа на анимацию обычных элементов. Например, используем анимацию кнопки:

var button = Ext.create('Ext.Button', {
		margin:'10 0 0 30',
		text: 'Animate',
		renderTo: Ext.getBody(),
	});
	button.getEl().puff({
		easing: 'bounceOut',
		duration: 2000,
		useDisplay: false
	});

Чтобы анимировать компонент, нам надо получить доступ к его элементу через метод getEl. Затем идет уже вышерассмотренное применение функций анимации с теми же параметрами.

Создание своей анимации

С помощью класса Ext.fx.Animator можно создавать пользовательские анимации. Создадим, например, анимацию прыгающего шара. Для начала определим элемент <div id="jump"></div> и его стили:

<style>
#jump{
	y: 100px;
	x: 100px;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background-color: red;
	position: absolute;
}
</style>

Теперь определим код анимации нашего шара:

	Ext.create('Ext.fx.Animator', {
        target: 'jump',
        duration: 4000,
        keyframes: {
            0: {
                y: 100
            },
            20: {
                y: 250,
				backgroundColor: 'yellow'
            },
            40: {
                y: 155,
				x:110,
                backgroundColor: '#0000FF'
            },
            60: {
                y: 250,
				x:120
            },
            80: {
                y: 225,
				x:170,
                backgroundColor: 'red'
            },
            100: {
                y: 250,
				x:180
            }
        }
    });

Объект Ext.fx.Animator принимает ряд параметров, где target указывает на ID анимируемого элемента, а duration - на время анимации в миллисекундах.

Третий параметр - keyframes задает ключевые кадры анимации. Здесь мы определяем ряд переходных состояний, в которых будет находится шар. Разберем первый ключевой кадр:

0: {
		y: 100
	},

Число 0 указывает, что после 0 % времени анимации, определенной в параметре duration, элемент будет принимать характеристики, заключенные в анонимном объекте, то есть его координата у=100 пикселям.

На третьем кадре, который выполняется после 40% времени анимации, меняем значение координаты x, y и цвет элемента

40: {
		y: 155,
		x:110,
        backgroundColor: '#0000FF'
	},

Также мы можем задать дополнительные параметры анимации:

• easing - рассмотренный выше параметр, задающий эластичность анимации

• iterations - задает количество циклов анимации

• события beforeanimate/afteranimate - представляют функции обработчиков, которые будут срабатывать перед началом анимации и после ее завершения

• keyframe - задает обработчик события keyframe, которое возникает между двумя ключевыми кадрами