用户界面组件、图像元素和多媒体功能可以让我们的界面生动活泼,除此之外,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. mybatis参数形式

    1 使用map <select id="selectRole" parameterType="map" resultType="RoleMap& ...

  2. asp.net core spa应用(angular) 部署同一网站下

    需求:现在一个应用是前后端开发分离,前端使用angular,后端使用 asp.net core 提供api ,开发完成后,现在需要把两个程序部署在同一个网站下,应该怎么处理? 首先可以参考微软的官方文 ...

  3. BOM相关方法及属性

    browser objec tmodel浏览器对象模型 BOM里面的方法大多在window对象底下,window代表窗口,也就是说,在BOM里面大多调用window下面的东西. 1.open方法是wi ...

  4. Python 今天抽空学习了@Property

    1.@Property有啥用 1) @property使方法像属性一样调用 @property可以把一个实例方法变成其同名属性,以支持.号访问,它亦可标记设置限制,加以规范 2) @property成 ...

  5. 停止monkey的方法

    注意 Monkey启动后会不断地向被测对象发送随机事件流,直到事件执行完毕或者发生异常时才停止.在Monkey运行过程中,即便断开 与PC的连接,Monkey依然可以在手机上继续运行. 停止Monke ...

  6. Spring Aop(十一)——编程式的创建Aop代理之ProxyFactory

    转发地址:https://www.iteye.com/blog/elim-2397388 编程式的创建Aop代理之ProxyFactory Spring Aop是基于代理的,ProxyFactory是 ...

  7. 建立自己的数据类型——C结构体归纳

    一.建立结构体类型 1.申明结构体类型 struct 结构体名 { 成员表列(类型名 成员名:); }: 例如: struct Person { char name; int age; char se ...

  8. C#实现排列、组合

    排列组合的概念 排列:从n个不同元素中取出m(m≤n)个元素,按照一定的顺序排成一列,叫做从n个元素中取出m个元素的一个排列(Arrangement). 组合:从m个不同的元素中,任取n(n≤m)个元 ...

  9. JavaSE基础(四)--Java基本数据类型

    Java 基本数据类型 变量就是申请内存来存储值.也就是说,当创建变量的时候,需要在内存中申请空间. 内存管理系统根据变量的类型为变量分配存储空间,分配的空间只能用来储存该类型数据. 因此,通过定义不 ...

  10. 正式发布! .NET开发控件集ComponentOne 新版本加入Blazor UI

    近期,由葡萄城推出的ComponentOne .NET开发控件集正式发布最新版本! ComponentOne 是一套专注于企业 .NET开发.支持 .NET Core 平台,并完美集成于 Visual ...