WPF实现动态加载效果2

 思路：

画一个圆，边框5，底色蓝色；

再覆盖同样一段弧形，颜色浅色即可；

控制弧形绕圆心旋转即可；

代码：

 1 <Ellipse Width="30" Height="30" Stroke="Blue" StrokeThickness="5"/>
 2 <Ellipse Width="30" Height="30"
 3          Stroke="LightBlue"
 4          Opacity="0.6"
 5          StrokeDashArray="5 40"
 6          StrokeThickness="5"
 7          StrokeDashCap="Round"
 8          RenderTransformOrigin="0.5 0.5">
 9     <Ellipse.RenderTransform>
10         <RotateTransform x:Name="rotateTransform" Angle="0"/>
11     </Ellipse.RenderTransform>
12     <Ellipse.Triggers>
13         <EventTrigger RoutedEvent="Loaded">
14             <BeginStoryboard>
15                 <Storyboard RepeatBehavior="Forever">
16                     <DoubleAnimation Storyboard.TargetName="rotateTransform"
17                                      Storyboard.TargetProperty="Angle"
18                                      From="0" To="360"
19                                      Duration="0:0:1"/>
20                 </Storyboard>
21             </BeginStoryboard>
22         </EventTrigger>
23     </Ellipse.Triggers>
24 </Ellipse>
View Code

 思路：

画五个圆，依次排列；

循环控制其Y坐标；实现波浪效果；

代码：

 1 <StackPanel.Triggers>
 2     <EventTrigger RoutedEvent="Loaded">
 3         <BeginStoryboard>
 4             <Storyboard RepeatBehavior="Forever">
 5                 <DoubleAnimation Storyboard.TargetName="dot1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
 6                                  From="0" To="-15" AutoReverse="True" Duration="0:0:0.3" BeginTime="0:0:0">
 7                     
 8                 </DoubleAnimation>
 9                 <DoubleAnimation Storyboard.TargetName="dot2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
10                                  From="0" To="-18" AutoReverse="True" Duration="0:0:0.3" BeginTime="0:0:0.15">
11                     
12                 </DoubleAnimation>
13                 <DoubleAnimation Storyboard.TargetName="dot3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
14                                  From="0" To="-21" AutoReverse="True" Duration="0:0:0.3" BeginTime="0:0:0.3">
15                 </DoubleAnimation>
16                 <DoubleAnimation Storyboard.TargetName="dot4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
17                                  From="0" To="-24" AutoReverse="True" Duration="0:0:0.3" BeginTime="0:0:0.45">
18                 </DoubleAnimation>
19                 <DoubleAnimation Storyboard.TargetName="dot5" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
20                                  From="0" To="-27" AutoReverse="True" Duration="0:0:0.3" BeginTime="0:0:0.6">
21 
22                 </DoubleAnimation>
23             </Storyboard>
24         </BeginStoryboard>
25     </EventTrigger>
26 </StackPanel.Triggers>
View Code

 

posted @ 2025-05-08 17:56  [春风十里]  阅读(25)  评论(0)    收藏  举报