uwp 图片切换动画

Posted 嘿123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

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

新手,欢迎交流 [email protected]

 

以上是关于uwp 图片切换动画的主要内容,如果未能解决你的问题,请参考以下文章

uwp 图片切换动画

在uwp仿IOS的页面切换效果

在jquery中切换动画

uwp开发————换背景图片

Android 动画嵌套片段

[UWP]使用CompositionAPI的翻转动画