WPF 利用路徑影片做一個環形加載影片

簡單用一個路徑影片做一個環形加載影片

四個點，啟動時間各個不同，運行時間相同，啟動時圓形半徑為0，啟動后恢復正常半徑，

gif截圖略慢，實際運行還是可以的

  <Window.Resources>
        <PathGeometry x:Key="EllipesPath" Figures="M 5 10 a 35 35 0 1 1 1 1 Z"/>
    </Window.Resources>
    <Grid>
        <Canvas x:Name="cs">
            <Path Panel.ZIndex="1" x:Name="Geo" Visibility="Visible"  Canvas.Top="100" Canvas.Left="100"  Fill="Red" Stroke="Red" >
                <Path.Data>
                    <GeometryGroup x:Name="G1" FillRule="Nonzero"  >
                        <EllipseGeometry  x:Name="eg1" Center="05 10"    RadiusX="0" RadiusY="0" />
                        <EllipseGeometry  x:Name="eg2" Center="25 10"    RadiusX="0" RadiusY="0"/>
                        <EllipseGeometry  x:Name="eg3" Center="45 10"    RadiusX="0" RadiusY="0"/>
                        <EllipseGeometry  x:Name="eg4" Center="65 10"    RadiusX="0" RadiusY="0"/>
                    </GeometryGroup>
                </Path.Data>
                <Path.RenderTransform>
                    <RotateTransform/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger RoutedEvent="Path.Loaded"    >
                        <BeginStoryboard x:Name="P1" >
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="eg1"  Storyboard.TargetProperty="RadiusX" To="5" BeginTime="0:0:0"    />
                                <DoubleAnimation Storyboard.TargetName="eg1"  Storyboard.TargetProperty="RadiusY" To="5" BeginTime="0:0:0" />
                                <PointAnimationUsingPath  Storyboard.TargetName="eg1"  Storyboard.TargetProperty="Center" RepeatBehavior="Forever"  PathGeometry="{DynamicResource EllipesPath}" Duration="0:0:4" BeginTime="0:0:0.1"  AccelerationRatio="0.7" SpeedRatio="1.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                        <BeginStoryboard x:Name="P2">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="eg2"  Storyboard.TargetProperty="RadiusX" To="5" BeginTime="0:0:0.5"    />
                                <DoubleAnimation Storyboard.TargetName="eg2"  Storyboard.TargetProperty="RadiusY" To="5" BeginTime="0:0:0.5" />
                                <PointAnimationUsingPath  Storyboard.TargetName="eg2"  Storyboard.TargetProperty="Center"  RepeatBehavior="Forever"  PathGeometry="{DynamicResource EllipesPath}" Duration="0:0:4" BeginTime="0:0:0.5" AccelerationRatio="0.7" SpeedRatio="1.2" />
                            </Storyboard>
                        </BeginStoryboard>
                        <BeginStoryboard x:Name="P3">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="eg3"  Storyboard.TargetProperty="RadiusX" To="5" BeginTime="0:0:1"  />
                                <DoubleAnimation Storyboard.TargetName="eg3"  Storyboard.TargetProperty="RadiusY" To="5" BeginTime="0:0:1"   />
                                <PointAnimationUsingPath RepeatBehavior="Forever"  Storyboard.TargetName="eg3" Storyboard.TargetProperty="Center" PathGeometry="{DynamicResource EllipesPath}" Duration="0:0:4" BeginTime="0:0:1" AccelerationRatio="0.7" SpeedRatio="1.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                        <BeginStoryboard x:Name="P4">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="eg4"  Storyboard.TargetProperty="RadiusX" To="5" BeginTime="0:0:1.5"  />
                                <DoubleAnimation Storyboard.TargetName="eg4"  Storyboard.TargetProperty="RadiusY" To="5" BeginTime="0:0:1.5"   />
                                <PointAnimationUsingPath RepeatBehavior="Forever"  Storyboard.TargetName="eg4" Storyboard.TargetProperty="Center" PathGeometry="{DynamicResource EllipesPath}" Duration="0:0:4" BeginTime="0:0:1.5" AccelerationRatio="0.7" SpeedRatio="1.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>
            <Path  Canvas.Top="100" Canvas.Left="100" Stroke="Red" Visibility="Visible" StrokeThickness="1" Data="{DynamicResource EllipesPath}"/>
        </Canvas>
    </Grid>

標籤：WPF

上一篇：WPF 訊息框 TextBox 系結新資料時讓游標和滾動條跳到最下面

下一篇：WPF初識