SilverLight开发系列第3步:制作鼠标跟随效果,顺便熟悉一些基本概念:群组 和 动画

简介:

上一篇:SilverLight开发系列第2步:使用vs2008和Blend 2.5打造Hellow World程序

 

SL 2.0 目前扩展到了5种用来布局的群组(Group):GridCanvasStackPanelScrollViewerBorder。Blend 2.5把它们放在一个工具位上。

我自己的理解,简单来说,Grid相当于Html的表格(<table>),用来进行复杂布局(html的table多行多列、嵌套,在web2.0没来之前,我们一直用的布局方式);Canvas就是一张单行单列的简单表格;StackPanel相当于单列多行、或者单行多列的表格;ScrollViewer是带滚动条的表格;border是只有边框的布局对象(不带背景的)。良好的习惯,一个页面至少带一个Group对象。当然你一定不放Group对象也行,只是做效果、定位等会麻烦很多。

 

SL2.0 分两种基本动画类别:“From/To/By”动画关键帧动画(做过flash的朋友对于关键桢动画都有所了解)。这两种类别是纯概念,NET3.5框架没有具体实现他们的基类(可能我没发现)。下表描述了动画类别和命名约定

类别 描述 命名约定
"From/To/By" 动画 在开始值和目标值之间的动画,或者给开始值添加一个偏移值。
  • 要指定开始值,设置动画的 From 属性。
  • 要指定结束值,设置动画的 To 属性。
  • 要指定偏移值,设置动画的 By 属性。

本部分中的例子使用这些动画,因为他们使用起来都是最简单的。

<Type>Animation
关键帧动画 通过使用关键帧对象在指定的一系列值之间进行动画。关键帧动画比 From/To/By 动画更强大,这是因为你可以指定任意数目的目标值,甚至控制它们的内插方法。某些类型只能使用关键帧动画。 <Type>AnimationUsingKeyFrames

 

SL2.0 按变化效果(属性)分,有三种常用动画对象(Animation Object),位于NET3.5框架的System.Windows.Media.Animation名称空间下。动画对象都是继承自时间线(Timeline对象,借鉴的Flash的概念)。

 下表显示了几张常见的动画类型和他们使用的属性。

属性类型 对应的基本 From/To/By 动画 对应的关键帧动画 使用例子

Color

ColorAnimation

ColorAnimationUsingKeyFrames

改变颜色

Double

DoubleAnimation

DoubleAnimationUsingKeyFrames

改变高度和宽度

Point

PointAnimation

PointAnimationUsingKeyFrames

旋转

 

概念可能有点枯燥,这两种基本概念对以后的学习都很重要。如果暂时不理解也无所谓。

 

下面跟我来一起做一个简单的鼠标跟随效果。目前Blend2.5支持PNG,JPG两种常用WEB用图片格式,GIF不支持,其他格式未测试。

新建一个项目,新建一个Images目录,拷贝一个png鼠标图象


然后拖放到工作区中。

 

 

 Canvas背景可以设置。首先选择

 

进入属性面板,看到Background了吧:)自己去玩玩 。

 

 

这些好了之后,选择Page.xaml,点右键 ,选择“Edit in Visual Studio”进入VS2008。

 

给Canvas和图片设置x:Name,并给Canvas添加MouseMove事件。XAML和CS代码分别如下。

 

复制代码
< UserControl
    
xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class
="MouseFollow.Page"  xmlns:MouseFollow ="clr-namespace:MouseFollow" >     
    
< Canvas  x:Name ="bg"  Height ="800"  Width ="1024"  Background ="Gray"  MouseMove ="bg_MouseMove" >
        
< Image  x:Name ="myImage"  Canvas.Left ="180"  Canvas.Top ="62"  Height ="26.663"  Width ="26.663"  Source ="Images/cursor.png"  Stretch ="Fill" />
    
</ Canvas >
</ UserControl >
复制代码

 注意我删除了UserControl的高度和宽度属性,为的是让他自动适应浏览器高宽。仅仅是让UserControl自动适应,在本例Canvas不会自适应浏览器高宽。

 

