Анимация построителя текстуры

WPF --- Графика и анимация WPF --- Анимация построителя текстуры

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

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

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

Код здесь тот же, что и в примере с вращающейся кнопкой. Каждой кнопке должен быть назначен эффект BlurEffect вместо трансформации RotateTransform:

<StackPanel Margin="5">
                <StackPanel.Resources>
                    <Style TargetType="Button">
                        <Style.Setters>
                            <Setter Property="MinHeight" Value="60"></Setter>
                            <Setter Property="Margin" Value="5"></Setter>
                            <Setter Property="Width" Value="100"></Setter>
                            <Setter Property="Padding" Value="20,15"></Setter>
                        </Style.Setters>
                        <Style.Triggers>
                            <EventTrigger RoutedEvent="Button.MouseEnter">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Effect.Radius"
                                                             To="0" Duration="0:0:0.5"></DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Button.MouseLeave">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetProperty="Effect.Radius"
                                                             To="10" Duration="0:0:0.5"></DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Style.Triggers>
                    </Style>
                </StackPanel.Resources>
                <Button Content="One">
                    <Button.Effect>
                        <BlurEffect Radius="10"></BlurEffect>
                    </Button.Effect>
                </Button>
                <Button Content="Two">
                    <Button.Effect>
                        <BlurEffect Radius="10"></BlurEffect>
                    </Button.Effect>
                </Button>
                <Button Content="Three">
                    <Button.Effect>
                        <BlurEffect Radius="10"></BlurEffect>
                    </Button.Effect>
                </Button>
                <Button Content="Four">
                    <Button.Effect>
                        <BlurEffect Radius="10"></BlurEffect>
                    </Button.Effect>
                </Button>
</StackPanel>

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