基于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>
相关推荐
星秀日6 小时前
框架--SpringMVC
java·开发语言·servlet
勤奋菲菲7 小时前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
要天天开心啊7 小时前
Java序列化和反序列化
java·开发语言
二宝1528 小时前
黑马商城day1-MyBatis-Plus
java·开发语言·mybatis
Porunarufu8 小时前
JAVA·类和对象③封装及包
java·开发语言
煜3648 小时前
C++异常与智能指针
开发语言·c++
wydaicls9 小时前
AIDL 接口的定义与生成,使用
java·开发语言
云草桑9 小时前
C#入坑JAVA 使用XXLJob
java·开发语言·c#
shx66669 小时前
python杂记
开发语言·python
玉夏9 小时前
【每日算法C#】爬楼梯问题 LeetCode
算法·leetcode·c#