WPF 一个弧形手势提示动画

Posted 2021-01-07 lonelyxmas

原文:WPF 一个弧形手势提示动画

这是一个操作提示动画，一个小手在屏幕上按照一个弧形来回运动

<Window x:Class="LZRichMediaWall.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:LocWindow="clr-namespace:LZRichMediaWall.UIControls"
        xmlns:childControls="clr-namespace:LZRichMediaWall.UIControls.ChildControls"
        Title="MainWindow" WindowState="Maximized" AllowsTransparency="True" WindowStyle="None">

    <Window.Resources>
        <PathGeometry x:Key="path">
            <PathFigure StartPoint="0,100">
                <PathFigure.Segments>
                    <PathSegmentCollection>
                        <ArcSegment Size="100,80"  IsLargeArc="True" SweepDirection="CounterClockwise" Point="600,100" />
                    </PathSegmentCollection>
                </PathFigure.Segments>
            </PathFigure>
        </PathGeometry>
    </Window.Resources>

    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingPath Storyboard.TargetName="tipGd"
                                      Storyboard.TargetProperty="(Canvas.Left)"
                                        PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="X" AutoReverse="True" />
                        <DoubleAnimationUsingPath Storyboard.TargetName="tipGd"
                                      Storyboard.TargetProperty="(Canvas.Top)"
                                     PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="Y" AutoReverse="True"  />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>
    <Grid x:Name="main_Gd" Background="Black">
        <Canvas x:Name="animat_Cvs" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="-650,0,0,500" Visibility="Collapsed">
            <Path Stroke="Transparent" StrokeThickness="0" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="10">
            </Path>
            <Grid x:Name="tipGd" Height="63" Width="89" Visibility="Visible" MouseLeftButtonDown="TipGd_OnMouseLeftButtonDown">
                <!--<Image Height="55" Width="89" Margin="0,-100,-30,0" Source="/LZRichMediaWall;component/Images/点我.png"></Image>-->
                <!--<Image x:Name="quan" Height="50" Width="50" Source="/LZRichMediaWall;component/Images/圈.png">
                    <Image.Triggers>
                        <EventTrigger RoutedEvent="UserControl.Loaded">
                            <BeginStoryboard>
                                <Storyboard x:Name="storyB" RepeatBehavior="Forever" AutoReverse="True">
                                    <DoubleAnimation From="0.0" To="1.0" Duration="0:0:0.5" Storyboard.TargetName="quan" Storyboard.TargetProperty="Opacity"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Image.Triggers>
                </Image>-->
                <Image x:Name="show" Height="63" Width="76" Margin="0,0,-5,-60" Source="/LZRichMediaWall;component/Images/手.png"></Image>
            </Grid>
            <Label x:Name="textTip" Height="50" Width="300" Content="单 指 滑 动" FontSize="30" Foreground="White"
                   VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Canvas.Left="200" Canvas.Top="320">
                <Label.Triggers>
                    <EventTrigger RoutedEvent="UserControl.Loaded">
                        <BeginStoryboard>
                            <Storyboard x:Name="storyB" RepeatBehavior="Forever" AutoReverse="True">
                                <DoubleAnimation From="0.0" To="1.0" Duration="0:0:1" Storyboard.TargetName="textTip" Storyboard.TargetProperty="Opacity"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Label.Triggers>
            </Label>
        </Canvas>
    </Grid>
</Window>