Silverlight动画显示Line线

目的:在silverlight中显示两点之间的连线,要求动画显示连线效果。

如果需实现动画效果不得不了解,Storyborad对象:

Storyboard

Silverlight

通过时间线控制动画,并为其子动画提供对象和属性目标信息。

XAML

<Storyboard   ...>
  oneOrMoreChildTimelines
</Storyboard>

XAML 值



描述


oneOrMoreChildTimelines


从 Timeline 派生的以下对象元素中的一个或多个:Storyboard、ColorAnimationColorAnimationUsingKeyFramesDoubleAnimationDoubleAnimationUsingKeyFramesPointAnimation或 PointAnimationUsingKeyFrames。 在运行时访问 Children 属性时,此处定义的对象元素成为 Children 集合的成员。

从微软官网上定义,我们可以知道这个Storyborad正是实现动画的一个重要的元素。

备注

在对象加载或要启动、暂停、继续和停止动画时,可以使用 Storyboard 对象的交互式方法来自动启动演示图板。

Storyboard 是 Resources 属性唯一支持的资源类型。

从微软官网上我们得到这个东西需要可以定义一些诶设置在Canvas.Resources节点下,官网给出了一个Rectangle颜色变化的一个例子:

 1 <Canvas
 2   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 4   <Rectangle
 5     x:Name="MyAnimatedRectangle"
 6     Width="100"
 7     Height="100"
 8     Fill="Blue">
 9     <Rectangle.Triggers>
10
11       <!-- Animates the rectangle‘s opacity. -->
12       <EventTrigger RoutedEvent="Rectangle.Loaded">
13         <BeginStoryboard>
14           <Storyboard>
15             <DoubleAnimation
16               Storyboard.TargetName="MyAnimatedRectangle"
17               Storyboard.TargetProperty="Opacity"
18               From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
19           </Storyboard>
20         </BeginStoryboard>
21       </EventTrigger>
22     </Rectangle.Triggers>
23   </Rectangle>
24 </Canvas>

示例解读:

在Canvas下有一个长100px宽100px的的Rectangle对象,在Rectangle的Targegers节点下,定义了一个动画规则,该动画是用来修改Rectangle的透明度(Opacity)属性的,

设置透明度在5秒内按照DoubleAnimation的方式从1.0变化到0.0,且不重复播放。

有了这样的一个例子,我们知道我们要实现Line动态显示效果,就必不可少要用到的对象有Storyboard对象,且要在该对象下制定一个修改X2,Y2的方式(是按照DoubleAnnimation还是ColorAnimation,还是其他方式)

下边我们定一个额Line让他初始化的点在500,500处,当开始启动播放时,从500,500一直画到(200,200)处:

 private void myButton_Click(object sender, RoutedEventArgs e)
        {
            Line myLine = new Line();

            myLine.X1 = 500;
            myLine.Y1 = 500;
            myLine.X2 = 500;
            myLine.Y2 = 500;

            myLine.Stroke = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
            myLine.Fill = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));

            // 把矩形加入到Canvas中
            this.cnsDesignerContainer.Children.Add(myLine);

            // 创建二个double型的动画,并设定播放时间为2秒
            Duration duration = new Duration(TimeSpan.FromSeconds(2));
            DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
            DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();

            myDoubleAnimation1.Duration = duration;
            myDoubleAnimation2.Duration = duration;

            // 创建故事版,并加入上面的二个double型动画
            Storyboard sb = new Storyboard();
            sb.Duration = duration;

            sb.Children.Add(myDoubleAnimation1);
            sb.Children.Add(myDoubleAnimation2);

            // 设置动画的Target目标值
            Storyboard.SetTarget(myDoubleAnimation1, myLine);
            Storyboard.SetTarget(myDoubleAnimation2, myLine);

            // 设置动画的变化属性
            Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(X2)"));
            Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Y2)"));

            myDoubleAnimation1.To = 200;
            myDoubleAnimation2.To = 200;

            if (!cnsDesignerContainer.Resources.Contains("unique_id"))
            {
                // 将动画版加入Canvas资源,注意:这里的unique_id必须是资源中没有的唯一键
                cnsDesignerContainer.Resources.Add("unique_id", sb);
                sb.Completed += new EventHandler(sb_Completed);

                // 播放
                sb.Begin();
            }
            else
            {
                sb = null;
                cnsDesignerContainer.Children.Remove(myLine);
            }
        }

        void sb_Completed(object sender, EventArgs e)
        {
            // 播放完成后,移除资源,否则再次点击时将报错
            cnsDesignerContainer.Resources.Remove("unique_id");
        }

显示的效果正是画线的动画显示方式。

时间: 2024-11-06 13:10:43

Silverlight动画显示Line线的相关文章

VML画连线箭头,line线加粗

