基于vs和C#的WPF应用之动画3

注:1、在内部和外部使用缓动函数

cs 复制代码
<Grid.Resources>
<PowerEase x:Key="powerease" Power="3" EasingMode="EaseInOut"/>
</Grid.Resources>
<DoubleAnimation EasingFunction="{StaticResource powerease}"/>


 <DoubleAnimation.EasingFunction>
 <PowerEase EasingMode="EaseInOut" Power="3"/>
 </DoubleAnimation.EasingFunction>

一、画布

cs 复制代码
<Canvas x:Name="canvas3" Width="200" Height="200" Grid.Row="0" Grid.Column="1">
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard Storyboard="{StaticResource third_sb}"/>
                </EventTrigger>
            </Canvas.Triggers>

            <!--背景-->
            <Ellipse Width="100" Height="100" Fill="#f2f4f6" Margin="50"/>
            <Label Content="Loading"
               FontSize="16"
               Margin="50"
               FontFamily="Times New Roman"
               Foreground="#6b48ff"
               FontWeight="Bold"
               Width="100" 
               Height="100"
               VerticalContentAlignment="Center" 
               HorizontalContentAlignment="Center"/>

            <Ellipse Name="third_e1" Style="{StaticResource thirdStyle_Ellipse}" >
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="0"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Name="third_e2" Style="{StaticResource thirdStyle_Ellipse}">
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="0"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Name="third_e3" Style="{StaticResource thirdStyle_Ellipse}">
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="0"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Name="third_e4" Style="{StaticResource thirdStyle_Ellipse}" >
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="0"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Name="third_e5" Style="{StaticResource thirdStyle_Ellipse}">
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="0"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Canvas>

二、动画故事板

cs 复制代码
 <Storyboard x:Key="third_sb" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetName="third_e1" To="360" Duration="0:0:2"  EasingFunction="{StaticResource powerease}" AccelerationRatio="0.1" DecelerationRatio="0.9"/>
            <!--加速比 减速比-->
            <DoubleAnimation Storyboard.TargetName="third_e2" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.3" DecelerationRatio="0.7"/>
            <DoubleAnimation Storyboard.TargetName="third_e3" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.5" DecelerationRatio="0.5"/>
            <DoubleAnimation Storyboard.TargetName="third_e4" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.7" DecelerationRatio="0.3"/>
            <DoubleAnimation Storyboard.TargetName="third_e5" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.9" DecelerationRatio="0.1"/>
        </Storyboard>

三、外部样式

cs 复制代码
 <!--第三个动画圆的样式-->
 <Style x:Key="thirdStyle_Ellipse" TargetType="Ellipse">
     <Setter Property="Width" Value="25"/>
     <Setter Property="Height" Value="25"/>
     <Setter Property="Canvas.Left" Value="87.5"/>
     <Setter Property="Canvas.Top" Value="50"/>
     <Setter Property="Fill" Value="#0d3f67"/>
     <Setter Property="RenderTransformOrigin" Value="0.5,2"/>
 </Style>
相关推荐
刘新明198918 分钟前
算法还原案例4-OLLVM_MD5
开发语言·前端·javascript·1024程序员节
wjs202418 分钟前
空对象模式(Null Object Pattern)
开发语言
Cherry Zack32 分钟前
FastAPI 入门指南 :基础概念与核心特性
开发语言·python·fastapi·1024程序员节
没有bug.的程序员2 小时前
Spring Boot 起步:自动装配的魔法
java·开发语言·spring boot·后端·spring·1024程序员节
rollingman2 小时前
WPF ComboBox 样式
wpf·combobox·textbox
面向星辰2 小时前
windows配置hadoop环境
java·开发语言
阿登林3 小时前
C# .NET Core中Chart图表绘制与PDF导出
c#·1024程序员节
Elieal3 小时前
Java的Collection 集合体系详解
java·开发语言
charlie1145141914 小时前
HTML 理论笔记
开发语言·前端·笔记·学习·html·1024程序员节
郝学胜-神的一滴4 小时前
Linux中的`fork`函数详解:深入解析
linux·服务器·开发语言·c++·算法