基于vs和C#的WPF应用之动画4---跳跳球

一、画布和图形

cs 复制代码
 <Canvas x:Name="canvas4" Grid.Row="1" Grid.Column="1"   Width="200" Height="200">
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard Storyboard="{StaticResource fourth_sb}"/>
                </EventTrigger>
            </Canvas.Triggers>
            
            <Label Content="Loading"
           FontSize="16"
           FontFamily="Times New Roman"
           Foreground="#ffb549"
           FontWeight="Bold"
           Width="200"
           HorizontalContentAlignment="Center"
           Canvas.Top="110"/>

            <Ellipse Name="fourth_e1" Canvas.Left="30" Canvas.Top="80" Style="{StaticResource fourthStyle_Ellipse}"/>
            <Ellipse Name="fourth_e2" Canvas.Left="60" Canvas.Top="80" Style="{StaticResource fourthStyle_Ellipse}"/>
            <Ellipse Name="fourth_e3" Canvas.Left="90" Canvas.Top="80" Style="{StaticResource fourthStyle_Ellipse}"/>
            <Ellipse Name="fourth_e4" Canvas.Left="120" Canvas.Top="80" Style="{StaticResource fourthStyle_Ellipse}"/>
            <Ellipse Name="fourth_e5" Canvas.Left="150" Canvas.Top="80" Style="{StaticResource fourthStyle_Ellipse}"/>
        </Canvas>

二、故事动画板

cs 复制代码
 <Storyboard x:Key="fourth_sb" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetName="fourth_e1" To="-50" BeginTime="0:0:0.0" Duration="0:0:0.2" AutoReverse="True" EasingFunction="{StaticResource fourth_PowerEase}"/>
            <DoubleAnimation Storyboard.TargetName="fourth_e2" To="-50" BeginTime="0:0:0.1" Duration="0:0:0.2" AutoReverse="True" EasingFunction="{StaticResource fourth_PowerEase}"/>
            <DoubleAnimation Storyboard.TargetName="fourth_e3" To="-50" BeginTime="0:0:0.2" Duration="0:0:0.2" AutoReverse="True" EasingFunction="{StaticResource fourth_PowerEase}"/>
            <DoubleAnimation Storyboard.TargetName="fourth_e4" To="-50" BeginTime="0:0:0.3" Duration="0:0:0.2" AutoReverse="True" EasingFunction="{StaticResource fourth_PowerEase}"/>
            <DoubleAnimation Storyboard.TargetName="fourth_e5" To="-50" BeginTime="0:0:0.4" Duration="0:0:0.2" AutoReverse="True" EasingFunction="{StaticResource fourth_PowerEase}"/>
        </Storyboard>

三、外部图形样式

cs 复制代码
<!--第四个动画圆的样式设计-->
<Style x:Key="fourthStyle_Ellipse" TargetType="Ellipse">
   <Setter Property="Width" Value="20"/>
   <Setter Property="Height" Value="20"/>
   <Setter Property="Fill" Value="Green"/>
   <Setter Property="RenderTransform">
       <Setter.Value>
       <!--平移变换-->
       <TranslateTransform X="0" Y="0"/>
       </Setter.Value>
   </Setter>
</Style>
<PowerEase x:Key="fourth_PowerEase" Power="2" EasingMode="EaseInOut"/>
相关推荐
19H11 分钟前
Flink-Source算子状态恢复分析
c#·linq
weixin_472339462 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
枯萎穿心攻击2 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue4 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762904 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
浪裡遊5 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
lzb_kkk6 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
好开心啊没烦恼6 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
简佐义的博客7 小时前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang