Приветствую вас дорогие друзья! В этом уроке я покажу, как можно реализовать анимацию на javascript без использования готовых библиотек!
В данном уроке будет затронута простая анимация – плавное изменение ширины и высоты объекта.
Также, будут представлены 2 примера (с картинкой и с блоком), которые вы сможете скачать к себе на компьютер.
Реализация
Напишем функцию, которая будет принимать 4 параметра:
- текущий элемент;
- свойство (высоту или ширину);
- новое значение свойства;
- время в секундах.
С объектом можно будет проделать следующее:
- увеличить ширину:
- уменьшить ширину;
- увеличить высоту;
- уменьшить высоту.
Код функции на javascript:
Начнем с глобальной переменной free (булевская), она необходима для того, чтобы заблокировать многократное нажатие мышью и выполнить функцию только один раз.
Изначально free равно истине (true), когда мы нажимаем на объект (исполняем функцию) мы меняем значение переменное на ложь (false).
Далее идет переменная cur_prop, в нем мы храним текущее значение ширины или высоты объекта (с помощью style берем значение и обрезаем 2 символа с конца “px”), для которого применяется анимация.
Далее необходимо вычислить время (скорость), которое будет использоваться в интервале.
Если переданное значение ширины или высоты больше текущего (то есть необходимо увеличить), то вычисляем по формуле:
время = время умножить на 1000 и разделить на ( переданное значение - текущее значение ), то есть, если нужно изменить ширину объекта, например, со 100 до 600 пикселей за 10 секунд, то после вычисления получим, что размеры буду увеличиваться со скоростью 1 пиксель каждые 20 миллисекунд: время = 10 секунд * 1000 / ( 600px - 100px ) = 20 (миллисекунд) если необходимо уменьшать, то применяем эту же формулу, но вычитаем уже из текущего значения.
Далее проверяем переменную free – если она равна истине (то есть на объект еще ни разу не нажали), то запускаем интервал setInterval, который будет выполнять функцию calc каждые 20 миллисекунд (если следовать примеру выше).
Функция calc выполняем увеличение или уменьшение объекта с помощью изменения его css правила (высоты или ширины).
Сначала проверяем, что будем делать – увеличивать или уменьшать объект, и, в зависимости от этого, будем прибавлять единицу к текущему значению, либо уменьшать на единицу.
Когда переданное и текущее свойства совпадут (например, текущая высота станет равной переданной), то изменения закончатся (закончится анимация).
Теперь давайте рассмотрим 2 простых примера, каждый из которых вы можете скачать к себе на компьютер.
Первый пример
В данном примере будет показано изменение ширины картинки с 300px до 500px за 5 секунд.
HTML код картинки:
<img style="width:300px;height:200px;" onclick="myAnimation(this,'width',500,5)" src="http://sergey-oganesyan.ru/wp-content/uploads/2017/03/img.jpg">
Посмотреть результат
Скачать
Второй пример
Во втором примере показано изменение высоты блока с 200px до 500px за 10 секунд
HTML код блока:
<div style="width:300px;height:200px;background:green" onclick="myAnimation(this,'height',500,10)"></div>
Посмотреть результат
Скачать
Данную функцию вы можете изменить, сделав ее более универсальной, либо, изменить ее под конкретное свойство, например, прозрачность.
На этом все, желаю вам удачи, пока!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.