Silverlight制作逐帧动画
打算用sl来制作一个游戏,我曾经有flash开发游戏的经验.现在想用sl来做.打算记录下我开发游戏探索的过程.
打开http://www.emu-zone.org/www3/host/emugif/ 这个网站.这里有很多游戏的gif动画.选一个存到本地用Fireworks打开.将其中的不同帧的图片取出做成一个png的图形.如下图所示:
![](/images/cnblogs_com/nasa/silverlight/clip_image002.jpg)
用vs08建立sl项目.
![](/images/cnblogs_com/nasa/silverlight/clip_image003.jpg)
新建立文件夹Controls.在这里我们放自定义用户控件.新建用户控件p.xaml
将刚才制作的png图片放入项目.
编辑用户控件
![](/images/cnblogs_com/nasa/silverlight/clip_image004.jpg)
Image图片的Stretch的属性设置为None.图片处理请参考TerryLee大侠的一步一步学Silverlight
2系列(28):图片处理.
将Image放入Canvas中
![](/images/cnblogs_com/nasa/silverlight/clip_image005.jpg)
在新建立的Canvas的外层制作一个矩形.刚好挡住其中的一个人物.
选中矩形和Canvas设置遮照.
![](/images/cnblogs_com/nasa/silverlight/clip_image006.jpg)
建立storyboard
![](/images/cnblogs_com/nasa/silverlight/clip_image007.jpg)
设置StoryBoard放大300倍这样方便处理.
![](/images/cnblogs_com/nasa/silverlight/clip_image008.jpg)
对Image进行操作.采用DiscreteDoubleKeyFrame设置其X坐标.
![](/images/cnblogs_com/nasa/silverlight/clip_image009.jpg)
至此动画制作完成
![](/images/cnblogs_com/nasa/silverlight/clip_image010.jpg)
打开http://www.emu-zone.org/www3/host/emugif/ 这个网站.这里有很多游戏的gif动画.选一个存到本地用Fireworks打开.将其中的不同帧的图片取出做成一个png的图形.如下图所示:
![](/images/cnblogs_com/nasa/silverlight/clip_image002.jpg)
用vs08建立sl项目.
![](/images/cnblogs_com/nasa/silverlight/clip_image003.jpg)
新建立文件夹Controls.在这里我们放自定义用户控件.新建用户控件p.xaml
将刚才制作的png图片放入项目.
编辑用户控件
![](/images/cnblogs_com/nasa/silverlight/clip_image004.jpg)
Image图片的Stretch的属性设置为None.图片处理请参考TerryLee大侠的一步一步学Silverlight
2系列(28):图片处理.
将Image放入Canvas中
![](/images/cnblogs_com/nasa/silverlight/clip_image005.jpg)
在新建立的Canvas的外层制作一个矩形.刚好挡住其中的一个人物.
选中矩形和Canvas设置遮照.
![](/images/cnblogs_com/nasa/silverlight/clip_image006.jpg)
建立storyboard
![](/images/cnblogs_com/nasa/silverlight/clip_image007.jpg)
设置StoryBoard放大300倍这样方便处理.
![](/images/cnblogs_com/nasa/silverlight/clip_image008.jpg)
对Image进行操作.采用DiscreteDoubleKeyFrame设置其X坐标.
![](/images/cnblogs_com/nasa/silverlight/clip_image009.jpg)
至此动画制作完成
![](/images/cnblogs_com/nasa/silverlight/clip_image010.jpg)