WPF实现动画效果（二）之From/To/By动画

WPF动画效果系列

WPF实现动画效果（一）之基本概念

WPF实现动画效果（二）之From/To/By 动画

WPF实现动画效果（三）之时间线（TimeLine）

WPF实现动画效果（四）之缓动函数

WPF实现动画效果（五）之关键帧动画

WPF实现动画效果（六）之路径动画

WPF实现动画效果（七）之演示图板

正文

我们所实现的的动画中，很大一部分是让一个属性在起始值和结束值之间变化，例如，我在前文中实现的改变宽度的动画：

    var widthAnimation = new DoubleAnimation()
    {
        From = 0,
        To = 320,
        Duration = TimeSpan.FromSeconds(2),
        RepeatBehavior = RepeatBehavior.Forever,
    };

    button.BeginAnimation(WidthProperty, widthAnimation);

这个动画实现了宽度在0和320之间的变化，由于宽度是一个double型，因此这里用的是DoubleAnimation。对于一些其它常见的类型，如Byte、Color、Int32、Size、Point等，在System.Windows.Media.Animation下都有相应的过渡动画实现，命名规则是"数据结构类型+Animation"这里就不多介绍了。

这种过渡动画一般成为From/To/By 动画，是因为它们是通过From、To、By三个属性来决定了目标属性的起始值和结束值。首先我们来看下这三个属性代表的意义：

  • From：起始值，在动画开始的时候将目标属性设置为该值
  • To：结束值，动画结束是目标属性为改值
  • By：偏移值：动画结束的时候目标属性为"初始值+偏移值"

很明显，To和By的效果是有可能冲突的。实际上，这三个属性都是可选设置的，并且在设置了To和By的时候，是会忽略By属性的。下面我再通过一些简单的场景介绍一下这三个属性如何组合使用。

  • 由0 变为 320：From = 0， To = 320
  • 由初始值变为320：To = 320
  • 由0变为初始值：From = 0
  • 由0增大150：From = 0， By = 150
  • 由初始值增大150：By = 150

看了这几个用例后，相信大家已经大致能明白这三个参数的使用方法。

为什么这么设计

初一看上去，这种From、To、By的三参数设计得过于复杂，完全可以用From和To两个参数可以确定，需要用到By的地方通过运算获取。 甚至From和To也可以强制要求赋值，这样就不会出现From和To都不赋值的这种非法情况了。为什么要这么设计呢？ 我觉得有两个原因：

  • 这种比较灵活的方式可以方便将动画和具体的对象分离出来，可以方便复用和组合。
  • 方便在XAML中使用。如果像我上述的那样的做法，很多时候需要取对象的初始值，用XAML编写复杂的动画时，这种操作并不是是很方便。

时间控制

这里只介绍了如何设置过渡动画的起始状态和终止状态，动画还有一个比较重要部分是时间控制，如动画时间段的长度、开始时间、重复次数、进度的快慢，结束通知等。这些都是在其基类TimeLine中控制的，下一章将单独对其介绍。

参考资料

http://msdn.microsoft.com/zh-cn/library/aa970265(v=vs.110).aspx

到此这篇关于WPF实现动画效果之From/To/By动画的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • WPF实现动画效果（四）之缓动函数

    WPF实现动画效果（四）之缓动函数

    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板 正文 缓动函数可以通过一系列公式模拟一些物理效果,如实地弹跳或其行为如同在弹簧上一样.它们一般应用在From/To/By动画上,可以使得其动画更加平滑. var widthAnimation

  • WPF实现动画效果（三）之时间线（TimeLine）

    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板 正文 时间线(TimeLine)表示时间段. 它提供的属性可以让控制该时间段的长度.开始时间.重复次数.该时间段内时间进度的快慢等等.在WPF中内置了如下几种TimeLine: Animat

  • WPF实现动画效果

    WPF实现动画效果

    学习平台 微软开发者博客:https://devblogs.microsoft.com/?WT.mc_id=DT-MVP-5003986微软文档与学习:https://docs.microsoft.com/zh-cn/?WT.mc_id=DT-MVP-5003986微软开发者平台:https://developer.microsoft.com/en-us/?WT.mc_id=DT-MVP-5003986 1.介绍 在之前做winform中, 也做过一些动画效果, 但是整个动画都需要我们自己去编写

  • WPF实现动画效果（一）之基本概念

    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板 正文 WPF的一个特点就是支持动画,我们可以非常容易的实现漂亮大方的界面.首先,我们来复习一下动画的基本概念.计算机中的动画一般是定格动画,也称之为逐帧动画,它通过每帧不同的图像连续播放,从

  • WPF实现动画效果（五）之关键帧动画

    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板 正文 与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值. 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧

  • WPF实现动画效果（六）之路径动画

    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板 正文 路径动画是一种专门用于将对象按照指定的Path移动的动画,虽然我们也可以通过控制动画的旋转和偏移实现对象的移动,但路径动画更专业,它的实现更加简洁明了. 路径动画中最常用的是Matri

  • WPF实现动画效果（七）之演示图板

    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板 正文 前面所介绍的都是单一的动画,它只能修改单一属性.有的时候,我们需要将一组动画一起进行,对于一个按钮,我们可能有如下需求: 选择该按钮时,该按钮增大并更改颜色. 单击该按钮时,该按钮缩小

  • Android动画效果之自定义ViewGroup添加布局动画（五）

    Android动画效果之自定义ViewGroup添加布局动画（五）

    前言: 前面几篇文章介绍了补间动画.逐帧动画.属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢?今天结合自定义ViewGroup来学习一下布局动画.本文将通过对自定义图片选择控件设置动画为例来学习布局动画. 自定义一个显示多行图片的ViewGroup: 这里不再对自定义控件做解说,想了解的可以看下以下几篇文章  •Android自定义控件之基本原理(一)  •Android自定义控件之自定义属性(二)  •Android自定义控件之自定义组合控件(三)

  • WPF实现动画效果（二）之From/To/By动画

    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果(四)之缓动函数 WPF实现动画效果(五)之关键帧动画 WPF实现动画效果(六)之路径动画 WPF实现动画效果(七)之演示图板 正文 我们所实现的的动画中,很大一部分是让一个属性在起始值和结束值之间变化,例如,我在前文中实现的改变宽度的动画: var widthAnimation = new DoubleAnimat

  • Android Animation实战之一个APP的ListView的动画效果

    Android Animation实战之一个APP的ListView的动画效果

    熟悉了基础动画的实现后,便可以试着去实现常见APP中出现过的那些精美的动画.今天我主要给大家引入一个APP的ListView的动画效果: 当展示ListView时,Listview的每一个列表项都按照规定的动画显示出来. 说起来比较抽象,先给大家看一个动画效果,这是APP窝牛装修的ListView显示动画: 有木有觉得很酷炫?有木有啊!? 一.Layout Animation     所谓的布局动画,其实就是为ViewGroup添加显示动画效果,主要用过LayoutAnimationContro

  • Android 仿余额宝数字跳动动画效果完整代码

    Android 仿余额宝数字跳动动画效果完整代码

    一:想都不用想的,有图有真相,看着爽了,在看下面源码 二:实例源码分析 ①:首先定义接口 package com.demo.tools.view; /** * 数字动画自定义 * * @author zengtao 2015年7月17日 上午11:48:27 * */ public interface RiseNumberBase { public void start(); public RiseNumberTextView withNumber(float number); public R

随机推荐