В интернете действительно тысячи способов анимации. Мы рассмотрели сравнение различных технологий анимации здесь ранее. Сегодня мы собираемся погрузиться в пошаговое руководство по одному из моих любимых способов сделать это: использовать GreenSock.
Почему я предпочитаю Greensock другим методам? Технически говоря, это часто лучший инструмент для работы. Его использование чрезвычайно просто, даже для сложных движений. Вот еще несколько причин, почему я предпочитаю использовать это:
Люди иногда спрашивают меня, почему я использую эту конкретную библиотеку над всеми другими вариантами. Это дальше, чем у большинства других — они были вокруг, так как Flash все еще существовал. Этот демонстрационный ролик очень вдохновляет, и в нем также рассказывается, что серьезные веб-аниматоры стремятся достичь этого инструмента:
Далее следует описание того, как создать движение в Интернете, до мелочей. единицы я мог бы сделать их. Давайте начнем!
это стиль со значением border-radius 50%. Вот как мы могли бы масштабировать и перемещать его с помощью Greensock:
gsap.to ('. Ball', {
продолжительность: 1,
х: 200,
масштаб: 2
})
См. Pen
Учебное пособие по Гринсоку 1 от Сары Драснер (@sdras)
на CodePen.
В этом случае мы говорим GreenSock ( gsap ) взять элемент с классом .ball переместить его .to () a несколько разных свойств. Мы сократили свойства CSS преобразования : translateX (200px) до упрощенного x: 200 (обратите внимание, что в единицах измерения нет необходимости, но вы можете передать их в виде строки) , Мы также не пишем transform: scale (2) . Вот ссылка на преобразования, которые вы можете использовать с анимацией, и соответствующий им синтаксис CSS:
x: 100 // transform: translateX (100px)
y: 100 // transform: translateY (100px)
z: 100 // transform: translateZ (100px)
// вам не нужен взлом нулевого преобразования или аппаратное ускорение, он запекается с
// force3d: true. Если вы хотите сбросить это, force3d: false
scale: 2 // transform: scale (2)
scaleX: 2 // transform: scaleX (2)
scaleY: 2 // преобразование: scaleY (2)
scaleZ: 2 // преобразование: scaleZ (2)
skew: 15 // transform: skew (15deg)
skewX: 15 // преобразование: skewX (15 градусов)
skewY: 15 // transform: skewY (15deg)
вращение: 180 // преобразование: вращение (180 градусов)
вращение X: 180 // преобразование: вращение X (180 градусов)
вращение Y: 180 // преобразование: вращение Y (180 градусов)
вращение Z: 180 // преобразование: вращение Z (180 градусов)
перспектива: 1000 // преобразование: перспектива (1000 пикселей)
transformOrigin: '50% 50% '// transform-origin: 50% 50%
Длительность - это то, что вы можете себе представить: это отрезок времени в одну секунду.
Итак, хорошо, как бы мы анимировали, скажем, SVG? Давайте рассмотрим тот же код выше, что и SVG:
gsap.to ('. Ball', {
продолжительность: 1,
х: 200,
масштаб: 2
})
См. Pen
Учебное пособие по Гринсоку 2 Сара Драснер (@sdras)
на CodePen.
С точки зрения анимации, это фактически точно такой же . Он захватывает элемент с классом .ball и переводит эти свойства. Поскольку SVG буквально являются элементами DOM, мы можем шлепнуть класс по любому из них и анимировать их точно так же!
Отлично! Мы готовим на газе.
Содержание статьи
Облегчает
Ранее я упоминал, что удобство - одна из моих любимых функций, давайте посмотрим, как мы их используем.
Давайте возьмем оригинальный мяч. Может быть, мы хотим попробовать одно из этих более уникальных облегчений отказов. Было бы так:
gsap.to ('. Ball', {
продолжительность: 1,5,
х: 200,
масштаб: 2,
легкость: отказов
})
См. Pen
Учебное пособие по Гринсоку 3 от Сары Драснер (@sdras)
на CodePen.
Вот и все! Эта версия GreenSock предполагает, что вы хотите использовать замедление (что лучше для входов), поэтому оно применяет это по умолчанию. Все, что вам нужно сделать, это указать «bounce» в виде строки, и вы отправитесь в гонки.
Вы могли заметить, что мы также немного удлинили продолжительность. Это потому, что шар должен делать больше «работы» между начальным и конечным состояниями. Длительность в одну секунду, хотя и хороша для линейного или синусоидального ослабления, слишком мала для скачка или упругого облегчения.
Задержки и сроки
Я упомянул, что функция синхронизации по умолчанию замедления хороша для входов. А как насчет легкого входа или легкого выхода? Давайте сделаем это тоже.
gsap.to ('. Ball', {
продолжительность: 1,5,
х: 200,
масштаб: 2,
легкость: отказов
})
gsap.to ('. ball', {
продолжительность: 1,5,
задержка: 1,5,
х: 0,
масштаб: 1,
easy: 'back.inOut (3)'
})
Возможно, вы заметили, что произошло несколько вещей. Например, мы не использовали bounce.in во второй строке ( ease: 'back.inOut (3)' ). Вместо этого мы использовали другую легкость, называемую back для easy-in-out . Мы также передали опцию конфигурации, потому что, как вы можете видеть с помощью средства визуализации облегчения Greensock, мы не ограничены только конфигурацией по умолчанию для этой простоты. Мы можем приспособить его к нашим потребностям. Ухоженная!
Возможно, вы также заметили, что мы создали анимацию с задержкой. Мы взяли длительность первой анимации и убедились, что следующая анимация соответствует задержке. Теперь это работает здесь, но это довольно хрупко. Что если мы хотим изменить длину первого? Что ж, теперь мы должны вернуться и изменить следующую задержку. А что если после этого у нас будет другая анимация? И еще один после этого? Что ж, нам нужно вернуться назад и рассчитать все остальные задержки по линии. Это много ручной работы.
Мы можем переложить эту работу на компьютер. Некоторые из моих более сложных анимаций - это сотни связанных анимаций! Если я заканчиваю свою работу и хочу что-то скорректировать в начале, я не хочу возвращаться ко всему. Введите сроки:
gsap
.график()
.to (ball. ball ’, {
продолжительность: 1,5,
х: 200,
масштаб: 2,
легкость: «отскок»
})
.to (ball. ball ’, {
продолжительность: 1,5,
х: 0,
масштаб: 1,
easy: "back.inOut (3)"
});
См. Pen
Учебное пособие по Гринсоку 4 от Sarah Drasner (@sdras)
на CodePen.
Это создает временную шкалу, а затем объединяет две анимации.
Но у нас все еще есть немного повторения, где мы продолжаем использовать одну и ту же продолжительность в каждой анимации. Давайте создадим для этого значение по умолчанию, которое будет передано на временную шкалу.
gsap
.график({
по умолчанию: {
продолжительность: 1,5
}
})
.to ('. ball', {
х: 200,
масштаб: 2,
легкость: «отскок»
})
.to ('. ball', {
х: 0,
масштаб: 1,
easy: "back.inOut (3)"
});
См. Pen
Учебное пособие по Гринсоку 4 от Sarah Drasner (@sdras)
на CodePen.
Это круто! Хорошо, вы, вероятно, начинаете понимать, как все устроено таким образом. Несмотря на то, что в анимации это может быть не так уж и сложно, значения по умолчанию и временные шкалы в действительно сложных анимациях действительно могут поддерживать код поддерживаемым.
Теперь, что если мы хотим отразить это движение в другом направлении с мячом и просто ... продолжать движение? Другими словами, что если мы хотим петлю? Вот когда мы добавляем повтор: -1 который может быть применен либо к одной анимации, либо ко всей временной шкале.
gsap
.график({
повторить: -1,
по умолчанию: {
продолжительность: 1,5
}
})
.to ('. ball', {
х: 200,
масштаб: 2,
легкость: «отскок»
})
.to ('. ball', {
х: 0,
масштаб: 1,
easy: "back.inOut (3)"
})
.to ('. ball', {
х: -200,
масштаб: 2,
легкость: «отскок»
})
.to ('. ball', {
х: 0,
масштаб: 1,
easy: "back.inOut (3)"
});
См. Pen
Учебное пособие по Гринсоку 5 от Сары Драснер (@sdras)
на CodePen.
Мы могли бы не только заставить его повторяться, но и повторять и воспроизводить и вперед, как йойо. Вот почему мы называем это йойо: правда. Чтобы прояснить суть, мы покажем это только с первой анимацией. Вы можете видеть, что он играет вперед, а затем - наоборот.
gsap
.график({
повторить: -1,
йойо: правда,
по умолчанию: {
продолжительность: 1,5
}
})
.to ('. ball', {
х: 200,
масштаб: 2,
легкость: «отскок»
})
См. Pen
Гринсок Учебное пособие 6 Сары Драснер (@sdras)
на CodePen.
Перекрытия и метки
Здорово, что мы можем с легкостью объединять анимацию в цепочку, но реальные движения не совсем так работают. Если вы идете по комнате, чтобы взять чашку воды, вы не ходите. Тогда остановись. Тогда поднимите воду. Тогда выпей это. У вас больше шансов сделать все одним движением. Итак, давайте вкратце поговорим о том, как перекрывать движение и сразу зажигать.
Если мы хотим быть уверенными в том, что все происходит немного раньше и позже друг друга на временной шкале, мы можем использовать инкремент или уменьшитель. Если мы возьмем следующий пример, на котором изображены три шара, которые анимируются один за другим, он будет немного напряжен.
gsap
.график({
по умолчанию: {
продолжительность: 1,5
}
})
.to ('. ball', {
х: 300,
масштаб: 2,
легкость: «отскок»
})
.to ('. ball2', {
х: 300,
масштаб: 2,
легкость: «отскок»
})
.to ('. ball3', {
х: 300,
масштаб: 2,
легкость: «отскок»
})
См. Pen
Гринсок Учебное пособие 8 Сары Драснер (@sdras)
на CodePen.
Ситуация становится более плавной, если мы слегка перекрываем движение, используя те уменьшители, которые передаются в виде строк:
gsap
.график({
по умолчанию: {
продолжительность: 1,5
}
})
.to ('. ball', {
х: 300,
масштаб: 2,
легкость: «отскок»
})
.to ('. ball2', {
х: 300,
масштаб: 2,
легкость: «отскок»
}, '- = 1')
.to ('. ball3', {
х: 300,
масштаб: 2,
легкость: «отскок»
}, '- = 1')
См. Pen
Гринсок Учебное пособие 9 Сара Драснер (@sdras)
на CodePen.
Еще один способ, которым мы можем это сделать, - использовать то, что называется меткой. Метки гарантируют, что все начинается в определенный момент времени в анимации воспроизведения. Это выглядит так: .add ('labelName')
gsap
.график({
по умолчанию: {
продолжительность: 1,5
}
})
.add ( 'запуск')
.to ('. ball', {
х: 300,
масштаб: 2,
легкость: «отскок»
}, 'Начало')
.to ('. ball2', {
х: 300,
масштаб: 2,
легкость: «отскок»
}, 'Начало')
.to ('. ball3', {
х: 300,
масштаб: 2,
легкость: «отскок»
}, 'начало')
См. Pen
Учебное пособие по Гринсоку 10 от Сары Драснер (@sdras)
на CodePen.
Мы можем даже увеличивать и уменьшать от метки. Я на самом деле много делаю в своих анимациях. Это выглядит так: 'start + = 0.25'
gsap
.график({
по умолчанию: {
продолжительность: 1,5
}
})
.add ( 'запуск')
.to ('. ball', {
х: 300,
масштаб: 2,
легкость: «отскок»
}, 'Начало')
.to ('. ball2', {
х: 300,
масштаб: 2,
легкость: «отскок»
}, 'start + = 0.25')
.to ('. ball3', {
х: 300,
масштаб: 2,
легкость: «отскок»
}, 'start + = 0.5')
Уф! Мы можем так много сделать с этим! Вот пример анимации, которая объединяет многие из этих предпосылок с небольшим взаимодействием с использованием ванильного JavaScript. Не забудьте нажать на звонок.
См. Обновление телефонного взаимодействия Pen
Сары Драснер (@sdras)
в CodePen.
Если вы ищете больше для анимации на основе фреймворка с GreenSock, вот статья, которую я написал, которая освещает это в Vue, и выступление, которое я дал, посвященное React - ему пару лет, но базовые предпосылки все еще применимы.
Но мы по-прежнему не можем охватить многое, в том числе ошеломление, изменение SVG, рисование SVG, разбрасывание объектов по экрану, перемещение объектов по пути, анимацию текста ... вы называете это! Я бы посоветовал обратиться к документации GreenSock за этими подробностями. У меня также есть курс по Frontend Masters, который охватывает все это гораздо глубже, и материалы с открытым исходным кодом на моем GitHub. У меня также есть много ручек с открытым исходным кодом, с которыми можно играть и играть.
Надеюсь, это поможет вам начать работу с анимацией в Интернете! Я не могу дождаться, чтобы увидеть, что вы делаете!
Загрузка...
