WPF 动画

最新推荐文章于 2023-02-03 16:25:31 发布
最新推荐文章于 2023-02-03 16:25:31 发布
阅读量146 收藏
点赞数
分类专栏： WPF 文章标签： wpf 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bayinglong/article/details/125483843
版权

在这里插入图片描述

XML编辑动画

ex：显示方块逐渐请添加图片描述
透明

<Border Name="Bd" Width="100" Height="100" Background="Cyan" Canvas.Left="200" Canvas.Top="120">
            <Border.Triggers>
                <EventTrigger RoutedEvent="Border.MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Opacity" AutoReverse="True" By="0.5">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
        </Border>

线性动画

请添加图片描述

UI
<Button Width="60" Height="60" Content="Move" Click="Button_Click_1" 
                HorizontalAlignment="Left" VerticalAlignment="Top">
            <Button.RenderTransform>
                <TranslateTransform x:Name="tt" X="30" Y="30"/>
            </Button.RenderTransform>
        </Button>
后台
 private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            DoubleAnimation daX = new DoubleAnimation();
            DoubleAnimation daY = new DoubleAnimation();

            daX.By = 100;
            daY.By = 100;//现有基础上偏移

            //daX.From = 30;
            //daY.From = 30;

            //Random r = new Random();
            //daX.To = r.NextDouble() * 300;
            //daY.To = r.NextDouble() * 200;

            BounceEase bounceEase = new BounceEase();
            bounceEase.Bounces = 3;
            bounceEase.Bounciness = 2;
            daY.EasingFunction = bounceEase;


            Duration duration = new Duration(TimeSpan.FromMilliseconds(500));
            daX.Duration = duration;
            daY.Duration = duration;

            this.tt.BeginAnimation(TranslateTransform.XProperty, daX);
            this.tt.BeginAnimation(TranslateTransform.YProperty, daY);
        }

关键帧动画

请添加图片描述

UI
<Canvas Name="can">
        <Border Name="Bd" Width="100" Height="100" Background="Cyan" Canvas.Left="200" Canvas.Top="120">
            <Border.Triggers>
                <EventTrigger RoutedEvent="Border.MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Opacity" AutoReverse="True" >
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
        </Border>
        <Button Width="60" Height="60" Content="Move" Click="Button_Click_1" 
                HorizontalAlignment="Left" VerticalAlignment="Top">
            <Button.RenderTransform>
                <TranslateTransform x:Name="tt" X="30" Y="30"/>
            </Button.RenderTransform>
        </Button>

    </Canvas>


 private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            DoubleAnimation daX = new DoubleAnimation();
            DoubleAnimation daY = new DoubleAnimation();

            daX.By = 100;
            daY.By = 100;//现有基础上偏移

            BounceEase bounceEase = new BounceEase();
            bounceEase.Bounces = 3;
            bounceEase.Bounciness = 2;
            daY.EasingFunction = bounceEase;


            Duration duration = new Duration(TimeSpan.FromMilliseconds(500));
            daX.Duration = duration;
            daY.Duration = duration;

            this.tt.BeginAnimation(TranslateTransform.XProperty, daX);
            this.tt.BeginAnimation(TranslateTransform.YProperty, daY);
        }

路径动画

请添加图片描述

UI
<Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <PathGeometry x:Key="movingPath" 
            	Figures="m 0,150 c 300,-100 300,400 600,120"/>
        </Grid.Resources>

        <Button Content="Move" HorizontalAlignment="Left" VerticalAlignment="Top"
                Width="80" Height="80" Click="Button_Click">
            <Button.RenderTransform>
                <TranslateTransform x:Name="tt" X="0" Y="150"/>
            </Button.RenderTransform>
        </Button>
    </Grid>
