Главная » Silverlight » Объекты переходов типа VisualTransition

0

В предыдущем примере установлена нулевая длительность анимации. В результате этого при наведении указателя на кнопку ее цвет изменяется мгновенно.

Для создания более плавного эффекта нужно увеличить длительность анимации. Приведенная ниже разметка задает изменение цвета за 0,2 секунды.

<VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="MouseOver"> <Storyboard>

<ColorAnimation Duration="0:0:0.2" . . . /> </Storyboard> </VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

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

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

Примечание. Элементы управления достаточно "интеллигентны", они пропускают анимацию перехода, когда он начинается с определенного состояния. Рассмотрим, например, элемент управления CheckBox, имеющий состояния Unchecked и Checked. Предположим, вы решили применить анимацию для плавного выведения "галочки" при установке флажка. Если добавить эффект плавного выведения в анимацию состояния Checked, анимация будет применена только при первом выводе установленного флажка (например, если страница содержит три установленных флажка, все три "галочки" будут плавно выведены при первом появлении страницы). Однако если добавить эффект плавного выведения посредством объекта перехода, эффект будет применен только при щелчке пользователя на флажке. При первом выводе элемента управления он не будет применен, что выглядит более уместно.

Переход, установленный по умолчанию

Переходы применяются к группам состояний. При определении объекта пере­хода его нужно добавить в коллекцию VisualStateGroup. Transitions. Простейший тип перехода — это переход, установленный по умолчанию. Он применяется ко всем изменениям состояний группы. Для создания перехода, установленного по умолча­нию, нужно всего лишь добавить элемент VisualTransition и присвоить свойству GeneratedDuration длительность перехода.

<VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> CVisualStateGroup.Transitions»

<VisualTransition GeneratedDuration="0:0:0.2" /> </VisualStateGroup.Transitions»

<VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Duration="0:0:0" Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Color" To="Orange" /> </Storyboard> </VisualState>

<VisualState x:Name="Normal"> <Storyboard> <ColorAnimation Duration="0:0:0" Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Color" /> </Storyboard» </VisualStateGroup>

</VisualStateManager.VisualStateGroups>

Теперь при каждом изменении состояния кнопки (состояние должно принадлежать группе CommonStates) будет запущена анимация перехода длительностью 0,2 секунды. Это означает, что при наведении указателя на кнопку и переходе в состояние Mouseover новый цвет будет полностью выведен только через 0,2 секунды, несмотря даже на то, что анимация состояния MouseOver имеет нулевую длительность. Аналогично при уда­лении указателя из области кнопки исходный цвет будет полностью отображен только через 0,2 секунды.

Важно учитывать, что переход является анимацией, запускаемой при изменении состояния. Элемент VisualStateManager может создавать анимации переходов для сле­дующих типов.

•            ColorAnimation или ColorAnimationUsingKeyFrames;

•            PointAnimation или PointAnimationUsingKeyFrames;

•            DoubleAnimation или DoubleAnimationUsingKryFrames.

Пример с кнопкой работоспособен потому, что в состояниях Normal и MouseOver ис­пользуется цветовая анимация, т.е. анимация поддерживаемого типа. Если применить какую-либо другую анимацию, например ObjectAnimationUsingKeyFrames, процедура перехода не будет выполнена. Сначала останется старое значение, затем время пере­хода окажется исчерпанным, после чего мгновенно будет установлено новое значение.

Примечание. Иногда в состоянии применяется несколько анимаций. В этом случае все анимации поддерживаемых типов будут выполняться посредством объектов перехода. Анимации всех неподдерживаемых типов будут мгновенно установлены в конце перехода.

Переходы From и То

Переходы, установленные по умолчанию, удобны, но они все же оптимальны не во всех случаях. Предположим, нужно выполнить переход в состояние MouseOver за 0,2 се­кунды и мгновенно вернуться в исходное состояние Normal, когда указатель выходит за пределы кнопки. Для создания такого эффекта необходимо определить два перехода и установить свойства From и То, задающие, когда выполняется переход. Рассмотрим следующую коллекцию переходов.

<VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5" /> <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.1" />

</VisualStateGroup. Transitions>

Кнопка отображает состояние MouseOver через 0,5 секунды, а перестает отображать его — через 0,1 секунды после удаления указателя с области кнопки. Переходов, уста­новленных по умолчанию, нет, поэтому отображение других состояний выполняется мгновенно.

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

1. Переход с From="Normal" и To="MouseOver".

2.  Переход сTo="MouseOver".

3.  Переход сFrom="Normal".

4.  Переход, установленный по умолчанию.

Если перехода, установленного по умолчанию, нет, переключение между двумя со­стояниями выполняется мгновенно.

Переходы с повторениями

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

