Нашли ошибку или опечатку? Выделите текст и нажмите

Поменять цветовую

гамму сайта?

Поменять
Обновления сайта
и новые разделы

Рекомендовать в Google +1

Режимы плавности

66

Прежде чем рассматривать различные функции плавности, важно понять, когда применяется функция плавности. Каждый класс функции плавности наследуется от EasingFunctionBase и получает от него единственное свойство по имени EasingMode (режим плавности). Это свойство может иметь одно из трех разных значений: EaseIn (применение эффекта в начале анимации), EaseOut (применение эффекта в конце анимации) и EaseInOut (применение эффекта в начале и конце анимации).

В предыдущем примере анимация использует режим EaseOut, т.е. последовательность затухающих колебаний появляется в конце анимации. Если отобразить на графике изменение ширины кнопки в процессе анимации, то получится нечто вроде показанного на рисунке:

Режим EaseOut

В случае применения функции плавности длительность анимации не изменяется. В случае анимации из примера из предыдущей статьи функция ElasticEase не просто изменяет способ завершения анимации — она также заставляет начальную часть анимации (когда кнопка растет нормально) выполняться быстрее, чтобы больше времени осталось на колебания в конце.

Если переключить функцию ElasticEase на режим EaseIn, колебания сместятся к началу анимации. Кнопка сократится чуть меньше своего начального размера, потом увеличится чуть больше, опять чуть меньше уменьшится, и продолжит этот цикл, постепенно увеличивая амплитуду, пока не увеличится до конечного размера. (Для управления количеством колебаний служит свойство ElasticEase.Oscillations.) На рисунке показан совершенно другой шаблон движения:

Режим EaseIn

Наконец, режим EaseInOut создает довольно странный эффект, с серией колебаний в первой половине анимации, за которой следует серия колебаний, завершающая ее:

Режим EaseOut

Классы функций плавности

В WPF доступны 11 функций плавности, и все они находятся в пространстве имен System.Windows.Media.Animation. Все они, а также их важные свойства, описаны в таблице ниже. Помните, что каждая анимация также предоставляет свойство EasingMode, которое позволяет управлять влиянием анимации — в начале (EaseIn), в конце (EaseOut) либо там и там (EaseInOut):

Имя Описание Свойства
BackEase В сочетании с EaseIn возвращает анимацию назад, прежде чем запустить ее. В сочетании с EaseOut эта функция позволяет анимации слегка "заступить" и затем возвращает ее назад Свойство Amplitude определяет степень "отступа" или "заступа". Значение по умолчанию равно 1, и его можно уменьшить (до любого значения больше 0), чтобы сократить или усилить эффект
ElasticEase В сочетании с EaseOut заставляет анимацию выполнять затухающие колебания от максимума к минимуму и обратно. В случае применения с EaseIn колебания происходят вокруг начального значения, постепенно усиливаясь Свойство Oscillations управляет количеством колебаний анимации (по умолчанию равно 3), a Springiness — ускорением или замедлением колебаний (по умолчанию равно 3).
BounceEase Дает эффект, подобный ElasticEase, но с тем отличием, что амплитуда колебаний никогда не выходит за пределы начального или конечного значения Свойство Bounces управляет количеством раскачиваний анимации туда и обратно (по умолчанию равно 2), a Bounciness определяет, насколько быстро они растут или затухают (по умолчанию равно 2)
CircleEase Ускоряет (с помощью EaseIn) или за-медляет (с помощью EaseOut) анимацию, используя циклическую функцию Нет
CubicEase Ускоряет (с помощью EaseIn) или замедляет (с помощью EaseOut) анимацию, используя функцию на основе куба времени. Эффект подобен CircleEase, но ускорение более плавное Нет
QuadraticEase Ускоряет (с помощью EaseIn) или замедляет (с помощью EaseOut) анимацию, используя функцию на основе квадрата времени. Эффект подобен CubicEase, но ускорение более плавное Нет
QuarticEase Ускоряет (с помощью EaseIn) или замедляет (с помощью EaseOut) анимацию, используя функцию на основе времени в четвертой степени. Эффект подобен CubicEase и QuadraticEase, но ускорение более выраженное Нет
QuinticEase Ускоряет (с помощью EaseIn) или замедляет (с помощью EaseOut) анимацию, используя функцию на основе времени в четвертой степени. Эффект подобен CubicEase, QuadraticEase и QuarcticEase, но ускорение более выраженное Нет
SineEase Ускоряет (с помощью EaseIn) или замедляет (с помощью EaseOut) анимацию, используя функцию, включающую вычисление синуса. Ускорение очень плавное и ближе к линейной интерполяции, чем любые другие функции плавности Нет
PowerEase Ускоряет (с помощью EaseIn) или замедляет (с помощью EaseOut) анимацию, используя функцию возведения в степень. В зависимости от значения экспоненты, можно дублировать эффект от функций CubicEase, QuadraticEase, QuarticEase и QuinticEase Свойство Power устанавливает значение экспоненты в формуле. Используйте значение 2 для QuadraticEase, 3 - для CubicEase, 4 — для QuarticEase, 5 — для QuinticEase или что-то другое. По умолчанию применяется 2
ExponentialEase Ускоряет (с помощью EaseIn) или замедляет (с помощью EaseOut) анимацию, используя экспоненциальную функцию f(t) = (e(at) - 1)/(e(a) - 1) Свойство Exponent позволяет установить значение экспоненты (по умолчанию равно 2)

Многие из функций плавности дают похожие, но тонко отличающиеся результаты. Для успешного использования плавности анимации необходимо правильно выбрать функцию плавности и корректно ее сконфигурировать. Часто этот процесс требует применения метода проб и ошибок. И здесь могут помочь два хороших ресурса.

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

Эффект от различных функций плавности

Во-вторых, Microsoft предлагает несколько примеров приложений, с которыми можно поэкспериментировать, используя различные функции плавности и разные значения свойств.

Пройди тесты