用户界面组件、图像元素和多媒体功能可以让我们的界面生动活泼,除此之外,Silverlight还具备动画功能,它可以让应用程序“动起来”。实际上,英文中Animation这个单词的意思是给某物带来生命。在界面中添加动画效果,给人以印象深刻可视化提示,可以让用户的注意力集中到我们想让他们关注的地方。

  动画主要是通过计时器来完成,在Silverlight中开发动画程序通常是使用微软主推的设计工具Microsoft Expression Blend,Silverlight中提供了优秀的动画系统,我们可以通过Microsoft Expression Blend 快速的完成动画元素的设计制作,然后通过Visual Studio作为编码环境进行后面的管理动画定时器和刷新用户界面的工作。当使用Microsoft Expression Blend 时,可以用拖拽的方式在时间线中进行动画的定义,这样可以很容易快速定义负责的动画,因为 Microsoft Expression Blend 将自动生成对应的XAML代码。

   Silverlight中的偏移动画和Flash中的补间动画基本一样,其实很好理解,也就是一个动画元素(组件)从一个位置移动到另一个位置,这个过着中有三个关键点:动画起点动画终点动画时间。这三点可以理解为一个动画元素从始点坐标向终点坐标偏移的缓冲时间是多少。

  当我们定义好了动画元素后,可以直接通过Blend中的对象和时间线面板来为动画元素添加动画容器时间线(Storyboard),如下图所示:

      

  当动画容器时间线创建好后,只需要选中需要进行创建动画的元素,然后再属性面板下进行可视化属性设置就可以完成动画的创建,如下图示为创建元素darkMoon的偏移动画。

        

  通过上面的一系列操作设置后切换到XAML视图,可以发现在XAML编码文件里Blend自动生成了如下代码片段,其作用就是为名为“darkMoon”的动画元素创建两个方向(X,Y)的偏移动画。

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><Storyboard x:Name="Storyboard1">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="darkMoon"
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="280"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="darkMoon"
        Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <EasingDoubleKeyFrame KeyTime="00:00:01" Value="-245"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

        

  上图为动画执行过程截图,在某些情况下要实现一些动画效果是不能预先确定的,这就需要在程序编码中去动态的创建动画效果。使用Blend进行动画设计是非常简单的,尤其是对Adobe Flash熟悉的人员,其实在程序编码中使用程序创建动画也一样的简单,相比之下只是需要人为的去编写很多的程序代码,另外就是通过程序代码动态的创建动画效果需要开发人员对Silverlight的动画框架非常熟悉,只有在熟练应用Silverlight动画框架所提供的动画接口的情况下才能够和使用Blend设计动画一样随心应手实现各种不同的动画效果。

  编写程序代码创建动画其实也是非常简单的,只要理清了思路和熟练应用Silverlight的动画框架提供的编程

接口就可以完成动画的开发。首先需要弄清楚动画容器时间线、动画动作、动画类型、动画效果等基本概念。就以本篇的示例来分析,通过程序动态的创建动画效果的代码如下:

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->

/// <summary> /// 创建动画 /// </summary>

private void CreateStoryboard()

