Анимация всегда была горячим фаворитом среди студентов, обучающихся программированию. Во время недавнего семинара по веб-разработке, который я посетил, была дискуссия об анимации с использованием CSS. Именно тогда я наткнулся на AniJS , декларативную библиотеку обработки CSS-анимации.
В этом уроке мы увидим, что такое AniJS и как его использовать для создания интересных анимационных эффектов.
Введение в AniJS
Используя AniJS, мы можем писать анимации, используя декларативные команды прямо в нашем HTML. Он обеспечивает более простой способ управления анимацией с помощью объявлений, выражающих логику. Ниже приведен пример декларативного синтаксиса AniJS:
<input id="txtName" type="text" data-anijs="if: focus, do: wobble, to: a"> В вышеприведенном коде декларативный синтаксис говорит, что если он сфокусирован, то выполните колебание с элементом тега привязки.
Начиная
В ходе этого урока мы будем создавать приложение с анимацией, используя AniJS. Это приложение будет простым приложением для регистрации пользователей и входа в систему, которое будет включать некоторые анимации с использованием AniJS. Основное внимание в этом руководстве уделяется тому, как заставить анимацию работать в наших веб-приложениях с использованием AniJS.
Чтобы начать, загрузите AniJS и включите его в свою страницу, или обратитесь к версии CDN .
<script src="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"></script>
Для стилизации мы будем использовать библиотеку animate.css от Dan Eden.
<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css">
Создание экрана входа
Сначала мы создадим экран для входа пользователя. Вот HTML:
<div class="container"> <div id="divLogin" class="login_screen"> <h2 id="spnLogin">Sign In</h2> <input id="txtLoginId" type="text" placeholder="Email Id" /> <input id="txtLoginPass" type="password" placeholder="Password" /> <a href="#" class="btn"> SignIn </a> <a href="#" class="signup-link">Register?</a> </div><!-- .login-screen --> </div><!-- .container -->
Пока что у нас есть просто статическая страница входа. С некоторыми CSS это выглядит так:
Мы создали наш экран, теперь нам нужно проверить процесс входа в систему. Чтобы прикрепить анимированный эффект, мы используем атрибут data-anijs для конкретного элемента. Мы пишем наши декларативные операторы, используя атрибуты данных HTML5 , используя собственный атрибут data-anijs . Давайте добавим этот атрибут к кнопке входа, как показано ниже:
<a href="#" class="btn" data-anijs="if: click, do: hinge animated, to: .login_screen"> SignIn </a>
В приведенном выше коде декларативное предложение гласит: когда нажата кнопка входа, выполните анимацию hinge для элемента с классом .login_screen . Поэтому, когда мы нажимаем кнопку, анимация hinge вступает в силу, как вы можете увидеть, нажав кнопку «Войти» в демонстрационной версии ниже:
В приведенной выше демонстрации анимация работает при нажатии кнопки независимо от того, есть ли действительный или недействительный вход в систему. Это не совсем то, что мы хотим, поэтому давайте изменим существующий код для анимации только при неверном входе.
Для проверки правильности входа необходимо вызвать функцию проверки перед анимацией. Для этого мы будем использовать ключевое слово before . Подробную документацию, связанную с вызовом функции до и после анимации, можно найти в документации AniJS . Мы будем передавать объект события для запуска анимации, а также animationContext .
Сначала мы определим помощника AniJS, а затем объявим функцию анимации before . Вот как выглядит функция:
var animationHelper = AniJS.getHelper(), spnLogin = document.getElementById('spnLogin'); animationHelper.validateLogin = function (e, animationContext) { var email = document.getElementById('txtLoginId').value; var pass = document.getElementById('txtLoginPass').value; if (email && pass) { spnLogin.innerHTML = 'Processing...'; } else { spnLogin.innerHTML = 'Fill Required fields.'; animationContext.run(); } }
Мы также изменим атрибут данных кнопки «Вход», чтобы включить функцию «до анимации», как показано ниже:
<a href="#" class="btn" data-anijs="if: click, do: hinge animated, to: .login_screen, before: validateLogin"> SignIn </a>
Теперь анимация будет происходить только в том случае, если поле электронной почты или пароль пустое. Анимация запускается с использованием команды animationContext.run() в блоке кода JavaScript выше. Если введены как электронная почта, так и пароль, то появится сообщение «Обрабатывается…».
Вот демонстрация того, что мы имеем до сих пор:
Создание экрана регистрации
Далее мы создадим страницу регистрации (или регистрации) для нашего приложения. Как видите, у нас уже есть ссылка «Регистрация» на странице входа. Что мы будем делать, так это прикреплять анимацию и события к ссылке «Регистрация». Сначала добавьте следующий HTML-код для страницы регистрации в наш существующий html:
<div id="divReg" class="reg_screen" style="display: none"> <h2 id="spnLogin">Register</h2> <input id="txtName" type="text" placeholder="Name" /> <input id="txtEmail" type="text" placeholder="Email Id" /> <input id="txtPassword" type="password" placeholder="Password" /> <h2 id="spnStatus"></h2> <a href="#" class="btn"> SignUp </a> <a href="#" class="signup-link">Login?</a> </div><!-- .reg_screen -->
Обратите внимание на встроенный CSS с display: none в элементе .reg_screen , что делает этот экран скрытым по умолчанию. Чтобы подключить ссылку «Регистрация» на экране входа в систему к этому новому экрану, мы добавим к data-anijs атрибут data-anijs :
<a href="#" class="signup-link" data-anijs="if: click, do: rollIn animated, to: .reg_screen"> Register? </a>
Приведенный выше код говорит, что при нажатии на rollIn анимацию rollIn для элемента, который имеет класс reg_screen (который является нашим экраном регистрации). Но это не сработает, поскольку экран регистрации скрыт.
Что нам нужно сделать, это вызвать функцию до появления анимации. В этой функции мы скрываем экран входа, делая видимым экран регистрации. Затем мы запускаем анимацию. Вот JavaScript:
animationHelper.showReg = function (e, animationContext) { document.getElementById('divLogin').style.display = 'none'; document.getElementById('divReg').style.display = 'block'; animationContext.run(); }
Затем мы data-anijs атрибут data-anijs ссылки Register:
<a href="#" class="signup-link" data-anijs="if: click, do: rollIn animated, to: .reg_screen,before: showReg"> Register? </a>
Вот демонстрация с нашим недавно добавленным кодом:
Теперь, когда экран «Регистрация» можно сделать видимым, нам также необходимо подключить ссылку «Вход» на экране «Регистрация» к исходному экрану входа, аналогично тому, что мы только что сделали для экрана «Регистрация». Вот функция:
animationHelper.showLogin = function (e, animationContext) { document.getElementById('divReg').style.display = 'none'; document.getElementById('divLogin').style.display = 'block'; animationContext.run(); }
А вот модифицированный атрибут data-anijs для ссылки Login:
<a href="#" class="signup-link" data-anijs="if: click, do: rollIn animated, to: .login_screen, before: showLogin"> Login? </a>
А вот демоверсия с новым кодом:
Примечание редактора: показанные ниже демонстрации не работают на 100% корректно в этих встраиваниях, в частности, когда вы пытаетесь переключаться между «Вход» и «Регистрация» несколько раз. Попробуйте ссылку «Редактировать» в кадре CodePen, чтобы просмотреть полную демонстрацию, где она должна работать нормально.
Подобно тому, что мы сделали на экране входа в систему, мы проверим форму регистрации с помощью функции:
animationHelper.validate = function (e, animationContext) { var name = document.getElementById('txtName').value; var regEmail = document.getElementById('txtEmail').value; var regPass = document.getElementById('txtPassword').value; if (name && regEmail && regPass) { document.getElementById('spnStatus').innerHTML = 'Processing...'; setTimeout(function () { document.getElementById('spnStatus').innerHTML = ''; }, 2000); } else { document.getElementById('spnStatus').innerHTML = 'Fill required fields'; animationContext.run(); } }
Обычно мы кэшируем многие из этих объектов в переменных, а не повторяем ссылки на них. Мы делаем это таким образом только для этого простого примера.
И наконец, давайте data-anijs атрибут data-anijs в нашем HTML, чтобы включить анимацию и вызов функции.
<a href="#" class="btn" data-anijs="if: click, do: pulse animated, to: .reg_screen, before: validate"> SignUp </a>
И вот наша последняя демонстрация:
Вывод
В этом уроке мы обсудили лишь пробную часть этой удивительной библиотеки. Подробная информация о его использовании доступна в документации AniJS .