平时我们所看到的雪花(Falling Snow)飘飘的效果实际上也是一个动画,是由许多的动画对象共同完成的一个界面效果。对于不同大小的雪片可以通过缩放变换(ScaleTransform)功能特性确定,雪片飘落是存在于一个空间之中,通过不同的透明度值可使雪花看上去具有一定的空间视觉,雪花的飘落过程是由三角函数的原理实现的左右滑落效果,并可根据随机生成数字作为雪花飘落的速度。

雪花UserControl
Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><Canvas x:Name="LayoutRoot">
<Path Data="F1 M 24.667480,10.681641 L 24.017578,9.555176 L 21.143066,9.555176 L 22.395996,7.384766 L
21.746094,6.258301 L 20.445313,6.258301 L 18.541992,9.555176 L 14.284668,9.555176 L
16.413574,5.868652 L 20.220215,5.868652 L 20.870605,4.742188 L 20.220215,3.615723 L
17.713379,3.615723 L 19.151367,1.126465 L 18.500977,0.000000 L 17.200195,0.000000 L
15.763184,2.489746 L 14.509766,0.318848 L 13.209473,0.318848 L 12.559082,1.444824 L
14.462402,4.742188 L 12.333984,8.428711 L 10.205078,4.742188 L 12.108887,1.444824 L
11.458496,0.318848 L 10.157715,0.318848 L 8.904785,2.489746 L 7.467285,0.000000 L
6.166992,0.000000 L 5.516602,1.126465 L 6.954102,3.615723 L 4.447266,3.615723 L
3.796875,4.742188 L 4.447266,5.868652 L 8.254395,5.868652 L 10.383301,9.555176 L
6.125977,9.555176 L 4.222656,6.258301 L 2.921875,6.258301 L 2.271484,7.384766 L
3.524902,9.555176 L 0.650391,9.555176 L 0.000000,10.681641 L 0.650391,11.807617 L
3.524902,11.807617 L 2.271484,13.978516 L 2.921875,15.104980 L 4.222656,15.104980 L
6.125977,11.807617 L 10.383301,11.807617 L 8.254395,15.494629 L 4.447266,15.494629 L
3.796875,16.621094 L 4.447266,17.747070 L 6.954102,17.747070 L 5.516602,20.236816 L
6.166992,21.363281 L 7.467285,21.363281 L 8.904785,18.873535 L 10.157715,21.044434 L
11.458496,21.044434 L 12.108887,19.917969 L 10.205078,16.621094 L 12.333984,12.934082 L
14.462402,16.621094 L 12.559082,19.917969 L 13.209473,21.044434 L 14.509766,21.044434 L
15.762695,18.873535 L 17.200195,21.363281 L 18.500977,21.363281 L 19.151367,20.236816 L
17.713379,17.747070 L 20.220215,17.747070 L 20.870605,16.621094 L 20.220215,15.494629 L
16.413574,15.494629 L 14.284668,11.807617 L 18.541992,11.807617 L 20.445313,15.104980 L
21.746094,15.104980 L 22.395996,13.978516 L 21.143066,11.807617 L 24.017578,11.807617 L
24.667480,10.681641 Z" Fill="#FFFFFFFF" Width="24" Height="24" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name="ScaleFlake" ScaleX="1" ScaleY="1"/>
<RotateTransform x:Name="RotateFlake" Angle="0"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Canvas>

  通过路径(Path)可绘制雪花界面,为此只需要提供一个根据不同参数构造不同的雪花界面效果的接口,既构造方法:


//根据不同的参数构造雪花对象
public Snowflake(double Left, double Top, double Opacity)
{
    InitializeComponent();     //随机速度
    Speed = Rand.Next(5);
    if (Speed < 1)
    {
        Speed = 1;
    }     //随机位置、弧度、角度
    DriftPosition = Left;
    DriftRange = Rand.Next(50);
    DriftAngle = Rand.Next(270);     Spin = Rand.Next(5);     ScaleFlake.ScaleX = ScaleFlake.ScaleY = Rand.Next(25, 100) / 100.0;     Canvas.SetLeft(this, Left);
    Canvas.SetTop(this, Top);
    this.Opacity = Opacity;
    Position.X = Left;
    Position.Y = Top;
}

  出了根据不同参数生成雪花对象外,还需提供一个动态改变雪花位置的接口,也就是动态改变雪花的X,Y的坐标值。


//根据三角函数计算雪片下落过程(Y坐标)中的左右(X方向)浮动效果
public void MoveFlake()
{
    Position.Y += Speed;
    Position.X = DriftPosition + Math.Cos(DriftAngle) * DriftRange;     RotateFlake.Angle += Spin;     if (Position.Y > AppHeight)
    {
        Position.Y = -this.Height;
    }     Canvas.SetLeft(this, Position.X);
    Canvas.SetTop(this, Position.Y);     DriftAngle += DriftSpeed;
}

  在主程序中需要定义一个动画,用于控制雪花下落和角度旋转:

<UserControl.Resources>
    <Storyboard x:Name="Snowfall" Duration="00:00:00"/>
</UserControl.Resources>

  通过主程序动态的随机构造雪花对象并添加到界面中,然后统一启动动画就实现了飘落的雪花效果,其完整的主控程序如下代码块:


public partial class MainPage : UserControl
{
    private List<Snowflake> Flake;
    private List<Point> XYStart;
    private List<double> OpacityValue;
    private int MaxFlakes = 250;
    private Random Rand = new Random();     public MainPage()
    {
        InitializeComponent();         //雪花集合--初始化250个雪花对象并同事进行动画处理
        Flake = new List<Snowflake>(MaxFlakes);
        //雪花坐标集合
        XYStart = new List<Point>(MaxFlakes);
        //不透明度集合
        OpacityValue = new List<double>(MaxFlakes);         for (int i = 0; i < MaxFlakes; i++)
        {
            //不同的起止坐标
            Point newPoint = new Point(Rand.Next((int)LayoutRoot.Width), Rand.Next((int)LayoutRoot.Height));
            XYStart.Add(newPoint);
            //不同透明度值
            OpacityValue.Add(Rand.NextDouble());
        }         InitFlakes();
        Snowfall.Completed += new EventHandler(Snowfall_Completed);
        Snowfall.Begin();
    }     private void InitFlakes()
    {
        //循环生成雪花冰添加到界面
        for (int i = 0; i < MaxFlakes; i++)
        {
            Snowflake flake = new Snowflake(XYStart[i].X, XYStart[i].Y, OpacityValue[i]);
            Flake.Add(flake);
            flake.AppHeight = LayoutRoot.Height;
            LayoutRoot.Children.Add(flake);
        }
    }     //动画完成后继续开始动画的执行
    private void Snowfall_Completed(object sender, EventArgs e)
    {
        foreach (Snowflake flake in Flake)
        {
            flake.MoveFlake();
        }         Snowfall.Begin();
    }
}

        