后台
 private void Button_Click(object sender, RoutedEventArgs e)
        {
            // 查找资源
            PathGeometry pathGeometry = LayoutRoot.FindResource("movingPath") as PathGeometry;

            // 设置动画时间
            Duration duration = new Duration(TimeSpan.FromMilliseconds(600));

            // 创建路径动画
            DoubleAnimationUsingPath dmpX = new DoubleAnimationUsingPath();
            dmpX.Duration = duration;
            dmpX.PathGeometry = pathGeometry;
            dmpX.Source = PathAnimationSource.X;

            DoubleAnimationUsingPath dmpY = new DoubleAnimationUsingPath();
            dmpY.Duration = duration;
            dmpY.PathGeometry = pathGeometry;
            dmpY.Source = PathAnimationSource.Y;

            // 设置来回循环效果
            dmpX.AutoReverse = true;
            dmpY.AutoReverse = true;
            dmpX.RepeatBehavior = RepeatBehavior.Forever;
            dmpY.RepeatBehavior = RepeatBehavior.Forever;

            // 动画关联属性
            tt.BeginAnimation(TranslateTransform.XProperty, dmpX);
            tt.BeginAnimation(TranslateTransform.YProperty, dmpY);
        }

场景

XML
<Window x:Class="AnimationSceneDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:AnimationSceneDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="38"/>
            <RowDefinition Height="38"/>
            <RowDefinition Height="38"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="60"/>
        </Grid.ColumnDefinitions>

        <Border BorderBrush="Gray" BorderThickness="1" Grid.Row="0">
            <Ellipse x:Name="ballR" Height="36" Width="36" Fill="Red"
                     HorizontalAlignment="Left">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="ttR"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>

        <Border BorderBrush="Gray" BorderThickness="1,0,1,1" Grid.Row="1">
            <Ellipse x:Name="ballG" Height="36" Width="36" Fill="LawnGreen"
                     HorizontalAlignment="Left">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="ttG"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>

        <Border BorderBrush="Gray" BorderThickness="1,0,1,1" Grid.Row="2">
            <Ellipse x:Name="ballB" Height="36" Width="36" Fill="Blue"
                     HorizontalAlignment="Left">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="ttB"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>

        <Button Content="Go!" Grid.Column="1" Grid.RowSpan="3">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard Duration="0:0:5">

                            <DoubleAnimation Duration="0:0:5" To="685"
                                 Storyboard.TargetName="ttR"
                                 Storyboard.TargetProperty="X"/>

                            <DoubleAnimationUsingKeyFrames Duration="0:0:5"
                        Storyboard.TargetName="ttG" Storyboard.TargetProperty="X">
                                <SplineDoubleKeyFrame KeyTime="0:0:5" Value="685"
                                          KeySpline="0,1,1,0"/>
                            </DoubleAnimationUsingKeyFrames>

                            <DoubleAnimationUsingKeyFrames Duration="0:0:5"
                        Storyboard.TargetName="ttB" Storyboard.TargetProperty="X">
                                <SplineDoubleKeyFrame KeyTime="0:0:5" Value="685"
                                          KeySpline="1,0,0,1"/>
                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>

</Window>
Byron Loong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF动画详解
qq_30725967的博客
09-08 4597
动画的本质就是在一个时间段内对象位置、角度、颜色、透明度等属性值的连续变化。这些属性种，有些是对象自身的单属性，有些是图形变形 的属性。WPF规定，可以用来制作动画的属性必须是依赖属性。简单的动画由一个元素来完成就可以了，就像一个演员的独角戏，WPF吧简单动画称为AnimationTimeline。复杂的动画就需要UI上的多个元素协同完成，就像电影中的一段场景。复杂动画的协同包括有哪些UI元素参与动画、每个元素的动画行为是什么、动画何时开始何时结束等。WPF把一组协同的动画也称为Storyboard。
WPF的路由事件
weixin_55017780的博客
10-18 1237
WPF的路由事件
WPF（代码实现XAML）
breakbridge的博客
05-10 421
将下述的XAML通过代码实现： <Window x:Class="WpfAppLearn1.Window3" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expressio.
WPF体验（5）
热门推荐
niwalker的专栏
12-13 1万+
 动画WPF可以在代码中编写动画的行为，也可以在XAML中编写，我们这里只介绍XAML中的动画效果。在XAML中动画是通过叫做故事版的元属来描述，你可以设置界面元素的属性变化来产生动画的效果，这些属性可以是颜色、透明度、位置、大小尺寸等。动画的类型有ColorAnimation、DoubleAnimation、PointAnimation等。它们通过一个TimeLine的对象来实现动画效果，下面是
