你还在用GIF？那就out了

 

目录

前言

正文

参考资料

前言

• 今天介绍一篇使用json格式在wpf中播放动画效果；

正文

• 话说在上古（1987）时代，Gif因其体积小成像相对清晰和非常强的兼容性，而大受欢迎;

• Gif也因为当时的技术限制导致很多缺陷 这包括对电脑的内存和性能占用非常大;

• 同时Gif还是一个有损文件格式 对半透明和颜色都有一定程度的限制;

• 随着技术的进步衍生出了 apng和webp格式相对技术色彩范围更广效果也更清晰也占用更低的内存;

• apng和webp这两种格式需要复杂的开发环境来支持，还是不太友好；

• 这时就需要另外一种格式了 序列帧；

• 序列帧它是一个无损且低内存的格式，不过只能在客户端使用；

• 因为帧数多想要在web环境中使用 ，就需要转换为雪碧图；

• Lottie动画是由airbnb公司推出的；

• Lottie的原理是把各种矢量素材以及效果 打包成一个体积很小的json文件然后交给开发人员就好了；

• 经常在APP所见到的动态图标都是由Lottie来实现的；

• 下面我们如何开源项目LottieSharp[1]进行展现json文件动画；

1）Nuget 搜索 LottieSharp 点击安装；

2）使用方式很简单如下

3）后台逻辑代码；

using Microsoft.Win32;
using System;
using System.Collections.Generic;
using System.IO;
using System.Windows;
using System.Windows.Controls;

namespace LottieSharp.Sample
{
    /// 
    /// Interaction logic for MainWindow.xaml
    /// 
    public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();
            Loaded += MainWindow_Loaded;
            LottieAnimationView.UseHardwareAcceleration(true);
        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            var path = System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Assets");
            var root = new DirectoryInfo(path);
            var array = new List(); 
            foreach (var item in root.GetFiles())
            {
                array.Add(item.Name);
            }
            myListBox.ItemsSource = array;
        }

        protected override void OnClosed(EventArgs e)
        {
            base.OnClosed(e);
            LottieAnimationView.Dispose();
            DataContext = null;
        }

        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs e)
        {
            LottieAnimationView.PauseAnimation();
            LottieAnimationView.Progress = (float)(e.NewValue / 1000);
        }

        private void LoadAnimation_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog openFileDialog = new OpenFileDialog();
            openFileDialog.DefaultExt = ".json";
            openFileDialog.Filter = "Json files|*.json|All files|*.*";
            if (openFileDialog.ShowDialog() == true)
            {
                LottieAnimationView.PauseAnimation();
                LottieAnimationView.FileName = openFileDialog.FileName;
                LottieAnimationView.PlayAnimation();
            }
        }

        private void StartAnimation_Click(object sender, RoutedEventArgs e)
        {
            LottieAnimationView.PlayAnimation();
        }

        private void PauseAnimation_Click(object sender, RoutedEventArgs e)
        {
            LottieAnimationView.PauseAnimation();
        }

        private void LoadImageAssetsFolder_Click(object sender, RoutedEventArgs e)
        {
            using (var dialog = new System.Windows.Forms.FolderBrowserDialog())
            {
                if (dialog.ShowDialog() == System.Windows.Forms.DialogResult.OK)
                    ImageAssetsFolderTextBox.Text = dialog.SelectedPath;
            }
        }

        private void DeleteImageAssetsFolder_Click(object sender, RoutedEventArgs e)
        {
            ImageAssetsFolderTextBox.Text = "";
        }

        private void ImageAssetsFolderTextBox_TextChanged(object sender, TextChangedEventArgs e)
        {
            LottieAnimationView.PauseAnimation();
            LottieAnimationView.ImageAssetsFolder = ImageAssetsFolderTextBox.Text;
        }

        private void Slider_ValueChanged_1(object sender, RoutedPropertyChangedEventArgs e)
        {
            if (!double.IsNaN(e.NewValue))
                LottieAnimationView.Scale = (float)e.NewValue;
        }

        private void myListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var path = System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Assets", myListBox.SelectedItem.ToString());
            LottieAnimationView.PauseAnimation();
            LottieAnimationView.FileName = path;
            LottieAnimationView.PlayAnimation();
        }
    }
}

案例中只是少数的json文件，可以去官网[2]下载更多json文件;源码[3]

参考资料

[1]

LottieSharp: https://github.com/ascora/LottieSharp

[2]

官网: https://lottiefiles.com/featured

[3]

源码: https://gitee.com/yanjinhua/LottieSharp