Режимы плавности
66WPF --- Графика и анимация WPF --- Режимы плавности
Прежде чем рассматривать различные функции плавности, важно понять, когда применяется функция плавности. Каждый класс функции плавности наследуется от EasingFunctionBase и получает от него единственное свойство по имени EasingMode (режим плавности). Это свойство может иметь одно из трех разных значений: EaseIn (применение эффекта в начале анимации), EaseOut (применение эффекта в конце анимации) и EaseInOut (применение эффекта в начале и конце анимации).
В предыдущем примере анимация использует режим EaseOut, т.е. последовательность затухающих колебаний появляется в конце анимации. Если отобразить на графике изменение ширины кнопки в процессе анимации, то получится нечто вроде показанного на рисунке:
В случае применения функции плавности длительность анимации не изменяется. В случае анимации из примера из предыдущей статьи функция ElasticEase не просто изменяет способ завершения анимации — она также заставляет начальную часть анимации (когда кнопка растет нормально) выполняться быстрее, чтобы больше времени осталось на колебания в конце.
Если переключить функцию ElasticEase на режим EaseIn, колебания сместятся к началу анимации. Кнопка сократится чуть меньше своего начального размера, потом увеличится чуть больше, опять чуть меньше уменьшится, и продолжит этот цикл, постепенно увеличивая амплитуду, пока не увеличится до конечного размера. (Для управления количеством колебаний служит свойство ElasticEase.Oscillations.) На рисунке показан совершенно другой шаблон движения:
Наконец, режим EaseInOut создает довольно странный эффект, с серией колебаний в первой половине анимации, за которой следует серия колебаний, завершающая ее:
Классы функций плавности
В 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 предлагает несколько примеров приложений, с которыми можно поэкспериментировать, используя различные функции плавности и разные значения свойств.