WPF 属性触发器
时意
05-19 545
今天做了一个属性触发器的效果 我按照属性触发器这么写 发现 动画效果不怎么好 没有动的感觉 <Style x:Key="PathStyle1" TargetType="{x:Type Path}"> <Setter Property="Fill" Value="#c8c8c8"/> <Setter Property="Stroke" Value="#c8c8c8"/> <Setter...
wpf 通过EventTrigger用一个控件控制另一个控件
dxm809的博客
07-19 1371
<Window x:Class="WpfApp1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" x.
WPF中关于RoutedEvent
枫翎玉的博客
02-03 938
Wpf中关于RoutedEvent相关内容
WPF路由事件RegisterRoutedEvent
liaohaiyin的专栏
04-17 1276
您可能知道，只要在Control对象上启动用户操作并且仅触发指定控件的事件处理程序，就会触发本机CLR事件。此事件不会影响其他控件。例如，您可以在WPF中想到的任何事件本质上都是CLR事件。 相反，路由事件是一种事件类型，它可以在元素树中的多个侦听器上调用处理程序，而不仅仅是引发事件的对象。它基本上是一个由Routed Event类的实例支持的CLR事件。它在WPF事件系统中注册。 为了详细解释路由事件，让我们以WPF UI窗口为例，其中有一些嵌套控件。 Window StackPanel 1
WPF关键帧动画2
qq_42345466的博客
06-15 176
XAML代码： <Window.Resources> <PathGeometry x:Key="path"> <PathFigure IsClosed="True"> <ArcSegment Point="100,200" Size="15,10" SweepDirection...
WPF： RoutedEvent
weixin_34288121的博客
01-16 161
WPF中因为控件都是由其他控件组成的，也就形成了所谓的控件树。所以在事件处理上，与WinForms是不太一样的，它所采用的机制是所谓的RoutedEvent，即事件路由。 注册路由事件时，我们可以选择不同的路由策略。 管道传递(Tunneling): 事件首先在根元素上触发，然后向下层级传递，直到那个最初触发事件的子元素。 冒泡(Bubbling): 事件从最初触发事件的子元素向根元素层级往...
wpf动画效果
06-23
WPF动画效果综合，包括多个效果，国内国外的demo。星空效果。淡入淡出效果。窗体转场效果。图片背景墙效果等等
WPF动画效果合集，包含多个项目
06-01
窗体动画、星空效果等多个动画，多种demo
WPF 动画演示
10-21
使用C#编写的一个小动画，具有3D效果，可以进行旋转，翻转操作。
wpf动画集锦 wpf特效集锦 wpf炫酷动画集锦 wpf炫酷特效集锦
09-11
包含以下特效：星、3d旋转、下拉、翻页、旋转出、棋盒棱形、垂直百叶窗、左拉、淡入、球形散开、棋盒方形、飞入、旋转擦除、柱状、斜擦除、单面翻书、球状棋盒、淡入、双线擦除、门状、水平百叶窗、溶解
WPF动画点击产生泡泡
05-14
WPF动画点击产生泡泡，模拟手机充电效果，使用eclipse绘制。点击过快消耗的CPU和GPU资源比较多。
ImagePulseDemo_WPF动画_
09-30
警告图像的闪烁显示效果，包含WPF源码。
WPF 动画合集 各类型动画demo
03-01
1.动画故事板，关键帧 2.LinearDoubleKeyFrame 3.DiscreteDoubleKeyFrame 4.SplineDoubleKeyFrame 5.EasingDoubleKeyFrame
WPF动画属性介绍以及效果演示
04-08
这里面讲解了一些动画属性，包括3Ddemo 希望能帮到各位 初学的有兴趣的可以下载
WPF动画按钮
04-08
一个按钮，无需使用触发器来定义按钮状态更改情节提要。
wpf动画
最新发布
05-26
以下是几个常见的WPF动画： 1. 透明度动画：可以通过改变元素的不透明度来创建淡入淡出效果。 ```xaml ``` 2. 位移动画：可以通过改变元素的位置来创建移动效果。 ```xaml ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值