复制代码
namespace  MouseFollow
{
    
public   partial   class  Page : UserControl
    {
        
public  Page()
        {
            
//  Required to initialize variables
            InitializeComponent();
        }

        
private   void  bg_MouseMove( object  sender, MouseEventArgs e)
        {
            Point p 
=  e.GetPosition(sender  as  FrameworkElement); // 获取鼠标位置            
            myImage.SetValue(Canvas.LeftProperty, p.X); // 设置鼠标图象x坐标
            myImage.SetValue(Canvas.TopProperty, p.Y); // 设置鼠标图象y坐标
            bg.Cursor  =  Cursors.None; // 在画布上隐藏鼠标
            myImage.Cursor  =  Cursors.None; // 这里加一个,在图片上也隐藏鼠标
        }
    }
}
复制代码

cs代码我都写注释了,应该很好懂。只要熟悉了WPF的类库,SL开发不难。

 

最后测试效果看看,成功!

 


 

最后附上源码MouseFollow.rar 


本文转自Kai的世界,道法自然博客园博客,原文链接:http://www.cnblogs.com/kaima/archive/2008/08/20/1270668.html,如需转载请自行联系原作者。

目录
相关文章
|
容器
Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)
原文:Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)   Silverlight的基础动画包括偏移、旋转、缩放、倾斜和翻转动画,这些基础动画毫无疑问是在Silverlight中使用得最多的动画效果,其使用也是非常简单的。
1019 0
|
容器 数据可视化 内存技术
Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)
原文:Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)   用户界面组件、图像元素和多媒体功能可以让我们的界面生动活泼,除此之外,Silverlight还具备动画功能,它可以让应用程序“动起来”。
820 0
Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)
原文:Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)   Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平、垂直方向的倾斜变化动画效果。
848 0
|
容器
Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations)
原文:Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations)   正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Blend下能够设计出很多满意的动画作品,或许他具体是怎么实现的,通过什么方式实现的我们还是一无所知。
948 0
Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)
原文:Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)   模糊效果(BlurEffect)与阴影效果(DropShadowEffect)是两个非常实用和常用的两个特效,比如在开发相册中,可以对照片的缩略图添加模糊效果,在放大照片的过程中动态改变照片的大小和模糊的透明度来达到一个放大透明的效果。
1091 0
Silverlight & Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化、波感特效
原文:Silverlight & Blend动画设计系列六:动画技巧(Animation Techniques)之对象与路径转化、波感特效   当我们在进行Silverlight & Blend进行动画设计的过程中,可能需要设计出很多效果不一的图形图像出来作为动画的基本组成元素。
1053 0
|
API
Silverlight & Blend动画设计系列十:Silverlight中的坐标系统(Coordinate System)与向量(Vector)运动
原文:Silverlight & Blend动画设计系列十:Silverlight中的坐标系统(Coordinate System)与向量(Vector)运动   如果我们习惯于数学坐标系,那么对于Silverlight中的坐标系可能会有些不习惯。
1262 0
|
UED
Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)
原文:Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)   Silverlight中的动画(Animation)与视图状态管理(Visual State Manager) 结合使用是非常常见的,动画用于管理对象在某段事件段内执行的动画动作,视图状态管理则用于控制对象在多个不同的视觉状态之间切换、导航。
800 0
Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)
原文:Silverlight & Blend动画设计系列八:拖放(Drag-Drop)操作与拖放行为(DragBehavior)   在Silverlight中自身并没有提供拖放功能的相关实现,要实现拖放功能得借助其事件支持(MouseLeftButtonDown、MouseLeftButtonUp和MouseMove)来完成,实际应用中我们可以通过行为(Behavior)特性将拖放操作封装为行为,这样可达到代码复用的效果。
1079 0
Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)
原文:Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)   平时我们所看到的雪花(Falling Snow)飘飘的效果实际上也是一个动画,是由许多的动画对象共同完成的一个界面效果。
966 0

热门文章

最新文章

下一篇
DataWorks