Главная » Silverlight » Смягчение анимации

0

Один из недостатков линейной анимации состоит в том, что она часто выглядит механически, неестественно. В профессиональных пользовательских интерфейсах анимационные эффекты имитируют естественное поведение. Например, при щелчке объект перескакивает быстро, а возвращается медленнее, создавая иллюзию естествен­ного движения. В Windows Vista при максимизации или минимизации окна сначала оно изменяется быстро, а затем медленно. Такие тонкие детали тяжело заметить, если они реализованы правильно, однако когда они не реализованы, это бросается в глаза.

Секрет улучшения анимационного эффекта и создания естественного движения состоит в настройке скорости изменения. Необходимо задать изменение скорости, уменьшая или увеличивая ее. Платформа Silverlight предоставляет несколько способов решения этой задачи.

Для большинства элементов управления можно создать анимацию на основе кадров (см. далее). Такой способ полезен, когда нужно иметь полный контроль над всеми дета­лями анимации (например, в компьютерной игре или при моделировании физических процессов). Однако данный способ довольно трудоемкий, потому что анимационная мо­дель Silverlight не предоставляет удобных средств его реализации.

Если к анимации не предъявляются жесткие требования и нужно лишь сделать так, чтобы движение выглядело естественнее, можно применить менее трудоемкий подход. Например, можно использовать анимацию на основе ключевых кадров, поделив интер­вал на несколько участков и добавив сплайны для изменения скорости на разных участках (см. далее). Этот способ работает хорошо, но для его реализации нужно написать много раз­метки XAML. Использовать его имеет смысл, когда у вас есть какой-либо инструмент разра­ботки, облегчающий создание ключевых кадров и сплайнов (например, Expression Blend).

Если у вас нет программы Expression Blend или вы не хотите усложнять разметку, можете применить встроенные в Silverlight средства смягчения анимации (animation easing). При этом анимация определяется как обычно — путем задания начального и конечного значений свойства, нужно лишь добавить математические функции, опре­деляющие скорость изменения.

Смягчающие функции

Существенное преимущество смягчения состоит в том, что его реализация — на­много менее трудоемкий процесс, чем создание анимации на основе кадров или клю­чевых кадров. Чтобы применить смягчение, нужно присвоить свойству EasingFunction объекта анимации экземпляр класса смягчающей функции, производного от EasingFunctionBase. Обычно для этого нужно всего лишь установить несколько свойств. Объем дополнительного кода XAML не большой, а код С# для этого вообще не нужен.

Рассмотрим две анимации, управляющие кнопкой. Когда пользователь наводит указатель на кнопку, код запускает анимацию growStoryboard, которая растягивает кнопку до ширины 400 пикселей. Когда пользователь убирает указатель с кнопки, она сокращается до исходных размеров.

<Storyboard х:Name="growStoryboard"> <Doub1еAn imatіon Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width" To="400" Duration="0:0:1.5"></DoubleAnimation>

</Storyboard>

<Storyboard x:Name="revertStoryboard"> <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width" Duration="0:0:3"></DoubleAnimation>

</Storyboard>

Сейчас в анимации применяется линейная интерполяция. В результате кнопка рас­тягивается и сокращается неестественно, механически. Для создания эффекта есте­ственности добавим смягчающую функцию. В приведенной ниже разметке смягчающая функция имеет имя ElasticEase. В результате ее применения кнопка осциллирует (ко­леблется): сначала торопливо растягивается, увеличившись заметно больше конечного размера, затем, как бы спохватившись, сжимается до размера немного меньше конеч­ного и так несколько раз. Кнопка как бы пытается найти нужный размер и остановить­ся на нем. После приблизительно десяти колебаний кнопка "успокаивается". Количество колебаний определяется свойством Oscillations. Класс ElasticEase предоставляет еще одно свойство, не используемое в данном примере, — Springiness. Чем оно больше, тем быстрее затухают колебания. По умолчанию оно равно 3.

<Storyboard x:Name="growStoryboard"> <DoubleAnimation Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width" To="400" Duration="0:0:1.5"> <DoubleAnimation.EasingFunction> <ElasticEase EasingMode="EaseOut"

Oscillations=" 10 "></ElasticEase> </DoubleAnimation.EasingFunction> </DoubleAnimation>

</Storyboard>

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

Примечание. Свойство EasingFunction принимает только один объект функции смягчения, поэтому объединить несколько функций в одной анимации невозможно.

Начало и конец смягчения

Каждый класс смягчающей функции наследует класс EasingFunctionBase и от него — свойство EasingMode, определяющее характер (режим) смягчения. Оно может принимать одно из трех значений: Easeln (эффект смягчения применяется к началу анимации), EaseOut (к концу анимации) и EaselnOut (и к началу, и к концу).

