图解-Silverlight做一个简单的动画

简介: 简述:做一个最简单的动画,这里用到的Microsoft Expression Studio中的Design和Blend。首先在Design中做好你要做动画的图片,然后将图片导出为Silverlight的Xaml格式。
简述:
做一个最简单的动画,这里用到的Microsoft Expression Studio中的Design和Blend。首先在Design中做好你要做动画的图片,然后将图片导出为Silverlight的Xaml格式。用 Blend新建立一个Silverlight 2项目,将刚才生成的Xaml导入Blend。在Blend对导入的Xaml做创建控件、命名元素、制作动画状态等处理,简单的写一个控制动画状态的方 法,最终发布即可。
详解:
第一部分:从design到blend
首先先在Design中做好动画的图片。
选中图片,右键选择导出。

将导出图片格式设置为silverlight的Xaml格式,参数选择如图所示:
 
用Blend新建立Silverlight 2项目。将生成的Xaml插入“Grid”中。如图所示:


第二部分:从静态到动态
在Blend中右键点击刚才导入进来的图形,选择创建控件:

输入控件的名称:
在新创建的空间中给各个元素分组起好名字,这样能方便后期的识别和制作动画:
此时到了该制作动画的步骤了,这里使用了 VisualState“视图状态” 来做,关于视图状态的使用我专门写过一个 心得
看完后继续使用StoryBoard制作各个视图状态的动画。

第三部分:简单的控制
在刚才制作的控件所对应的cs文件中做一点简单的状态控制:

好了到这里所有的制作就完成了。按F5编译运行看效果吧。

这里是我的Demo地址

 源码下载

Get Microsoft Silverlight

 
作者:nasa
出处:nasa.cnblogs.com
联系:nasa_wz@hotmail.com
QQ:12446006

 

相关文章
|
C# 前端开发
silverlight,WPF动画终极攻略之阳光灿烂篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之阳光灿烂篇(Blend 4开发) 前面我们画了一只会飞动的小鸟,今天我们在目标是一个会发光的太阳。本章节的动画虽然简单,但是实现的效果可是一点也不打折。
1192 0
|
C#
silverlight,WPF动画终极攻略之会飞的小鸟篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之会飞的小鸟篇(Blend 4开发) 本教程基本涵盖了WPF和silverlight中的各种动画。先上张效果图。 声明下,这个做的不是让大家照搬的,只是让大家熟悉下动画效果,这个成品基本涵盖了sl里面所有的动画效果。
1407 0
|
C#
silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之迟来的第三章 动画整合篇(Blend 4开发) 有个问题想请教下大家,我仿了腾讯的SL版QQ,相似度95%以上。我想写成教程教大家怎么开发出来,会不会有版权什么问题的。
1162 0
|
前端开发 C#
silverlight,WPF动画终极攻略之白云飘,坐车去旅游篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之白云飘,坐车去旅游篇(Blend 4开发) 这章有点长,所以我分成了两章。这一章主要是准备工作,差不多算美工篇吧,这章基本不会介绍多少动画效果,主要讲的是blend中工具的使用,利用哪些工具做出哪些效果。
1264 0
|
前端开发 C#
silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发)
原文:silverlight,WPF动画终极攻略之番外 3D切换导航篇(Blend 4开发) 这篇介绍的是3D导航,点击图标,页面360°翻转的效果!有什么不足的欢迎大家指出来。 1.新建一个usercontrol,命名为menu. 2.按照下图设置一下属性。
1261 0
|
容器
Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)
原文:Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)   Silverlight的基础动画包括偏移、旋转、缩放、倾斜和翻转动画,这些基础动画毫无疑问是在Silverlight中使用得最多的动画效果,其使用也是非常简单的。
1028 0
|
容器 数据可视化 内存技术
Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)
原文:Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)   用户界面组件、图像元素和多媒体功能可以让我们的界面生动活泼,除此之外,Silverlight还具备动画功能,它可以让应用程序“动起来”。
827 0
Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)
原文:Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)   Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平、垂直方向的倾斜变化动画效果。
853 0
|
容器
Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations)
原文:Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations)   正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Blend下能够设计出很多满意的动画作品,或许他具体是怎么实现的,通过什么方式实现的我们还是一无所知。
953 0
Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)
原文:Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)   模糊效果(BlurEffect)与阴影效果(DropShadowEffect)是两个非常实用和常用的两个特效,比如在开发相册中,可以对照片的缩略图添加模糊效果,在放大照片的过程中动态改变照片的大小和模糊的透明度来达到一个放大透明的效果。
1095 0

热门文章

最新文章