当我们在进行Silverlight & Blend进行动画设计的过程中,可能需要设计出很多效果不一的图形图像出来作为动画的基本组成元素。然而在设计过程中可能会出现许多的问题,比如当前绘制了一个椭圆,但是在动画中仅仅只需要椭圆的一半或是更多更少的部分用作与动画元素,这时候就需要对椭圆对象进行相应的处理才能满足我们的需求,那到底该怎么做才能实现最终想要的效果呢?本篇将介绍在Microsoft Expression Blend中进行动画设计的一些常用的功能点和动画设计技巧。
一、转换对象为路径
将一个对象元素转化为路径是非常有用的,通过路径选择工具可以将转化后的路径对象进行任意拉动变形,以达到理想的设计效果。可以通过Blend菜单中的对象-->路径-->转换为路径以实现对象到路径的转换,也可以使用下图所示的方法进行对象到路径的转换:
就以上面截取椭圆中的一部分为例,就需要将圆(Ellipse)转化为路径后才能才能通过路径工具对路径进行拖动变形,最终以实现想要的图形效果。如下图所示就是对椭圆进行变形处理后将其多余的部分剪切掉,实现了最终的图形效果:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><EllipseHeight="174"Width="240"Canvas.Left="64"Canvas.Top="274"Fill="#FF87A50F"/>
在XAML编码级则将会从Ellipse对象转化为Path对象,如上图最终的图形效果Path对应的XAML编码为:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><PathFill="#FF87A50F"Stretch="Fill"Height="174"Width="240"Canvas.Left="64"Canvas.Top="274"Data="M240,87C240,135.04877186.27417,174120,174C53.72583,1740,135.048770,87C0,38.95122553.72583,0120,0C186.27417,0240,38.951225240,87z"/>
二、波感特效
波感效果也称幽灵效果,如果为某个对象使用了波感效果,通过对象某种行为触发了该效果则对象边框将会出现像波浪一样的效果,直到动画执行完成后隐藏行为对象。如果从技术实现的角度来理解的话,也就是一个对象的的放大动画行为,通过在放大过程中动态改变其透明度来实现。如果不清楚波感效果具体是什么样的效果的可以查看http://eyeonearth.cloudapp.net/这个站点,点击里面的菜单导航(my location,sms,about,help)中的任意一个就可以进行在线体验。
比如下面的XAML定义,在界面上绘制了一个渐变填充的圆形:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><EllipseHeight="48"x:Name="RedBall"Width="48"Canvas.Left="355"Canvas.Top="274"MouseLeftButtonUp="RedBall_MouseUp">
<Ellipse.Fill>
<RadialGradientBrushGradientOrigin="0.479999989271164,0.46000000834465">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransformX="-0.07"Y="-0.21"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStopColor="#FFFFFFFF"/>
<GradientStopColor="#FFFF0000"Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
接下来对这个圆形对象进行波感效果设计,本文前面说过波感效果其实就是一个缩放动画,对一个和基础对象一样的对象进行放大到一定程度后将其隐藏。这里需要将上面设计好的圆复制一个作为动画效果设计对象,如下图:
缩放动画效果可以通过ScaleTransform来实现,透明度则使用Opacity属性进行设置,要实现波感效果主要就是通过动画在一定的时间内动态的改变这两项的属性值,ScaleTransform的X,Y默认为1,Opacity默认也是1。
首先创建一个动画容器时间线,然后移动时间轴到1秒的位置,选中复制后的圆形对象设置ScaleTransform的X,Y为3,Opacity的属性值为0,以实现一个放大透明的动画效果。当对象完全透明后就相当于隐藏了,其实也可将其Visibility属性为Collapsed,将对象隐藏不呈现。如下图:
主要就是设置了三个属性值,这三个属性值都在动画过度中动态改变,通过Blend中进行设置后可以看到生成了如下XAML编码:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />--><Storyboardx:Name="RedBall_Clicked"Completed="RedBall_Clicked_Completed">
<DoubleAnimationUsingKeyFramesStoryboard.TargetName="RedBall_Copy"
Storyboard.TargetProperty="(UIElement.Opacity)"BeginTime="00:00:00">
<SplineDoubleKeyFrameKeyTime="00:00:01"Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFramesStoryboard.TargetName="RedBall_Copy"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
BeginTime="00:00:00">
<SplineDoubleKeyFrameKeyTime="00:00:01"Value="3"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFramesStoryboard.TargetName="RedBall_Copy"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
BeginTime="00:00:00">
<SplineDoubleKeyFrameKeyTime="00:00:01"Value="3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
通过查看前面的代码片段可以看到,给圆形对象添加了事件处理:MouseLeftButtonUp="RedBall_MouseUp",也就是点击了圆对象后需要启动动画的执行:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->privatevoidRedBall_MouseUp(objectsender,MouseButtonEventArgse)
{
RedBall_Copy.Visibility=Visibility.Visible;
RedBall_Clicked.Begin();
}
同样也给动画添加了完成的事件处理:Completed="RedBall_Clicked_Completed",当动画执行完成后做什么操作。需要做的就是将圆形对象的相关属性设置为最初的属性值,以便在进行第二次动画的时候能够正确无误的实现其效果。
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->privatevoidRedBall_Clicked_Completed(objectsender,EventArgse)
{
RedBall_Clicked.Stop();
RedBall_Copy.Opacity=1;
RedBall_Copy.Visibility=Visibility.Collapsed;
}
OK,到这里就完成了整个波感特效的设计制作,最终的运行效果如下图所示,如果你对波感特效感兴趣,建议你下载本文示例代码运行,进一步的体验波感特效。
分享到:
相关推荐
刚接触WPF,初次使用Blend做WPF的动画效果,学习Blend制作WPF的循环动画、路径动画,上传是为了领勋章...
AlphaBlend图片透明过渡动画特效-精品源代码
[最新出版Silverlight及Blend学习电子书教程合集] [最新出版Silverlight及Blend学习电子书教程合集]
Foundation Expression Blend 4 with Silverlight 4 takes you through your first steps in creating Rich Internet Applications (RIAs) using the latest release of Microsoft’s technology. You’ll explore ...
Silverlight4 Blend SDK 中文文档
这个代码详细示例了API函数AlphaBlend把图片透明过渡的动画特效,一个比较易学的示例.
Blend 5 for Silverlight5 预览版 6月底过期不能用了,新版本又没有,就把它破解了下,把dll覆盖安装目录下的dll即可。经试验,没有啥功能限制,完全可用。
silverlight_blend动画实例
使用Expression Blend 创建的Silverlight时钟
Blend silverlight Blend silverlight Blend silverlight Blend silverlight
Silverlight及Blend的电子教学文档
主要利用blend制作动画,生成WPF应用程序
本次项目采用Silverlight实现一个简单的个人多媒体平台,通过该平台,用户可以搜索自己喜欢的多媒体文件,在线播放(其播放质量优于Flash);还可以参与评论、上传自己的作品。 技能点描述: 1.Silverlight常用控件...
[Apress] Expression Blend 4 高级程序设计 (英文版) [Apress] Pro Expression Blend 4 (E-Book) ☆ 出版信息:☆ [作者信息] Andrew Troelsen [出版机构] Apress [出版日期] 2011年03月04日 [图书页数] 400页...
所有的blend4特效入门
PDF 书籍: Expression Blend 4中文版WPF和Silverlight项目设计基础。
Expression Blend 3 Silverlight
blend开发,让你的界面更绚丽 Expression Blend实战开发系列主要从使用blend的角度,全面讲述实际项目开发中使用blend的手法,如何快速开发,彻底的分离界面和后台代码的耦合。
Total-Training出品的Microsoft Expression Blend 2精华教程,开发与编程类别,初、中级,适用于Windows与Mac OS平台,由Dante Gagne主讲,时长6个小时。在本教程中,将跟随拥有丰富经验的 Dante Gagne讲师学习...
1.2 安装Silverlight 4工具包 1.3 安装Expression Blend 4 1.4 安装SQL Server 2008 Express 第二章 Expression Blend入门 2.1 概述 2.2 视图 2.3 工作区 2.4 主要面板 第三章 布局和导航 3.1 布局原则 3.2 导航模板...