欢迎光临
我的个人博客网站

WPF仿win10加载动画 可用于loading加载

WPF仿win10加载动画 可用于loading加载

直接上xaml 没有cs代码 (自己琢磨了好久感觉这样能接受😂)

<UserControl x:Class="SmartCourse.UC.UCLoading"              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"               x:Name="uclLoad" Width="50" Height="50">     <UserControl.Resources>         <Storyboard x:Key="stb1" BeginTime="0:0:0" Duration="0:0:05.43" RepeatBehavior="Forever">             <DoubleAnimation Storyboard.TargetName="rot1" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="0" To="180">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseOut"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="rot1" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="180" To="540">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseInOut"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="rot1" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="540" To="720">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseIn"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="grd1" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.00" Duration="0:0:0.00" From="0" To="1"/>             <DoubleAnimation Storyboard.TargetName="grd1" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>         </Storyboard>         <Storyboard x:Key="stb2" BeginTime="0:0:0.17" Duration="0:0:05.43" RepeatBehavior="Forever">             <DoubleAnimation Storyboard.TargetName="rot2" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="-25" To="155">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseOut"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="rot2" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="155" To="515">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseInOut"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="rot2" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="515" To="720">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseIn"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="grd2" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.00" Duration="0:0:0.00" From="0" To="1"/>             <DoubleAnimation Storyboard.TargetName="grd2" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>         </Storyboard>         <Storyboard x:Key="stb3" BeginTime="0:0:0.34" Duration="0:0:05.43" RepeatBehavior="Forever">             <DoubleAnimation Storyboard.TargetName="rot3" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="-50" To="130">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseOut"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="rot3" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="130" To="490">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseInOut"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="rot3" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="490" To="720">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseIn"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="grd3" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.25" Duration="0:0:0.00" From="0" To="1"/>             <DoubleAnimation Storyboard.TargetName="grd3" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>         </Storyboard>         <Storyboard x:Key="stb4" BeginTime="0:0:0.51" Duration="0:0:05.43" RepeatBehavior="Forever">             <DoubleAnimation Storyboard.TargetName="rot4" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="-75" To="105">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseOut"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="rot4" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="105" To="465">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseInOut"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="rot4" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="465" To="720">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseIn"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="grd4" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.50" Duration="0:0:0.00" From="0" To="1"/>             <DoubleAnimation Storyboard.TargetName="grd4" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>         </Storyboard>         <Storyboard x:Key="stb5" BeginTime="0:0:0.68" Duration="0:0:05.43" RepeatBehavior="Forever">             <DoubleAnimation Storyboard.TargetName="rot5" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="-100" To="80">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseOut"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="rot5" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="80" To="440">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseInOut"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="rot5" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="440" To="720">                 <DoubleAnimation.EasingFunction>                     <QuadraticEase EasingMode="EaseIn"/>                 </DoubleAnimation.EasingFunction>             </DoubleAnimation>             <DoubleAnimation Storyboard.TargetName="grd5" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.75" Duration="0:0:0.00" From="0" To="1"/>             <DoubleAnimation Storyboard.TargetName="grd5" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>         </Storyboard>     </UserControl.Resources>     <UserControl.Triggers>         <EventTrigger RoutedEvent="Loaded">             <BeginStoryboard Storyboard="{StaticResource stb1}"/>             <BeginStoryboard Storyboard="{StaticResource stb2}"/>             <BeginStoryboard Storyboard="{StaticResource stb3}"/>             <BeginStoryboard Storyboard="{StaticResource stb4}"/>             <BeginStoryboard Storyboard="{StaticResource stb5}"/>         </EventTrigger>     </UserControl.Triggers>     <Grid>         <Grid x:Name="grd1" Width="50" Height="50" Opacity="0">             <Grid.RenderTransform>                 <TransformGroup>                     <RotateTransform x:Name="rot1" Angle="0" CenterX="25" CenterY="25"/>                 </TransformGroup>             </Grid.RenderTransform>             <Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">                 <Ellipse.RenderTransform>                     <TransformGroup>                         <TranslateTransform X="0" Y="18"/>                     </TransformGroup>                 </Ellipse.RenderTransform>             </Ellipse>         </Grid>         <Grid x:Name="grd2" Width="50" Height="50" Opacity="0">             <Grid.RenderTransform>                 <TransformGroup>                     <RotateTransform x:Name="rot2" Angle="0" CenterX="25" CenterY="25"/>                 </TransformGroup>             </Grid.RenderTransform>             <Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">                 <Ellipse.RenderTransform>                     <TransformGroup>                         <TranslateTransform X="0" Y="18"/>                     </TransformGroup>                 </Ellipse.RenderTransform>             </Ellipse>         </Grid>         <Grid x:Name="grd3" Width="50" Height="50" Opacity="0">             <Grid.RenderTransform>                 <TransformGroup>                     <RotateTransform x:Name="rot3" Angle="0" CenterX="25" CenterY="25"/>                 </TransformGroup>             </Grid.RenderTransform>             <Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">                 <Ellipse.RenderTransform>                     <TransformGroup>                         <TranslateTransform X="0" Y="18"/>                     </TransformGroup>                 </Ellipse.RenderTransform>             </Ellipse>         </Grid>         <Grid x:Name="grd4" Width="50" Height="50" Opacity="0">             <Grid.RenderTransform>                 <TransformGroup>                     <RotateTransform x:Name="rot4" Angle="0" CenterX="25" CenterY="25"/>                 </TransformGroup>             </Grid.RenderTransform>             <Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">                 <Ellipse.RenderTransform>                     <TransformGroup>                         <TranslateTransform X="0" Y="18"/>                     </TransformGroup>                 </Ellipse.RenderTransform>             </Ellipse>         </Grid>         <Grid x:Name="grd5" Width="50" Height="50" Opacity="0">             <Grid.RenderTransform>                 <TransformGroup>                     <RotateTransform x:Name="rot5" Angle="0" CenterX="25" CenterY="25"/>                 </TransformGroup>             </Grid.RenderTransform>             <Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">                 <Ellipse.RenderTransform>                     <TransformGroup>                         <TranslateTransform X="0" Y="18"/>                     </TransformGroup>                 </Ellipse.RenderTransform>             </Ellipse>         </Grid>     </Grid> </UserControl>

 直接放到STA线程去不怕主线程卡顿了 美滋滋

赞(0) 打赏
未经允许不得转载:张拓的天空 » WPF仿win10加载动画 可用于loading加载
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

==============================================================================