zoukankan      html  css  js  c++  java
  • 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.ma所有,欢迎转载,转载请保留:
    • 出处:http://kaima.cnblogs.com
    • 作者:kai.ma
  • 相关阅读:
    nginx常用配置
    docker 启动常用容器命令
    win10 安装 docker
    Selenium IDE for Google Chrome
    Python use goto statement
    TCP:一个悲伤的故事
    gtx770测评
    三十而立——年终总结
    bilibili自定义调整视频播放速度
    linux-安装docker
  • 原文地址:https://www.cnblogs.com/kaima/p/1270668.html
Copyright © 2011-2022 走看看