Предположим, нужно создать кнопку, которая пульсирует при наведении на нее ука­зателя. Для этого необходимо присвоить свойству RepeatBehavior либо количество по­вторений, либо значение Forever, задающее бесконечное повторение анимации. Для некоторых типов данных нужно также присвоить свойству AutoReverse значение True. Например, при использовании цветовой анимации необходимо перед каждым повторе­нием возвращать исходный цвет. В анимациях на основе ключевых кадров этот дополни­тельный этап не обязателен, потому что анимация может изменять свойство от послед­него ключевого кадра в конце перехода до первого ключевого кадра в новой итерации.

В качестве примера ниже приведена разметка повторяющейся анимации пульсиру­ющей кнопки.

<VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Duration="0:0:0.4" Storyboard.TargetName="ButtonBackgroundBrush" Storyboard.TargetProperty="Color" From="DarkOrange" To="Orange"

RepeatBehavior="Forever" AutoReverse="True" /> </Storyboard>

</VisualState>

Использовать в данной кнопке объект перехода не обязательно, потому что эффект пульсации может начинаться немедленно. Однако если нужно обеспечить плавный пе­реход, он должен выполняться перед началом пульсации. Рассмотрим стандартный объект перехода.

<VisualStateGroup.Transitions> <VisualTransition From="Normal" To="MouseOver" GeneratedDuration="0:0:l" />

</VisualStateGroup.Transitions>

Он переводит кнопку из текущего цвета (Red) в начальный цвет (DarkOrange) повто­ряющейся анимации за 1 секунду. После этого начинается пульсация.

Пользовательский переход

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

Для определения пользовательского перехода нужно разместить в элементе Visual- Transition раскадровку с одной или несколькими анимациями. Ниже приведена раз­метка, создающая эффект эластичного сжатия кнопки при наведении на нее указателя.

<VisualStateGroup.Transitions> <VisualTransition To="Normal" From="MouseOver" GeneratedDuration="0:0:0.7"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ScaleTransform" Storyboard.TargetProperty="ScaleX"> <LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="0" /> cLinearDoubleKeyFrame KeyTime="0:0:0.7" Value="l" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualTransition>

</VisualStateGroup.Transitions>

Примечание. В пользовательских переходах нужно установить свойство VisualTransition.GeneratedDu- ration таким образом, чтобы оно было равно длительности анимации. В противном случае объект visual- StateManager не сможет применить переход и установит новое состояние мгновенно. Фактическое значение времени не влияет на пользовательский переход, потому что оно применяется только к автоматически сгенерированным анимациям. В конце данного раздела рассматривается создание пользовательских переходов с автоматически генерируемыми анимациями.

В приведенном выше переходе используется анимация на основе ключевых кадров. Первый ключевой кадр сжимает кнопку по горизонтали, пока она не исчезает, а второй возвращает ее на экран через короткий интервал времени. Анимация перехода настра­ивает масштаб объекта преобразований ScaleTransform, определенного в шаблоне эле­мента управления.

<Grid RenderTransformOrigin="0.5,0.5"> <Grid.RenderTrans form> <ScaleTransform x:Name="ScaleTransform" ScaleX="l" />

</Grid.RenderTransform>

</Grid>

Когда переход завершается, анимация перехода останавливается и анимирован- ным свойствам возвращаются их исходные значения (или значения, установленные анимацией текущего состояния). В данном примере анимация возвращает объекту ScaleTransform его исходное значение ScaleX, равное 1, поэтому по завершении ани­мации перехода изменения не заметны.

Логично предположить, что пользовательская анимация перехода, подобная этой, замещает автоматически сгенерированный переход, создаваемый объектом Visual- StateManager, однако это происходит не всегда. Все зависит от того, анимирует ли пользовательский переход те же свойства, что и объект VisualStateManager.

Если переход анимирует те же свойства в качестве анимации новых состояний, пользовательский переход замещает автоматически сгенерированный переход. В дан­ном примере переход заполняет промежуток между состояниями MouseOver и Normal. В новом состоянии Normal анимация с нулевой длительностью используется для изме­нения цвета фона кнопки. Следовательно, если не применить к переходу пользователь­скую анимацию, объект VisualStateManager создаст новую анимацию, которая плавно переключит цвет фона из старого состояния в новое.

Что происходит при подключении пользовательской анимации к данной кон­струкции? Если пользовательская анимация перехода изменяет цвет фона, объект VisualStatemanager применит ее вместо анимации стандартного перехода. Однако в данном примере этого не происходит. Пользовательский переход не изменяет цвет, вме­сто этого он анимирует объект преобразований. Поэтому объект VisualStateManager все же генерирует автоматическую анимацию для изменения цвета фона. Автоматически сгенерированная анимация применяется как дополнение к анимации пользовательско­го перехода, причем обе они выполняются в одно и то же время. Обе анимации получа­ют длительность, установленную в соответствующем объекте VisualTransition. В дан­ном примере это означает, что новый цвет прорисовывается за 0,7 секунды и в это же время анимация пользовательского перехода создает эффект сжатия.

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

По теме:

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