LoginSignup
0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-05-08

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

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

ScrollAnimation.gif

コードは下記

<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>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0