Silverlight & Blend动画设计系列十三:三角函数(Trigonometry)动画之飘落的雪花(Falling Snow)的更多相关文章

  1. Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)

    Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平.垂直方向的倾斜变化动画效果.我们现实生活中的倾斜变化效果是非常常见的,比如翻书的纸张效果,关门开门的时候门缝 ...

  2. Silverlight & Blend动画设计系列三:缩放动画(ScaleTransform)

    在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动 ...

  3. Silverlight & Blend动画设计系列二:旋转动画(RotateTransform)

    Silverlight的基础动画包括偏移.旋转.缩放.倾斜和翻转动画,这些基础动画毫无疑问是在Silverlight中使用得最多的动画效果,其使用也是非常简单的.相信看过上一篇<偏移动画(Tra ...

  4. Silverlight & Blend动画设计系列一:偏移动画(TranslateTransform)

    用户界面组件.图像元素和多媒体功能可以让我们的界面生动活泼,除此之外,Silverlight还具备动画功能,它可以让应用程序“动起来”.实际上,英文中Animation这个单词的意思是给某物带来生命. ...

  5. Silverlight & Blend动画设计系列十二:三角函数(Trigonometry)动画之自由旋转(Free-form rotation)

    说到对象的旋转,或许就会联想到对象角度的概念.对象的旋转实现实际上就是利用对象的角度改变来实现的位置变换,在<Silverlight & Blend动画设计系列二:旋转动画(Rotate ...

  6. Silverlight & Blend动画设计系列十:Silverlight中的坐标系统(Coordinate System)与向量(Vector)运动

    如果我们习惯于数学坐标系,那么对于Silverlight中的坐标系可能会有些不习惯.因为在Silverlight中的坐标系与Flash中的坐标系一样,一切都的颠倒的.在标准的数学坐标系中,X轴表示水平 ...

  7. Silverlight & Blend动画设计系列九:动画(Animation)与视图状态管理(Visual State Manager)

    Silverlight中的动画(Animation)与视图状态管理(Visual State Manager) 结合使用是非常常见的,动画用于管理对象在某段事件段内执行的动画动作,视图状态管理则用于控 ...

  8. Silverlight & Blend动画设计系列七:模糊效果(BlurEffect)与阴影效果(DropShadowEffect)

    模糊效果(BlurEffect)与阴影效果(DropShadowEffect)是两个非常实用和常用的两个特效,比如在开发相册中,可以对照片的缩略图添加模糊效果,在放大照片的过程中动态改变照片的大小和模 ...

  9. Silverlight & Blend动画设计系列五:故事板(StoryBoards)和动画(Animations)

    正如你所看到的,Blend是一个非常强大的节约时间的设计工具,在Blend下能够设计出很多满意的动画作品,或许他具体是怎么实现的,通过什么方式实现的我们还是一无所知.本篇将续前面几篇基础动画之上,详细 ...

随机推荐

  1. django shortcut function

    render() render(request, template_name, context=None, content_type=None, status=None, using=None) 必须 ...

  2. python学习之路 二 :基本数据类型

    本节重点 理解什么是变量? 掌握各种数据类型 理解可变类型和不可变类型 一.变量和常量 变量: 作用:存贮程序的中间结果在内存里,以备后边的程序调用 定义规范: 变量名只能是 字母.数字活下划线的任意 ...

  3. PageAdmin环境配置要求

    1.操作系统要求: Win7/win8/win2008/win2012及以上版本都可以,建议用64位的操作系统,服务器建议选择win2012或以上版本. 2.net framework版本要求: ne ...

  4. .CHM文件使用问题

    1.查看时内容为空---解除锁定 解决方案:选中xx.CHM,右键点击属性,常规选项卡中点击“解除锁定”.OK了 2.内容显示乱码---修改浏览器编码 IE中的查看 > 编码 > 自动选择 ...

  5. 爬虫开发10.scrapy框架之日志等级和请求传参

    今日概要 日志等级 请求传参 今日详情 一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy的日志信息. - 日志 ...

  6. “全栈2019”Java第五十章:继承与构造方法详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  7. JS延时器 定时器 暂停器 中断器

    // numberMillis 毫秒 function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() ...

  8. sed用法——在指定行后面添加内容

    文档内容如下: # cat 123.txt linuxciscohuaweinetworksystem 1. 使用sed命令在cisco行下面添加CCIE: # sed -i "/cisco ...

  9. jenkins定时

    分别的定义为:分 时 天 月 星期 Minutes within the hour (0–59) HOUR       Thehour of the day (0–23) DOM         Th ...

  10. SpringBoot 启动的时候提示 Field *** in *** required a bean named 'entityManagerFactory' that could not be found.

    错误截图 后面发现原来和入口类代码有关. //@SpringBootApplication(scanBasePackages = {"org.jzc.odata.cboard",& ...