{

     //元素当前所在的坐标点

    Point currentPoint = new Point(Canvas.GetLeft(darkMoon), Canvas.GetTop(darkMoon));

    //目标点坐int标     Point point = new Point(280, -245);

  //创建动画容器时间线     Storyboard storyboard = new Storyboard();

DoubleAnimation doubleAnimation = new DoubleAnimation();

//创建X轴方向动画     doubleAnimation.From = currentPoint.X;     doubleAnimation.To = point.X;     d

  oubleAnimation.Duration = new Duration(new TimeSpan(0, 0, 1));

  Storyboard.SetTarget(doubleAnimation, darkMoon);

   Storyboard.SetTargetProperty(doubleAnimation,         new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"));     storyboard.Children.Add(doubleAnimation);

//创建Y轴方向动画     doubleAnimation = new DoubleAnimation();

  doubleAnimation.SetValue(DoubleAnimation.FromProperty, currentPoint.Y);

  doubleAnimation.SetValue(DoubleAnimation.ToProperty, point.Y);

   doubleAnimation.SetValue(DoubleAnimation.DurationProperty, new Duration(new TimeSpan(0, 0, 1)));

   Storyboard.SetTarget(doubleAnimation, darkMoon);

   Storyboard.SetTargetProperty(doubleAnimation,         new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"));     storyboard.Children.Add(doubleAnimation);

storyboard.Begin();

}

偏移动画(TranslateTransform)的更多相关文章

  1. Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)

    用户界面组件.图像元素和多媒体功能可以让我们的界面生动活泼,除此之外,Silverlight还具备动画功能,它可以让应用程序“动起来”.实际上,英文中Animation这个单词的意思是给某物带来生命. ...

  2. [UE4]AnimOffset偏移动画

    在每个在偏移动画要用到的动画文件中设置中设置上图属性. 也可以选择多个动画文件:

  3. [UE4]计算AimOffset偏移动画的角度

  4. UIView动画效果之----翻转.旋转.偏移.翻页.缩放.取反的动画效

    翻转的动画 //开始动画 [UIView beginAnimations:@"doflip" context:nil]; //设置时常 [UIView setAnimationDu ...

  5. Processing 网格(棋盘格)无限偏移纹理动画

    过火 再度出击!这次我们要玩得更火一点---把静帧变动画.没错,将棋盘格动起来!看一下效果: 这是一个经典的无限偏移动画,在很多2d横版射击游戏中都会采用的技术.如何在Processing中实现,有两 ...

  6. WPF学习之绘图和动画

    如今的软件市场,竞争已经进入白热化阶段,功能强.运算快.界面友好.Bug少.价格低都已经成为了必备条件.这还不算完,随着计算机的多媒体功能越来越强,软件的界面是否色彩亮丽.是否能通过动画.3D等效果是 ...

  7. 【译】仿Taasky的3D翻转菜单动画实现

    最终效果 最终效果 开始 首先下载并打开一个事先搭好架子的Demo,然后来分析一下.这个Demo包含一个主页和详情页,其中MenuViewController继承自UITableViewControl ...

  8. WPF学习之绘图和动画--DarrenF

    Blend作为专门的设计工具让WPF如虎添翼,即能够帮助不了解编程的设计师快速上手,又能够帮助资深开发者快速建立图形或者动画的原型. 1.1   WPF绘图 与传统的.net开发使用GDI+进行绘图不 ...

  9. Silverlight & Blend动画设计系列十:Silverlight中的坐标系统(Coordinate System)与向量(Vector)运动

    如果我们习惯于数学坐标系,那么对于Silverlight中的坐标系可能会有些不习惯.因为在Silverlight中的坐标系与Flash中的坐标系一样,一切都的颠倒的.在标准的数学坐标系中,X轴表示水平 ...

随机推荐

  1. 重读APUE(15)-pthread_cond_wait与while循环

    即使pthead_cond_wait()和pthread_cond_timewait()没有错误返回,等待的条件也可能是假的:即使pthread_cond_timewait()返回了超时错误,关联的条 ...

  2. docker 命令 记录

    获取指定容器的ip docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' container_nam ...

  3. form表单无刷新提交

    Ajax最大的特点就是可以不刷新页面而实现数据的通信及更改页面信息.那么用AJAX进行后台通信传递字符串还是可以的,遇到上传文件该怎么办呢?基于安全考虑,JS是不能直接进行文件操作的,只好用原始的fr ...

  4. JVM的线程

    我们使用java命令来运行一个程序,那么就需要启动JVM , 而jvm的启动就相当于启动了一个进程 , 而这个进程在启动的时候会自动启动一个线程,由这个线程去调用main方法,而这个线程就是主线程 ; ...

  5. pycharm连接linux版python

    1.建立连接 2.测试连接 3.同步目录 4.查看同步的目录 5.设置永久同步目录 6.设置连接 可以看到添加进来了 参照文档: https://www.cnblogs.com/xiao-apple3 ...

  6. keytool命令的使用

    ## 打印所有证书指纹.如果是cacerts,则指本机安装的jdk的key store:如果是一个jks文件,则是其他key store keytool -list -keystore <cac ...

  7. 【leetcode】504. Base 7

    problem 504. Base 7 solution: class Solution { public: string convertToBase7(int num) { ) "; st ...

  8. 关于react中遇到的问题记录说明

    5.el表达式 dataSource = (userPage, orgList) => userPage.map(item => { const org = orgList.find(or ...

  9. golang web框架设计7:整合框架

    把前面写好的路由器,控制器,日志,都整合在一起 全局变量和初始化 定义一些框架的全局变量 var ( BeeApp *App AppName string AppPath string StaticD ...

  10. effective java(第三版)---读书笔记

    第一章 引言 < Effective Java>这本书并不厚,而且并不适合初学者,适合有一定的工作经验的java攻城狮.这本书不是百科全书式的JAVA 手册,而是试图在讲述如何正确.高效地 ...