Триггеры, использующие анимацию

WPF --- Шаблоны и пользовательские элементы управления WPF --- Триггеры, использующие анимацию

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

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

Аналогично, кнопка могла бы использовать анимацию для изменения прозрачности фокуса прямоугольника фокуса, быстро, но плавно "проявляя" его, когда кнопка получает фокус, вместо того, чтобы показывать его мгновенно, за один шаг. Другими словами, триггеры событий позволяют элементам управления изменять свое состояние более плавно и красиво, что придает им дополнительный лоск.

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

<EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="border" Duration="0:0:1"
                                            Storyboard.TargetProperty="Background.Color"
                                            To="Blue">
                            </ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="border" Duration="0:0:0.5"
                                            Storyboard.TargetProperty="Background.Color">
                            </ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
        </EventTrigger>

Добавить анимацию наведения курсора мыши можно двумя эквивалентными способами — создав триггер, реагирующий на события MouseEnter и MouseLeave (как показано здесь), либо создав триггер свойства, который добавляет действия входа и выхода при изменении свойства IsMouseOver.

В рассматриваемом примере для изменения кнопки используются два объекта ColorAnimation. Ниже перечислены другие задачи, которые может понадобиться решать с помощью анимации на основе EventTrigger:

Показывать или скрывать элемент

Для этого необходимо изменять свойство Opacity элемента в его шаблоне.

Изменять форму или положение

С помощью трансформации TranslateTransform можно подстраивать позицию элемента (например, слегка сдвигая его, что создает впечатление нажатой кнопки). Для отображения реакции кнопки, когда пользователь наводит на нее курсор мыши, можно использовать транформацию ScaleTransform или RotateTransform.

Изменение яркости или окраски

Для этого нужна анимация, которая работает с кистью, используемой для рисования фона. С помощью анимации ColorAnimation можно изменять цвета в SolidBrush, а более развитых эффектов можно добиться за счет анимации более сложных кистей, например, изменять один из цветов LinearGradientBrush (что делает шаблон элемента-кнопки по умолчанию) или сдвигать центральную точку RadialGradientBrush.

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