首页 > 代码库 > uwp 图片切换动画

uwp 图片切换动画

2024-08-13 07:33:11   211人阅读

最近在学习安卓，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

 

uwp 图片切换动画


联系
我们