效果:实现加载UserControl动画效果

cs代码如下

  public  class BaseModuleView : UserControl
{
private TranslateTransform CurTranslate;
private DoubleAnimation XAnim;
private DoubleAnimation OpacityAnim;
private double OriginX = 50; public BaseModuleView()
{
DoInitAnin();
this.Loaded += BaseModuleView_loaded;
this.Unloaded += BaseModuleView_Unloaded;
} private void BaseModuleView_Unloaded(object sender, System.Windows.RoutedEventArgs e)
{
DoUnloadAnim();
}
private void BaseModuleView_loaded(object sender, System.Windows.RoutedEventArgs e)
{
DoLoadAnim();
}
private void DoLoadAnim()
{
this.CurTranslate.BeginAnimation(TranslateTransform.XProperty, XAnim);
this.BeginAnimation(UIElement.OpacityProperty, OpacityAnim);
} private void DoUnloadAnim()
{
this.CurTranslate.BeginAnimation(TranslateTransform.XProperty, null);
this.BeginAnimation(UIElement.OpacityProperty, null); this.CurTranslate.X = this.OriginX;
this.Opacity = 0;
}
private void DoInitAnin()
{
CurTranslate = new TranslateTransform();
CurTranslate.X = OriginX;
RenderTransform = CurTranslate;
Opacity = 0;
XAnim = new DoubleAnimation(0, TimeSpan.FromSeconds(0.3));
XAnim.EasingFunction = new ExponentialEase() { EasingMode = EasingMode.EaseInOut };
OpacityAnim = new DoubleAnimation(1, TimeSpan.FromSeconds(0.2)); }
}

XAML代码:

<Modules:BaseModuleView
x:Class="WFA.OwnUserControlown.EarthDayandnightControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WFA.OwnUserControlown"
xmlns:Modules="clr-namespace:WFA.Modules"
mc:Ignorable="d"
xmlns:local1="clr-namespace:WFA" d:DesignHeight="540" d:DesignWidth="960" >
<Grid> </Grid>
</Modules:BaseModuleView>

UserControl 加载动画的更多相关文章

  1. WPF当属性值改变时利用PropertyChanged事件来加载动画

    在我们的程序中,有时我们需要当绑定到UI界面上的属性值发生变化从而引起数据更新的时候能够加载一些动画,从而使数据更新的效果更佳绚丽,在我们的程序中尽量将动画作为一种资源放在xaml中,而不是在后台中通 ...

  2. 原生JS实战:分享一个首页进度加载动画!

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...

  3. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

  4. 利用CAReplicatorLayer实现的加载动画

    在上一篇中,笔者简要介绍了CAReplicatorLayer,在本篇中,将介绍具体的实用价值. 实用CAReplicatorLayer作为核心技术实现加载动画. 首先,创建一个UIView的子类 @i ...

  5. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  6. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  7. CSS 实现加载动画之八-圆点旋转

    这篇文件介绍的动画是QQ邮箱APP里的加载动画,效果类似,但是不完全一样.实现过程不复杂,这里不详细解释了,直接上源码.另外还有一种实现方式,利用元素的3D转换加平移. 1. 先看截图 2. 源代码 ...

  8. CSS 实现加载动画之七-彩环旋转

    今天整理的这个动画估计大家都不会陌生,彩环旋转,看过之后是不是觉得很熟悉,对,这个就是优酷视频APP里面的加载动画.本人空余时间喜欢看些视频,留意到这个动画后就想用代码实现出来,今天整理了下,跟大家分 ...

  9. CSS 实现加载动画之六-大风车

    这个动画改编自光盘旋转,前几个步骤一样,最后一步不同.光盘旋转的最后一步是外层容器加个圆形的白色边框,多余部分隐藏,这个案例则是在每个旋转的子元素的顶部或底部增加一个三角形的元素,构成风车旋转的角. ...

随机推荐

  1. 使用Vue-Cli搭建Ant Design Vue前端开发环境

    如果文章有帮助到你,还请点个赞或留下评论 搭建脚手架 环境准备 nodeJS vue-cli 如果没有安装点击此处查看安装方法 进入 vue ui 1.打开终端,输入命令 vue ui 2.选择项目存 ...

  2. Software Architecture软件架构(方法、模式与框架)纵横谈

    Software Architecture软件架构是啥 随着软件行业的发展,软件的规模越来越大,"Software Architecture软件架构"这个名词开始频繁出现.&quo ...

  3. Docker中容器的备份和恢复(可迁移)

    官方文档 备份容器 - save 查看镜像$ docker images 容器快照 - commit$ docker commit CONTAINER xxx/exampleimage-backup: ...

  4. 资源:Nginx安装包的下载路径

    下载路径如下: Nginx所有版本:http://nginx.org/download/

  5. 自己动手模拟spring的IOC

    我们这里是模拟spring,主要模拟spring中的IOC功能,所以在此我们一样要在service层中定义dao的实例,当然不用new出来,我们就通过spring的IOC把这里的dao层注入进来.不要 ...

  6. css--filter(滤镜) 属性

    前言 前段时间找工作面试官问到一个问题,你如何将一个网页整体置灰?面试遇到这样的问题,一下束手无策,之前没有接触过这样的需求,因此没有回答上来,面试结束我才知道了这是考查对 CSS3 的新属性的了解. ...

  7. python使用笔记17--异常处理

    什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行. 一般情况下,在Python无法正常处理程序时就会发生一个异常. 异常是Python对象,表示一个错误. 当Pyth ...

  8. C语言:键盘输入

    C语言有多个函数可以从键盘获得用户输入,它们分别是: scanf():和 printf() 类似,scanf() 可以输入多种类型的数据. getchar().getche().getch():这三个 ...

  9. 常用的jquery加载后执行的写法

    (function(doc){ })(document); $(function(){ }) jQuery(function(){ }) $(document).ready(function(){ } ...

  10. Postman进行webservices接口测试

    1.接口地址 webservices是什么? 更多webservices接口地址访问地址:http://www.webxml.com.cn/zh_cn/web_services.aspx webser ...