一.什么是VML VML相当于浏览器的画笔,它可以在浏览器中画出任何你想要的图形:小到直线.圆形.圆弧.曲线.矩形.圆角矩形.多边形:大到一张图画.一个动画.甚至于一个游戏.题中既以标明为简明教程,下边我们只限于讨论使用VML在浏览器中画一些直线.圆形.圆弧等小图. VML是微软1999年前(具体时间不详)制作推出的,并集成到了IE5+浏览器,同样也是Microsoft Office Art(艺术图型,如word的艺术文字)的核心结构.VML由微软Visio.Autodesk.Macromedi

Silverlight动画的基本知识、关键帧动画

基础知识 (一)动画:是快速播放一系列图像(其中每个图像与下一个图像略微不同)给人造成的一种幻觉 (二)动画类型:两类    (1)From/To/By动画:在起始值和结束值之间进行动画处理.      (2)关键帧动画:在使用关键帧对象指定的一系列值之间播放动画 (三) 动画是时间线:所有动画均继承自 Timeline 对象,因此所有动画都是专用类型的时间线.有以下重要属性: (1)TargetName:指定要进行动画处理的对象        (2)TargetProperty:指定要进行动画

EVC编程点滴-GIF动画显示类

此功能在我这个项目中,主要是显示让用户等待的提示.如开机过程.待机界面调用一个系统应用的过程.还有就是操作大尺寸图片的过程. 刚开始是用自定义的一个窗体来提示用户的,功能也可以实现,但美观度不够.所以才花了一定时间,对网上这个类进行研究.最终成功应用于项目中. 这个类的实现,主要是参考网上一个名为CGif89a类的实现. 此类在EVC4工程中可以正常使用. 索引: 1) GIF显示类头文件 2) GIF显示类的实现 3) 调用CGIFShow类示例 (1) 定义全局变量 (2) 在窗体的WM_C

Js_动画显示背景图片

jAni是一个可以动画显示背景图片的jQuery插件.这个插件基本上是GIF动画的一个替代品,但是他有他的好处.所有浏览器都支持GIF形式的动画格式,而且也不需要额外的javaScript代码和标记.但是不好的一点是,GIF格式的图片只有256色.而且你不能控制图片的显示.这个插件通过载入垂直的GIF帧,然后改变容器的background-postion来显示动画,这样你就可以自由控制了. 特色 轻量级的脚本 很容易使用 可以通过CSS完全定制 所有浏览器都支持 如何使用 1.下载脚本,并包含j

js动画显示背景图片

jAni是一个可以动画显示背景图片的jQuery插件.这个插件基本上是GIF动画的一个替代品,但是他有他的好处.所有浏览器都支持GIF形式的动画格式,而且也不需要额外的javaScript代码和标记.但是不好的一点是,GIF格式的图片只有256色.而且你不能控制图片的显示.这个插件通过载入垂直的GIF帧,然后改变容器的background-postion来显示动画,这样你就可以自由控制了. 特色 轻量级的脚本 很容易使用 可以通过CSS完全定制 所有浏览器都支持 如何使用 1.下载脚本,并包含j

Silverlight动画学习笔记(三):缓动函数

(一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效果,但可能需要执行大量的工作,并且与使用算术公式相比动画的精确性将降低. (三)实例讲解: 1 <UserControl x:Class="AnimationStudy.EasingFunctionAnimation" 2 xmlns="http://schemas.mic

【笔记】动画显示窗体

实例说明 当用户启动程序后,普通的程序窗口都是瞬间显示到屏幕上,这样未免有些生硬.如果窗口能够慢慢的展现在用户面前,将会是什么样的效果?本例设计的是一个动画显示的窗体,该程序运行后,窗体是慢慢的以拉伸的效果显示到用户的面前.当关闭时也是一样慢慢的消失. 技术要点 Windows提供了一个API函数Animate Window,该函数可以实现窗体的动画效果,AnimateWindow函数在C#中的声明如下 1 [DllImportAttribute("user32.dll")] 2 pr

可执行程序无法在Linux上运行,显示line 1: syntax error: word unexpected (expecting &quot;) .

[问题]用arm-linux-gcc编译出来的可执行文件clkCtl,下载到板子上,在Linux下不能运行:./clkCtl: line 1: syntax error: word unexpected (expecting ")") [解决过程]1.网上有人也遇到此问题:Syntax error: word unexpected (expecting ")")http://hi.baidu.com/dsfire/blog/item/5d922458886ad589

基于css3的鼠标经过动画显示详情特效

之前为大家分享过一款基于jquery的手风琴显示详情,今天给大家分享基于css3的鼠标经过动画显示详情特效.这款实例鼠标经过的时候基于中间动画放大,效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="blocks"> <li>Vakmanschap en ambacht<div class="popup"> <span> <h3> Vakmanschap