В предыдущем примере в анимации growStoryboard используется режим EaseOut. Следовательно, постепенно уменьшающиеся колебания происходят в конце анима­ции. На рис. 10.3 показан график зависимости ширины кнопки от времени в режиме EaseOut.

Рис. 10.3. Смягчающая функция ElasticEase в режиме EaseOut

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

Если переключить функцию ElasticEase в режим Easeln, колебания будут происхо­дить не в конце, а в начале анимации. Ширина кнопки сначала заколеблется возле на­чального значения, а затем быстро перейдет в конечное (рис. 10.4).

Рис. 10.4. Функция ElasticEase в режиме Easeln

И наконец, режим EaselnOut создает странный эффект: сначала ширина кнопки колеблется вокруг начального значения, затем быстро увеличивается, и, еще немного поколебавшись вокруг конечного значения, останавливается в нем (рис. 10.5).

Рис. 10.5. Функция ElasticEase в режиме EaselnOut

Классы смягчающих функций

Надстройка Silverlight поддерживает 11 смягчающих функций, определенных в про­странстве имен System.Windows .Media.Animation. Их описание приведено в табл. 10.1. Не забывайте, что каждая анимация предоставляет свойство EasingMode, позволяющее управлять началом и концом процесса.

Таблица 10.1. Смягчающие функции

Имя

Описание

Свойства

BackEase

В режиме Easeln сначала "тащит" анимацию в обратную сторону; в режиме EaseOut во второй половине анимации "переусердствует" — сначала приходит к завышенному значению, а затем возвращается к заданному конечному

Свойство Amplitude определяет величину превышения; по умолчанию равно 1; можно уменьшить, но не более 0, чтобы уменьшить превышение; при увеличении свойства эффект усиливается

ElasticEase

В режиме EaseOut анимируемое значение сначала быстро изменяется, а затем колеблется вокруг конечного значения; в режиме Easeln — наоборот: сначала колеблется, а затем быстро принимает конечное значение; в режиме EaselnOut колеблется и в начале, и в конце

Свойство Oscillations определяет количество коле­баний; по умолчанию равно 3; свойство Springiness управляет скоростью затухания колебаний; по умолчанию равно 3

BounceEase

То же, что и ElasticEase, за исключением того, что анимируемое значение не выходит за границы, определяемые начальным и конечным значениями

Свойство Bounces определяет количество колебаний; по умолчанию равно 2; свойство Bounciness управляет скоростью затухания колебаний; по умолчанию равно 2

CircleEase

Ускоряет (в режиме Easeln) или замедляет (в режиме EaseOut) анимацию на основе круговой функции

Нет

CubicEase

Ускоряет (в режиме Easeln) или замедляет (в режиме EaseOut) анимацию на основе кубической функции; эффект похож на CircleEase, но более плавный

Нет

QuadraticEase

Ускоряет (в режиме Easeln) или замедляет (в режиме EaseOut) анимацию на основе квадратичной функции; эффект похож на CubicEase, но более плавный

Нет

QuarticEase

Ускоряет (в режиме Easeln) или замедляет (в режиме EaseOut) анимацию на основе четвертой степени времени; эффект похож

на CubicEase или QuadraticEase, но более заметный

Нет

QuinticEase

Ускоряет (в режиме Easeln) или замедляет (в режиме EaseOut) анимацию на основе пятой степени времени; эффект похож

на CubicEase, QuadraticEase или QuarticEase, но еще более заметный

Нет

Окончание табл. 10.1

Имя

Описание

Свойства

SineEase

Ускоряет (в режиме Easeln) или замедляет (в режиме EaseOut) анимацию на основе синусоидальной функции; создает постепенное изменение, похожее на линейную интерполяцию

Нет

PowerEase

Ускоряет (в режиме Easeln) или замедляет (в режиме EaseOut) анимацию на основе заданной степени времени; в зависимости от значения степени, может дублировать функции QuadraticEase, CubicEase, QuarticEase и QuinticEase

Свойство Power определяет степень, в которую возводится время; при значениях 2-5 дублируются соответствующие степенные функции; по умолчанию равно 2

ExponentialEase

Ускоряет (в режиме Easeln) или замедляет (в режиме EaseOut) анимацию на основе экспоненциальной функции f(t)=(exP(a[2]t)-1)/(exP(a)-1)

Свойство Exponent определяет показатель экспоненты а; по умолчанию равно 2

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

Компания Microsoft предоставляет ряд приложений, в которых приведены приме­ры использования смягчающих функций с разными значениями свойств. Наиболее полезные примеры демонстрируют эффекты падающих квадратов, автоматическую ге­нерацию разметки XAML и дублирование эффектов (www. tinyurl. com/animationeasing).

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии