今天来点实际的,项目中可以真实使用的,一个Loading的动画,最后封装成一个控件,可以直接使用在项目中,先上图:

整个设计比较简单,就是在界面上画18个Path,然后通过动画改变OpacityMask的值来实现一种动态的效果.

因为整个过程比较简单,所以其实没有用到Blend,唯一一个需要注意的是Path的路径值是请美工从PS里生成的,路径如下:

<Geometry x:Key="Block">
M291.15499,85.897525
C291.15499,85.897525
301.88917,85.87921
301.88917,85.87921
301.88917,85.87921
300.38339,94.355061
300.38339,94.355061
300.38339,94.355061
292.85366,94.355042
292.85366,94.355042
292.85366,94.355042
291.15499,85.897525
291.15499,85.897525Z
</Geometry>

Path的代码如下,每个Path一次旋转特定的角度围成一个圆形

<Path x:Name="block0" Style="{StaticResource PathStyle}" Data="{StaticResource Block}"  OpacityMask="#00000000" >
<Path.RenderTransform>
<RotateTransform Angle="180"/>
</Path.RenderTransform>
</Path>
<Style x:Key="PathStyle" TargetType="Path">
<Setter Property="Fill" Value="#FF0092FF"></Setter>
<Setter Property="Stretch" Value="Fill"></Setter>
<Setter Property="RenderTransformOrigin" Value="0.5,5"></Setter>
<Setter Property="VerticalAlignment" Value="Top"></Setter>
<Setter Property="Height" Value="30"></Setter>
</Style>

单个Path的动画:

<ColorAnimationUsingKeyFrames Duration="00:00:03.6" Storyboard.TargetName="block0" Storyboard.TargetProperty="(UIElement.OpacityMask).(SolidColorBrush.Color)">
<LinearColorKeyFrame KeyTime="00:00:00.0" Value="#FF000000"/>
<LinearColorKeyFrame KeyTime="00:00:00.2" Value="#EF000000"/>
<LinearColorKeyFrame KeyTime="00:00:00.4" Value="#E2000000"/>
<LinearColorKeyFrame KeyTime="00:00:00.6" Value="#D3000000"/>
<LinearColorKeyFrame KeyTime="00:00:00.8" Value="#C6000000"/>
<LinearColorKeyFrame KeyTime="00:00:01.0" Value="#B7000000"/>
<LinearColorKeyFrame KeyTime="00:00:01.2" Value="#AA000000"/>
<LinearColorKeyFrame KeyTime="00:00:01.4" Value="#9B000000"/>
<LinearColorKeyFrame KeyTime="00:00:01.6" Value="#8E000000"/>
<LinearColorKeyFrame KeyTime="00:00:01.8" Value="#7F000000"/>
<LinearColorKeyFrame KeyTime="00:00:02.0" Value="#72000000"/>
<LinearColorKeyFrame KeyTime="00:00:02.2" Value="#63000000"/>
<LinearColorKeyFrame KeyTime="00:00:02.4" Value="#56000000"/>
<LinearColorKeyFrame KeyTime="00:00:02.6" Value="#3D000000"/>
<LinearColorKeyFrame KeyTime="00:00:02.8" Value="#26000000"/>
<LinearColorKeyFrame KeyTime="00:00:03.0" Value="#19000000"/>
<LinearColorKeyFrame KeyTime="00:00:03.2" Value="#0C000000"/>
<LinearColorKeyFrame KeyTime="00:00:03.4" Value="#00000000"/>
<LinearColorKeyFrame KeyTime="00:00:03.6" Value="#FF000000"/>
</ColorAnimationUsingKeyFrames>

源代码下载:

http://files.cnblogs.com/youngytj/LoadingAnimations.rar

WPF和Expression Blend开发实例:Loading动画的更多相关文章

  1. WPF和Expression Blend开发实例:一个样式实现的数字输入框

    原文:WPF和Expression Blend开发实例:一个样式实现的数字输入框 今天来一个比较奇淫技巧的手法,很少人用,同时也不推荐太过频繁的使用. 先上样式: <Style x:Key=&q ...

  2. WPF和Expression Blend开发实例:模拟QQ登陆界面打开和关闭特效

    不管在消费者的心中腾讯是一个怎么样的模仿者抄袭者的形象,但是腾讯在软件交互上的设计一直是一流的.正如某位已故的知名产品经理所说的:设计并非外观怎样,感觉如何.设计的是产品的工作原理.我觉得腾讯掌握了其 ...

  3. WPF和Expression Blend开发实例:充分利用Blend实现一个探照灯的效果

    本篇文章阅读的基础是在读者对于WPF有一定的了解并且有WPF相关的编码经验,对于Blend的界面布局有基础的知识.文章中对于相应的在Blend中的操作进行演示,并不会进行细致到每个属性的介绍.同时,本 ...

  4. WPF和Expression Blend开发实例:Adorner(装饰器)应用实例

    装饰器-- 表示用于修饰 UIElement 的 FrameworkElement 的抽象类 简单来说就是,在不改变一个UIElement结构的情况下,将一个Visual对象加到它上面. 应用举例: ...

  5. Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard http://silverlightchina.net/html/tips/2010/0329/934.html

    Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard 时间:2010-03-29 11:13来源:SilverlightChina.Net 作者:jv9 点击: ...

  6. Expression Blend实例动画-大坝水位升高演示

    原文:Expression Blend实例动画-大坝水位升高演示 Expression Blend是个很强大的东西,用它可以完成很多不好做的动画效果. 动画的主要元素: 时间线(Timeline) : ...

  7. Expression Blend实例中文教程(10) - 缓冲动画快速入门Easing

    随着Rich Internet application(RIA)应用技术的发展,各个公司越来越注重于项目的用户体验性,在保证其功能完善,运行稳定的基础上,绚丽的UI和人性化的操作设计会给用户带来舒适的 ...

  8. Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard

    上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程. 而Silverlight动画分类两种类型,From/T ...

  9. Expression Blend实例中文教程(7) - 动画基础快速入门Animation

    通过前面文章学习,已经对Blend的开发界面,以及控件有了初步的认识.本文将讲述Blend的一个核心功能,动画设计.大家也许注意到,从开篇到现在,所有的文章都是属于快速入门,是因为这些文章,都是我曾经 ...

随机推荐

  1. 使用树莓派拍摄延时动画,制作GIF图

    本期教大家将编写一个小脚本用树莓派来捕获多个图像,然后可以将这些图像组合成动画GIF,使用延时摄影功能,可以在几秒钟内查看非常慢的事情. 我们需要用到ImageMagick,这是一个用于图像处理的命令 ...

  2. 第六节 Go数据结构之集合

    一.什么是集合 集合就是不同对象的无序聚集.那么链表和集合有什么关系呢?我们来变个魔术.如下图是各种颜色组成的链表: 下面我们一步步把链表变成集合. 第一步砍去链接 第二步去掉重复 第三步放到一个框里 ...

  3. PAT (Advanced Level) Practice 1003 Emergency

    思路:用深搜遍历出所有可达路径,每找到一条新路径时,对最大救援人数和最短路径数进行更新. #include<iostream> #include<cstdio> #includ ...

  4. C# 访问修饰符和const、readonly

    今天被人问起const和readonly,竟然有点咬不准,复习一遍. 访问修饰符 public 公有访问.不受任何限制. private 私有访问.只限于本类成员访问,子类,实例都不能访问. prot ...

  5. 20155231 cho3 课下作业

    20155231 cho3 课下作业 4 1 通过输入gcc -S -o main.s main.c 将下面c程序"week0603学号.c"编译成汇编代码 int g(int x ...

  6. 预备作业03: 初体验---虚拟机virtual box

    学习基于VirtualBox虚拟机安装Ubuntu图文教程在自己笔记本上安装Linux操作系统 昨天从下午到晚上一直在研究怎么安装也问了很多同学,也自己查了查百度,经过一晚上终于安装成功,于是今天一早 ...

  7. 20145207 《Java 程序设计》实验三 (敏捷开发与XP实践)实验报告

    <Java 程序设计>实验三 (敏捷开发与XP实践)实验报告 目录 改变 敏捷开发与XP实践实验要求 实验成果 课后思考 改变 修改了之前仅仅是贴了图片,连代码都没粘的状态.增加了自己的思 ...

  8. angularjs 路由机制

    前言 AngularJS路由主要有内置的ngRoute和一个基于ngRoute开发的第三方路由模块ui-router,内置的ngRoute有时满足开发需求,使用ui-router可以解决很多原生ngR ...

  9. C# webapi 路由规则和接收数据

    1:新建的web api项目 默认的访问api方式:  (get,post,delect,put)  api+控制器  以Post为例子 post提交单个参数: 接收方法  post提交多个参数  接 ...

  10. 利用工厂模式实现serviec层和dao层解耦

    利用工厂模式实现serveice和dao层的解耦,这样就可以不用在service层实例化dao层的对象,当dao层代码发生改变的时候(数据库实现发生改变)直接修改配置文件就不用改变service层的代 ...