Анимация Opacity для DropShadowEffect

201

22 апреля 2018, 20:57

В XAML-коде имеется такой элемент border с DropShadowEffect:

<Border BorderBrush="#FF8908" BorderThickness="0,3,0,0" Background="#2C7692" >
                <Border.Effect >
                    <DropShadowEffect x:Name="b_shadow" ShadowDepth="5"
                          Color="#FFFFA23B"
                          Direction="90"
                          BlurRadius="8" RenderingBias="Quality"/>
                </Border.Effect>
                <Viewbox HorizontalAlignment="Right">
                    <TextBlock x:Name="field" Padding="3,0,0,2"  DockPanel.Dock="Left" Background="#2C7692" FlowDirection="RightToLeft" HorizontalAlignment="Right" VerticalAlignment="Center"  FontFamily="Phenomena" Foreground="#FFA646" Text="0"></TextBlock>
                </Viewbox>
</Border>

Программно создаю анимацию Opacity для DropShadowEffect:

var animation = new DoubleAnimation();
animation.From = b_shadow.Opacity;
animation.To = 0;
animation.AutoReverse = true;
animation.Duration = TimeSpan.FromMilliseconds(800);
animation.RepeatBehavior = RepeatBehavior.Forever;
b_shadow.BeginAnimation(OpacityProperty, animation);

По идее, во время работы приложения у DropShadowEffect должен быть эффект плавного возникновения и исчезновения (пульсации). Однако такого эффекта не наблюдается. Что я упустил?

Answer 1

Используйте для этого Storyboard, через код либо через XAML разметку.

С#

Сама анимация тут сильно не изменится:

var animation = new DoubleAnimation
{
    To = 0,
    AutoReverse = true,
    Duration = TimeSpan.FromMilliseconds(800),
    RepeatBehavior = RepeatBehavior.Forever
};

Далее мы указываем цель анимации. Целью будет сам Border, а не его эффект (переносим x:Name на сам Border) Второй строкой указывается к чему именно будет применен эффект:
```
Storyboard.SetTarget(animation, borderOne);
Storyboard.SetTargetProperty(animation, new PropertyPath("Effect.Opacity"));
```
Ну а дальше остается добавить анимацию на TimeLine и запустить:
```
var storyboard = new Storyboard {Children = new TimelineCollection {animation}};
storyboard.Begin();
```

XAML

Через разметку XAML тоже довольно просто добавлять анимацию, все тоже самое. Нам нужно всего лишь указать внутри Border'a примерно такой код:

<Border.Triggers>
    <EventTrigger RoutedEvent="Border.Loaded">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation To="0" Storyboard.TargetProperty="Effect.Opacity" Duration="0:0:0.800" AutoReverse="True" RepeatBehavior="Forever"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Border.Triggers>

Вот собственно и все, ваша пульсация должна заработать ;-)