uwp 图片切换动画

Posted 2020-08-09 嘿123

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

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

新手，欢迎交流 [email protected]