wpfのstoryboardでアニメーション

点滅するボタンを作っています。色は、グラデーションで、マウスオーバー時と通常時では、色が異なります。
今のままだと、0からマウスオーバーのアニメーションが開始してしまうため、点滅がずれてしまいます。5時間調べたのですが、もうお手上げです。
ノーマルのアニメーションの終了位置から開始して、点滅のずれをなくす方法はないでしょうか。
以下、現在のコードです。

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Trigger.EnterActions>
                            <BeginStoryboard Name="AAA">
                                <Storyboard  RepeatBehavior="Forever" AutoReverse="True" >
                                    <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To="#CCCCCC"
                                    Duration="0:0:0.5" />
                                    <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="#F0F0F0"
                                    Duration="0:0:0.5" />
                                    <ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="#232323"
                                    Duration="0:0:0.5" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="AAA" />
                        </Trigger.ExitActions>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter Property="Background" TargetName="border" Value="{StaticResource Sample}" />
                        <Trigger.EnterActions>
                            <BeginStoryboard Name="BBB">
                                <Storyboard  RepeatBehavior="Forever" AutoReverse="True">
                                    <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To="#CCCCCC"
                                    Duration="0:0:0.5" />
                                    <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FAFAFA"
                                    Duration="0:0:0.5" />
                                    <ColorAnimation  Storyboard.TargetProperty="Foreground.Color" To="#232323"
                                    Duration="0:0:0.5" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="BBB" />
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>

行動規範の内容に同意します

回答2件

今のままだと、0からマウスオーバーのアニメーションが開始してしまうため、点滅がずれてしまいます。5時間調べたのですが、もうお手上げです。
ノーマルのアニメーションの終了位置から開始して、点滅のずれをなくす方法はないでしょうか。

タイミングを合わせるなら単一のStoryboardで、別々のBorderにアニメーションを割り当てたらどうですか？（バカバカしいがｗ
TriggerはBorderのVisibilityを切り替えるだけにします。

色の差が分かりにくかったので、簡略化させていただきました。

xml
1<Window
2  x:Class="Q63044.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="800"
6  Height="450"
7  ThemeMode="System">
8  <Window.Resources>
9    <ControlTemplate x:Key="original" TargetType="Button">
10      <Border x:Name="border" Background="#CCCCCC">
11        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
12      </Border>
13      <ControlTemplate.Triggers>
14        <Trigger Property="IsMouseOver" Value="False">
15          <Trigger.EnterActions>
16            <BeginStoryboard Name="AAA">
17              <Storyboard AutoReverse="True" RepeatBehavior="Forever">
18                <ColorAnimation
19                  Storyboard.TargetName="border"
20                  Storyboard.TargetProperty="Background.Color"
21                  To="Blue"
22                  Duration="0:0:1" />
23              </Storyboard>
24            </BeginStoryboard>
25          </Trigger.EnterActions>
26          <Trigger.ExitActions>
27            <StopStoryboard BeginStoryboardName="AAA" />
28          </Trigger.ExitActions>
29        </Trigger>
30        <Trigger Property="IsMouseOver" Value="True">
31          <Setter TargetName="border" Property="Background" Value="#CCCCCC" />
32          <Trigger.EnterActions>
33            <BeginStoryboard Name="BBB">
34              <Storyboard AutoReverse="True" RepeatBehavior="Forever">
35                <ColorAnimation
36                  Storyboard.TargetName="border"
37                  Storyboard.TargetProperty="Background.Color"
38                  To="Red"
39                  Duration="0:0:1" />
40              </Storyboard>
41            </BeginStoryboard>
42          </Trigger.EnterActions>
43          <Trigger.ExitActions>
44            <StopStoryboard BeginStoryboardName="BBB" />
45          </Trigger.ExitActions>
46        </Trigger>
47      </ControlTemplate.Triggers>
48    </ControlTemplate>
49
50    <ControlTemplate x:Key="fixed" TargetType="Button">
51      <Grid>
52        <Border x:Name="normal" Background="#CCCCCC" />
53        <Border x:Name="hover" Background="#CCCCCC" />
54        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
55      </Grid>
56      <ControlTemplate.Triggers>
57        <Trigger Property="IsMouseOver" Value="False">
58          <Setter TargetName="hover" Property="Visibility" Value="Hidden" />
59        </Trigger>
60        <EventTrigger RoutedEvent="Loaded">
61          <BeginStoryboard>
62            <Storyboard AutoReverse="True" RepeatBehavior="Forever">
63              <ColorAnimation
64                Storyboard.TargetName="normal"
65                Storyboard.TargetProperty="Background.Color"
66                To="Blue"
67                Duration="0:0:1" />
68              <ColorAnimation
69                Storyboard.TargetName="hover"
70                Storyboard.TargetProperty="Background.Color"
71                To="Red"
72                Duration="0:0:1" />
73            </Storyboard>
74          </BeginStoryboard>
75        </EventTrigger>
76      </ControlTemplate.Triggers>
77    </ControlTemplate>
78
79    <Style TargetType="Button">
80      <Setter Property="MinHeight" Value="50" />
81      <Setter Property="MinWidth" Value="200" />
82      <Setter Property="Margin" Value="8" />
83      <Setter Property="FontWeight" Value="Black" />
84    </Style>
85  </Window.Resources>
86
87  <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
88    <StackPanel Orientation="Horizontal">
89      <Button Content="original" Template="{StaticResource original}" />
90      <Button Content="original" Template="{StaticResource original}" />
91    </StackPanel>
92    <StackPanel Orientation="Horizontal">
93      <Button Content="fixed" Template="{StaticResource fixed}" />
94      <Button Content="fixed" Template="{StaticResource fixed}" />
95    </StackPanel>
96  </StackPanel>
97</Window>

これでもわかりにくいかもしれませんが、右上だけ周期がずれています。

これがあればスッキリ書けるのかな～？（知らんけど^^;
Proposal: Provide new dependency property to re-use a previous animation's progress in duration calculation · Issue #10041 · dotnet/wpf

投稿2024/11/19 16:21

TN8001

総合スコア10038

IsMouseOver プロパティの true/false が切り替わったときに、
実行されていた点滅アニメーションの終端までの残時間が
どれだけかを知る必要があると思います。
また、そのような処理をするためには XAML だけでは困難だと思うので、
ボタンをカスタムコントロールで作成し、
そのコードビハインドでなんとかすることになると思います。

まずは現在の XAML コードで実現しているアニメーションを
コードビハインドで実現してみてください。

投稿2017/01/24 23:36