Одна из еженедельных анимаций внешнего интерфейса: команда UC Browser демонстрирует реализацию анимации.

Как человек с кодом в глазах, когда он видит классный эффект веб-страницы или приложения, его первая реакция — как это достигается. Эта серия предназначена для анализа и реализации некоторых анимационных эффектов, которые я видел.В этой статье анализируются и реализуются некоторые эффекты, которые представлены только как идея и используются только в качестве учебных материалов. Без лишних слов, эта статья является первой в серии, посвященной фронтенд-анимации.

исходный анимационный эффект

Как легкий псевдоболельщик, я часто смотрю результаты некоторых соревнований, таких как Премьер-лига (чемпион «Ливерпуля»). Друзья, которые используют UC, должны были обнаружить, что эффект UC при отображении игры все еще очень ослепителен.Анимация очень проста, но эффект действительно хорош. Схема эффекта выглядит следующим образом:

Анализ реализации

После наблюдения нетрудно найти:

• Эффект анимации симметричен влево-вправо, пока достигается одна сторона.
• Логотип команды перемещается только по оси X, но необходимо обратить внимание на место и время остановки.
• Логотип команды имеет масштаб от большего к меньшему
• Прозрачность логотипа постепенно увеличивается

Проанализировав вышеприведенные четыре пункта, вы обнаружите, что эффекта добиться несложно.

Код

Анимации реализованы с использованием покадровой анимации CSS3.animation, Учащиеся, не знакомые с использованием этого атрибута, должны подготовить уроки. Обратите внимание на совместимость написания этого свойства,Safari и Chrome нужно писать как-webkit-animation

Мы анализируем только реализацию логотипа «Манчестер Юнайтед» слева. Весь процесс от ввода логотипа до покадровой анимации мы делим на 4 части, и можно определить 4 ключевых кадра:

@-webkit-keyframes team-logo-left {}

ключевой кадр 1: логотип двоится, а ось x отклоняется от исходного положения за пределы формы.

0% {
      -webkit-transform: translate3d(-145px, 0, 0) scale(2);
      -webkit-transform-origin: center;
      -webkit-animation-timing-function: ease-out;
      opacity: .05
   }

ключевой кадр 2: логотип двоится, ось x отклоняется от начального положения к середине формы и немного останавливается, поэтому для паузы используются 50% и 60%, а функция времени регулируется кубическим безье.

50%, 60% {
            -webkit-transform: translate3d(76px, 0, 0) scale(2);
            -webkit-transform-origin: center;
            -webkit-animation-timing-function: cubic-bezier(.33, .95, .77, 1.01);
            opacity: .8
        }

KeyFrame 3.: Логотип возвращается к своему нормальному размеру, ось x немного отклоняется от исходного положения влево, а прозрачность становится полностью непрозрачной.

85% {
            -webkit-transform: translate3d(-10px, 0, 0) scale(1);
            -webkit-animation-timing-function: ease-in;
            -webkit-transform-origin: center;
            opacity: 1
        }

ключевой кадр 4: то есть от левого положения до конечного положения остановки

100% {
            -webkit-transform: translate3d(0, 0, 0) scale(1);
            -webkit-transform-origin: center;
            opacity: 1
        }

Показать результаты

Интерпретация ключевых моментов

временная функцияanimation-timing-function

• Свойства можно применять ко всей анимации и определять, как каждый цикл анимации развивается с течением времени.
• Это свойство также может воздействовать на ключевые кадры, как в этом примере, каждый ключевой кадр имеет отдельную функцию синхронизации.Время в это время на самом деле относится к временной функции между кадрами., анимация воспроизводится последовательно, функция синхронизации конечного ключевого кадра не действует.
• Значение атрибута является необязательным, естьlinear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n), а также ступенчатая функцияsteps(n,start/end), Заинтересованные студенты могут узнать больше об этом.

Реализация анимации на самом деле очень проста.Код загружен на github, вопросы приветствуются.