最近在学习安卓,LOL自定义战绩项目近乎停工,而且腾旭把界面全改了,好烦。刚好学习到安卓中的图片切换动画,我就想在LOL项目中实现一个。首先上百度查看一下,妈的,资料少的可怜。

还是自己来吧。自定义控件走一波

效果图

新建自定义控件

直接改模板文件 把里面换成一个image source绑定到依赖属性上

<Style TargetType="control:ImageDisplayer">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="control:ImageDisplayer">
<Image x:Name="image" Width="" Height="" Source="{TemplateBinding ImageSourceNormal}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

在cs文件里添加字段

//这个定时器用来控制图片切换 
DispatcherTimer time = new DispatcherTimer();
//静态字段 image指模板中的image控件
private static Image image;
int i = 1;

添加依赖属性

 #region dependencyProperty
/// <summary>
/// 用于显示的Image绑定的Source属性
/// </summary>
public ImageSource ImageSourceNormal
{
get { return (ImageSource)GetValue(ImageSourceNormalProperty); }
set { SetValue(ImageSourceNormalProperty, value); }
}
public static readonly DependencyProperty ImageSourceNormalProperty = DependencyProperty.Register("ImageSourceNormal", typeof(ImageSource), typeof(ImageDisplayer), new PropertyMetadata(null));
#endregion

添加属性

 #region property
/// <summary>
/// 是否在显示动画
/// </summary>
public bool IsShow { get; private set; }
/// <summary>
/// List<BitmapImage> Images循环显示的集合
/// </summary>
public List<BitmapImage> Images { get; set; }
#endregion

重写OnApplyTemplate()方法

 /// <summary>
/// 重用模板时启用
/// </summary>
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
//在这里将image指向模板中的iamge控件
image = GetTemplateChild("image") as Image;
//注册time的Tick事件 忽略timer少的那个r 写错了 不想改了 就是这么任性
time.Tick += Time_Tick;
time.Interval = TimeSpan.FromMilliseconds(100);
}

  在tick事件里处理图片切换

  /// <summary>
/// 计时器操作
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private async void Time_Tick(object sender, object e)
{
if (image == null||Images==null)
{
time.Stop();
IsShow = false;
return;
}
if (i >= Images.Count)
{
i = ;
}
await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
{
ImageSourceNormal = Images[i];
});
i++;
}

写控件的使用与停止方法

 /// <summary>
/// 开始计时器
/// </summary>
public void Show()
{
time.Start();
IsShow = true;
}
/// <summary>
/// 停止计时器
/// </summary>
public void Stop()
{
time.Stop();
}

现在,这个控件就可以使用了

在页面上添加一个引用

 <local2:ImageDisplayer x:Name="display"/>

当你想显示动画的时候这样做

//这个list就是图片的集合 图片的命名要规范点 像teemo_1.jpg teemo_2.jpg
List<BitmapImage> list = new List<BitmapImage>();
for (int i = ; i < ; i++)
{
//初始化图片集合
BitmapImage image = new BitmapImage(new Uri(string.Format("ms-appx:///Resources/teemo_{0}.png", i)));
list.Add(image);
}
display.Images = list;
display.Show();

//停止动画的时候调用这个方法

display.Stop();

 完成;

写的不好,请多理解

gayhub地址:https://github.com/hei12138/LOL-/tree/master/Mycontrols

这是一个类库项目,里面也有我自定义的一些其他控件

新手,欢迎交流 1329698854@qq.com

uwp 图片切换动画的更多相关文章

  1. uwp 图片切换动画 使用帧动画

    上一篇博客使用了Timer来实现图片的切换,@lindexi_gd讨论了一下性能,我本人其实对性能这一方面不太熟,但我觉得还是有必要考虑一下,那么今天我们使用帧动画开实现以下 新建项目,添加一个But ...

  2. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  3. 这个图片切换动画只用CSS3实现

    体验效果:http://hovertree.com/texiao/css3/39/ 这是一个使用纯CSS3实现的图文切换效果,没使用js脚本.点击左右箭头或者索圆点引按钮可以切换内容. 本特效中使用到 ...

  4. 3D立方体图片切换动画

    在线演示 本地下载

  5. HTML5移动端图片左右切换动画

    插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外 ...

  6. 10个超赞的jQuery图片滑块动画

    在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件.本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件 ...

  7. Qt编写自定义控件33-图片切换动画

    一.前言 在很多看图软件中,切换图片的时候可以带上动画过渡或者切换效果,显得更人性化,其实主要还是炫一些,比如百叶窗.透明度变化.左下角飞入等,无论多少种效果,核心都是围绕QPainter来进行,将各 ...

  8. app引导页(背景图片切换加各个页面动画效果)

    前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

  9. jQuery演示10种不同的切换图片列表动画效果

    经常用到的图片插件演示jQuery十种不同的切换图片列表动画效果 在线演示 下载地址 实例代码 <!DOCTYPE html> <html lang="en" c ...

随机推荐

  1. 关于null值的排序

    关于空值null的排序问题   Oracle排序中NULL值处理的五种常用方法: 1.缺省Oracle在Order by 时缺省认为null是最大值,所以如果是ASC升序则排在最后,DESC降序则排在 ...

  2. DXUT源码阅读笔记

    14.GetCapture() 函数功能:该函数取得捕获了鼠标的窗口(如果存在)的句柄.在同一时刻,只有一个窗口能捕获鼠标:此时,该窗口接收鼠标的输入,无论光标是否在其范围内.函数原型:HWND Ge ...

  3. 代码中使用StoryBoard和DoubleAnimation的方法

    TranslateTransformを対象に.DoubleAnimation型のアニメーションを使用して.TranslateTransform.Xプロパティを ”-1 * Imageコントロールの幅” ...

  4. JQuery基本知识框架思维导图(上)

    一:认识jQuery 1.window.onload与$(document).ready()的对比 2.jQuery代码风格(1:链式代码风格2:位代码添加注释) 3.jQuery对象和DOM对象(1 ...

  5. DOS命令详解

    DOS命令详解 命令 \? 可以进入命令帮助 1.md命令创建目录. MKDIR [drive:]pathMD [drive:]path 如果命令扩展被启用,MKDIR 会如下改变: 如果需要,MKD ...

  6. Cloud Engine:大杀器如何炼成

    郑昀(微博:http://weibo.com/yunzheng) 创建于2016/6/18 最后更新于2016/6/19 点击查看我的<如何从零搭建一个技术平台>,这是一个系列.转载时请注 ...

  7. Redis安装配置(Windows版)

    近期项目中引入Redis,故记录下来,方便日后查看. 可参考(http://www.cnblogs.com/happyday56/p/3916388.html)不说废话,直奔主题. 一.安装前的准备: ...

  8. 《HTTP权威指南》大块儿头

    看到这样的一本书,胡乱翻开看看里面的内容,我觉得我又浮躁了.真厚啊!能学多少就学多少吧. 看看提要,这本书主要想讲的是HTTP和相关Web技术的.关于这方面的内容,知道的不多.

  9. 移动端Web适配的两种做法思路总结

    看了几篇文章,理一下网易跟淘宝移动端适配的思路,主要是参考 从网易与淘宝的font-size思考前端设计稿与工作流 像素相关概念 物理像素(physical pixel) 一个物理像素是显示器(手机屏 ...

  10. javascript array sort()

    [5,10,1].sort(); 结果[1,10,5] 有点出人意料. array.sort( sortFunction )可选-指定如何比较元素顺序的函数名称 如果省略sortFunction参数, ...