zoukankan      html  css  js  c++  java
  • Silverlight实用窍门系列:20.后台CS代码中创建四种常用的动画效果【附带源码实例】

            在实际项目中,我们通常会在XAML代码中创建控件的动画效果,但在某一些特殊情况下,需要后台进行动画效果的自定义修改。那么我们就需要用到本节中讲述的相关动画效果自创建知识。在Silverlight中常用的动画创建方式有4种分别为DoubleAnimation,ColorAnimation,PointAnimation,DoubleAnimationUsingKeyFrames。

        •DoubleAnimation是控制控件的某一些Double值的属性的变化来形成动画的,比如让某个空间的Opactiy变大变小,就是透明度变大变小。
        •ColorAnimation是控制控件的颜色的渐变,从绿色变蓝色。
        •PointAnimation是控制控件的Point点位置的变化而操作控件的动画效果的。如本例中的中心点位置
        •DoubleAnimationUsingKeyFrames 这个是添加帧片段,在这些片段中控制了某个控件的某一些属性在时间轴上的变化

            DoubleAnimation,ColorAnimation,PointAnimation这三种动画基本上都有以下相似的属性:

        •TargetName(要进行动画动画处理的对象的名称)

        •TargetProperty(要进行动画动画处理的对象的属性)

        •BeginTime (触发动画的时间点)

        •From( 动画的起始值) 

        •To(动画的结束值) 

        •By(动画从起始值动画起始计算所需变化的总量)

        •Duration(时间线的持续时间)

        •RepeatBehavior (动画重复播放动画播放的时间、次数或类型)
            DoubleAnimationUsingKeyFrames动画则是其内部可以添加多种动画类型的关键帧分别是ColorAnimationUsingKeyFrames 、DoubleAnimationUsingKeyFrames 、PointAnimationUsingKeyFrames 等等,在这里不过多详述。

            现在我们首先看一个XAML文件,这里有4个按钮和4个可控制的控件通过点击不同的按钮我们调用不同的动画:

    <Canvas x:Name="LayoutRoot" Background="White">
    <Rectangle RadiusX="5" RadiusY="5" Fill="#FFE8BE59" Height="92" Name="rectangle1" Stroke="Black" StrokeThickness="1" Width="148" Canvas.Left="47" Canvas.Top="76" />
    <Button Canvas.Left="47" Canvas.Top="195" Content="开始DoubleAnimation动画" Height="23" Name="button1" Width="148" Click="button1_Click" />
    <Rectangle Canvas.Left="231" Canvas.Top="76" Fill="Green" Height="92" Name="rectangle2" RadiusX="5" RadiusY="5" Stroke="Black" StrokeThickness="1" Width="148" />
    <Rectangle Canvas.Left="414" Canvas.Top="76" Fill="DarkGoldenrod" Height="92" Name="rect" Opacity="0.1" RadiusX="5" RadiusY="5" Stroke="Black" StrokeThickness="1" Width="148" />
    <Button Canvas.Left="414" Canvas.Top="195" Content="开始ColorAnimation动画" Height="23" Name="button2" Width="148" Click="button2_Click" />
    <Button Canvas.Left="231" Canvas.Top="195" Content="开始ColorAnimation动画" Height="23" Name="button3" Width="148" Click="button3_Click" />
    <Button Canvas.Left="593" Canvas.Top="195" Content="开始PointAnimation动画" Height="23" Name="button4" Width="148" Click="button4_Click" />
    <Ellipse Canvas.Left="579" Canvas.Top="76" Height="92" Name="ellipse1" Fill="Blue" Stroke="Black" StrokeThickness="1" Width="183" >
    <Ellipse.Clip>
    <EllipseGeometry Center="100,100" x:Name="elgeome" RadiusX="90" RadiusY="60" />
    </Ellipse.Clip>
    </Ellipse>
    </Canvas>

            现在我们看MainPage.xaml.cs文件。在本代码中进行了相关的动画操作。我们再创建4个全局的故事板:

    //装载DoubleAnimation动画的故事板
    Storyboard sboard = new Storyboard();
    //装载ColorAnimation动画的故事板
    Storyboard colorboard = new Storyboard();
    //装载DoubleAnimationUsingKeyFrames动画的故事板
    Storyboard keyFrameboard = new Storyboard();
    //装载PointAnimation动画的故事板
    Storyboard pointboard = new Storyboard();

            DoubleAnimation类型动画的后台代码创建以及操作:

    #region 后台代码添加DoubleAnimation动画
    DoubleAnimation danima
    = new DoubleAnimation();
    //设置rectangle1矩形控件的透明度的Double类型数字变化
    danima.SetValue(Storyboard.TargetNameProperty, "rectangle1");
    danima.SetValue(Storyboard.TargetPropertyProperty,
    new PropertyPath("UIElement.Opacity"));
    //透明度从0.1到1
    danima.From = 0.1;
    danima.To
    = 1;
    danima.Duration
    = new Duration(new TimeSpan(0, 0, 5));
    sboard.Children.Add(danima);
    this.LayoutRoot.Resources.Add("Storyboard", sboard);
    #endregion

            ColorAnimation类型动画的后台代码创建以及操作:

    #region 后台代码添加ColorAnimation动画
    ColorAnimation coloranima
    = new ColorAnimation();
    //设置rectangle2矩形控件的颜色的改变动画
    coloranima.SetValue(Storyboard.TargetNameProperty, "rectangle2");
    coloranima.SetValue(Storyboard.TargetPropertyProperty,
    new PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"));
    //设置颜色动画从绿色变到蓝色
    coloranima.From = Colors.Green;
    coloranima.To
    = Colors.Blue;
    colorboard.Children.Add(coloranima);
    LayoutRoot.Resources.Add(
    "colorboard", colorboard);
    #endregion

            PointAnimation类型动画的后台代码创建以及操作:

    #region 后台代码添加PointAnimation动画
    PointAnimation pointanima
    = new PointAnimation();
    //EllipseGeometry的中心点的变化
    pointanima.From = new Point(100, 100);
    pointanima.To
    = new Point(200, 100);
    //经过2秒的时间
    pointanima.Duration = new TimeSpan(0, 0, 2);
    //设置EllipseGeometry控件的中心点EllipseGeometry.CenterProperty位置的变化
    Storyboard.SetTarget(pointanima, elgeome);
    Storyboard.SetTargetProperty(pointanima,
    new PropertyPath(EllipseGeometry.CenterProperty));
    pointboard.Children.Add(pointanima);
    LayoutRoot.Resources.Add(
    "pointboard", pointboard);
    #endregion

            DoubleAnimationUsingKeyFrames类型动画的后台代码创建以及操作:

    #region 后台代码添加DoubleAnimationUsingKeyFrames动画
    DoubleAnimationUsingKeyFrames dakeyframe
    = new DoubleAnimationUsingKeyFrames();
    //设置rect矩形控件的Opacity透明度,并且开始动画事件为0秒的时候。
    Storyboard.SetTarget(dakeyframe,rect);
    Storyboard.SetTargetProperty(dakeyframe,
    new PropertyPath("UIElement.Opacity"));
    dakeyframe.BeginTime
    = new TimeSpan(0, 0, 0);

    //添加一个在第二秒的时候Opacity透明度值为1的关键帧
    SplineDoubleKeyFrame SKeyFrame = new SplineDoubleKeyFrame();
    SKeyFrame.KeyTime
    = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2));
    SKeyFrame.Value
    = 1;
    dakeyframe.KeyFrames.Add(SKeyFrame);

    //添加一个在第四秒的时候Opacity透明度值为0.1的关键帧
    SplineDoubleKeyFrame SKeyFrame1 = new SplineDoubleKeyFrame();
    SKeyFrame1.KeyTime
    = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4));
    SKeyFrame1.Value
    = 0.1;
    dakeyframe.KeyFrames.Add(SKeyFrame1);

    keyFrameboard.Children.Add(dakeyframe);
    #endregion

            以上就是4中动画的后台创建方式,相关的注释也在代码中,在这里就不一一解释。最后点击相应的按钮,运行相应的故事板Begin()方法开始动画。

            本实例采用VS2010+Silverlight4.0编写。点击 SLAnimation.rar 下载本实例源码。预览图如下所示:

     

  • 相关阅读:
    Luogu3952 NOIP2017D1T2 时间复杂度
    Luogu4933 大师
    Luogu1966 火柴排队
    Luogu2881 排名的牛Ranking the Cows
    Luogu1439 最长公共子序列(LCS)
    Liferay7 BPM门户开发之20: 理解Asset Framework
    提高Liferay7的启动和运行速度
    liferay中jsonws的认证方法
    让Liferay的Service Builder连接其他数据库
    Liferay表结构介绍(四):Portlet相关表
  • 原文地址:https://www.cnblogs.com/chengxingliang/p/1974436.html
Copyright © 2011-2022 走看看