原文:
uwp 图片切换动画
最近在学习安卓，LOL自定义战绩项目近乎停工，而且腾旭把界面全改了，好烦。刚好学习到安卓中的图片切换动画，我就想在LOL项目中实现一个。首先上百度查看一下，妈的，资料少的可怜。
还是自己来吧。自定义控件走一波
效果图
新建自定义控件
直接改模板文件 把里面换成一个image source绑定到依赖属性上
<Style TargetType="control:ImageDisplayer"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="control:ImageDisplayer"> <Image x:Name="image" Width="40" Height="40" 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 = 1; } 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 = 1; i < 9; 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
