wpf-storyboardでスクロール中アニメーションを作る

10567 ワード
Storyboard Xaml WPF Storyboard テキストリンク

スクロールビューワでスクロール中に出現するアニメーションを作成。

実際はこれをRenderTransformでスクロール方向に回転させたりして使う。

コードは下記

<UserControl x:Class="ScrollingTriangleTest.ScrollingTriangle"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:ScrollingTriangleTest"
             mc:Ignorable="d">
    <UserControl.Resources>
        <Storyboard x:Key="FlashStyle1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever">
                <LinearDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                <LinearDoubleKeyFrame KeyTime="0:0:0.2" Value="0.8"/>
                <LinearDoubleKeyFrame KeyTime="0:0:0.4" Value="0.8"/>
                <LinearDoubleKeyFrame KeyTime="0:0:0.6" Value="0.8"/>
                <LinearDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="FlashStyle2">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever">
                <LinearDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                <LinearDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                <LinearDoubleKeyFrame KeyTime="0:0:0.4" Value="0.8"/>
                <LinearDoubleKeyFrame KeyTime="0:0:0.6" Value="0.8"/>
                <LinearDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="FlashStyle3">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" RepeatBehavior="Forever">
                <LinearDoubleKeyFrame KeyTime="0:0:0.0" Value="0"/>
                <LinearDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                <LinearDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
                <LinearDoubleKeyFrame KeyTime="0:0:0.6" Value="0.8"/>
                <LinearDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Style x:Key="FlashTriangle3" TargetType="Path">
            <Setter Property="Fill" Value="DarkGray"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard Storyboard="{StaticResource FlashStyle3}"/>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="FlashTriangle2" TargetType="Path">
            <Setter Property="Fill" Value="DarkGray"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard Storyboard="{StaticResource FlashStyle2}"/>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <Style x:Key="FlashTriangle1" TargetType="Path">
            <Setter Property="Fill" Value="DarkGray"/>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Path.Loaded">
                    <BeginStoryboard Storyboard="{StaticResource FlashStyle1}"/>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>
    <Grid>
        <StackPanel>
            <Path Style="{StaticResource ResourceKey=FlashTriangle3}" Stroke="DarkGray" StrokeThickness="2" Data="M 0,15 L 30,15 L 15,0 Z"/>
            <Path Style="{StaticResource ResourceKey=FlashTriangle2}" Stroke="DarkGray" StrokeThickness="2" Data="M 0,15 L 30,15 L 15,0 Z"/>
            <Path Style="{StaticResource ResourceKey=FlashTriangle1}" Stroke="DarkGray" StrokeThickness="2" Data="M 0,15 L 30,15 L 15,0 Z"/>
        </StackPanel>
    </Grid>
</UserControl>