Welcome

首页 / 软件开发 / Silverlight / Silverlight & Blend动画设计系列六

Silverlight & Blend动画设计系列六2011-04-20 博客园 BeniaoSilverlight & Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化、波感特效

当我们在进行Silverlight & Blend进行动画设计的过程中,可能需要设计出很多效 果不一的图形图像出来作为动画的基本组成元素。然而在设计过程中可能会出现许多的问题 ,比如当前绘制了一个椭圆,但是在动画中仅仅只需要椭圆的一半或是更多更少的部分用作 与动画元素,这时候就需要对椭圆对象进行相应的处理才能满足我们的需求,那到底该怎么 做才能实现最终想要的效果呢?本篇将介绍在Microsoft Expression Blend中进行动画设计 的一些常用的功能点和动画设计技巧。

一、转换对象为路径

将一个对象元素 转化为路径是非常有用的,通过路径选择工具可以将转化后的路径对象进行任意拉动变形, 以达到理想的设计效果。可以通过Blend 菜单中的对象-->路径-->转换为路径以实现 对象到路径的转换,也可以使用下图所示的方法进行对象到路径的转换:

Silverlight & Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化、波感特效

就以上面截取椭圆中的一部分为例,就需要将圆(Ellipse)转化为路径后才能才能通过路 径工具对路径进行拖动变形,最终以实现想要的图形效果。如下图所示就是对椭圆进行变形 处理后将其多余的部分剪切掉,实现了最终的图形效果:

Silverlight & Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化、波感特效

<Ellipse Height="174" Width="240" Canvas.Left="64" Canvas.Top="274" Fill="#FF87A50F"/>

在XAML编码级则将会从Ellipse对象转化为Path对象,如上图最终的图形效果Path对应的 XAML编码为:

<Path Fill="#FF87A50F" Stretch="Fill" Height="174" Width="240" Canvas.Left="64" Canvas.Top="274" Data="M240,87 C240,135.04877 186.27417,174 120,174 C53.72583,174 0,135.04877 0,87 C0,38.951225 53.72583,0 120,0 C186.27417,0 240,38.951225 240,87 z"/>