mysql 工具 uwp_UWP 创建动画的极简方式 — LottieUWP

提到 UWP 中创建动画，第一个想到的大多都是 StoryBoard。因为 UWP 和 WPF 的界面都是基于 XAML 语言的，所以实现 StoryBoard 会非常方便。

来看一个简单的 StoryBoard 例子：

这是一个很典型也很简单的 StoryBoard 实现，相信做过 WPF 或 UWP 的开发者们都很熟悉了。一个椭圆，通过 StoryBoard 中 TranslateX 和 TranslateY 的设置，在 RepeatBehavior 为 Forever 的情况下，重复做位移动画。

当然，更复杂的动画，可以借助 Blend 来实现，然后导入到 VS 中使用。但是，Blend 对于大部分设计师来说，是相对陌生的，而且 Blend 导出的动画文件，也只能在基于 XAML 的动画中使用，对于跨平台会有些问题。当然你可以使用 Xamarin 来跨平台，但是绝大部分 Mobile 开发者还是在用 Native 语言进行开发的。除此之外，还有两种动画方式：gif 或 png 序列，但是他们都存在文件体积大，分辨率适配不好的问题。而我们今天介绍的 Lottie，可以完美的解决上面的问题。

LottieUWP

概述

Lottie 是 Airbnb 研发团队研发并开源的一套创建和播放动画的方案，可以非常方面的在全平台实现高质量的动画，支持 Android, iOS, Web, UWP。设计师在 AE (After Effects) 中设计动画，通过 AE 中的 BodyMovin 插件导出为一个 JSON 文件，Lottie SDK 可以直接读取这个 JSON 文件，并通过简单代码控制播放动画。

Lottie 官方地址：https://airbnb.design/lottie/，来看几个 Lottie 官方的动画示例：

开发过程

或许大家也看到了，Lottie 官方提供的 SDK 中并没有 UWP，而我们要使用的是一个个人开发者根据 Android Lottie SDK 改写的 UWP 版本 SDK。其实也不能算个人开发者，这位大神是微软的员工，负责的就是帮助微软开发者的开发工作，其中就包括把一些不支持 UWP 的 SDK 移植到 UWP 中。

这里是 Lottie UWP 的 Git 地址：https://github.com/azchohfi/LottieUWP，下面实际看一下 Lottie UWP SDK 的使用方法：

创建一个 C# UWP 项目，然后在 Nuget 管理器中查找 LottieUWP 包并安装它。

使用方式非常简单，只需要在 XAML 中引入 LottieUWP，就可以使用 LottieAnimationView 控件了。这里的 b.json 文件是我们在 LottieFiles 网站下载的，LottieFiles 是 Lottie 动画文件的一个社区网站：https://www.lottiefiles.com/

xmlns:lottieUwp="using:LottieUWP">

AutoPlay="True" VerticalAlignment="Center" HorizontalAlignment="Center"/>

当然也可以在 C# 代码中加载和播放动画：

using LottieUWP;

...

await lottieAnimationView.SetAnimationAsync("Assets/b.json");

lottieAnimationView.RepeatCount = LottieDrawable.Infinite;

lottieAnimationView.PlayAnimation();

更进一步，我们可以对动画做更多的控制：

我们去掉 LottieAnimationView 的自动播放，改为使用一个 Slider 来控制动画播放进度，动画进度的取值范围是 [0.0, 1.0] 。

lottieAnimationView.Progress = (float)slider.Value;

可以看到 LottieUWP 可以支持指定帧播放，变速播放等功能的，这对我们控制动画的播放暂停，播放变速，特定时间点的播放等都提供了便利。

除此之外，还可以针对 LottieAnimationView 的 AnimatorUpdate event 进行监听和处理，比如在动画更新时，显示当前进度，或更新播放进度条的进度值。或者调用 CancelAnimation() 方法来取消当前动画。

小结

LottieUWP SDK 的使用非常简单，而且基于 Win2D 的动画性能很不错，另外这位大神作者更新频率很高，紧跟 Android 的步伐，不用担心新功能不受支持。

作者关于如何提高动画性能也做了提示：

对于没有 masks 或 mettes 的 JSON 文件，性能和内存占用都会很理想，因为不存在 bitmap 的创建过程；

如果有 mattes，2-3 个 bitmap 会被创建为控件尺寸，自动添加到窗口中，并在移除时被回收。所以不建议在 RecyclerView 中使用带有 masks 或者 mattes 的 JSON 文件，因为会伴有频繁的创建和销毁过程，动画播放的效果会降低。

建议在 LottieAnimationView.setAnimation(String, CacheStrategy) 使用 CacheStrategy，这样可以避免每次反复的加载动画。

当然，因为 LottieUWP 项目开发的时间并不长，还有一些需要继续优化的地方，作者也列出了接下来确定会优化的类：

Animator.cs BitmapCanvas.cs ColorFilter.cs DashPathEffect.cs Gradient.cs ImageAssetBitmapManager.cs LinearGradient.cs LottieAnimationView.cs LottieDrawable.cs Paint.cs Path.cs PathEffect.cs PathMeasure.cs PorterDuff.cs PorterDuffXfermode.cs RadialGradient.cs Shader.cs PorterDuffColorFilter.cs ValueAnimator.cs

如果大家有好的优化方法，也可以参与到这个项目中，给作者提 PR。

LottieUWP 的使用方法就介绍到这里，欢迎有兴趣的开发者多多交流！

用极简方式实现新浪新版本特性展示效果--view的图片轮播

在发布版本的时候,大多数软件会在第一次使用新版本时候弹出视图用几张图片给用户做一个新版本特性介绍,最简单如下图新浪的版本特性介绍 由于图片是全屏展示且是左右滑动,大多数情况开发者会选择使用scroll ...

Cocos2d-x3.3beta0创建动画的3种方式

1.单独载入精灵对象 渲染效率低,浪费资源,不推荐用该方法.代码例如以下:注:代码仅仅需贴到HelloWorldScene.cpp中就可以. //First,单独渲染每个精灵帧 auto sprite ...

windows 下 安装vue环境 以及创建新项目 极简

一.安装node.js(https://nodejs.org/en/) 官网下载安装 验证命令: node -v 二.安装npm npm install -g cnpm --registry=http ...

spring boot MySQL极简封装

摒弃繁琐配置,采用极简方式,源码简单,调用丰富,无污染,易携带,工作量减半,java操作mysql居家旅行升职加薪登上人生巅峰迎娶白富美必备object! 项目地址:https://gitee.com ...

极简 Node.js 入门 - 5.1 创建 HTTP 服务器

极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

wpf 创建动画三种方式

动画类型 : 故事版,CompositionTarget,DispachTime 那么到此,三种动态创建动画的方法都已经详细介绍过了,大家可能会有种感觉,比较钟情于第一种WPF/Silverlight ...

我喜欢的两个js类实现方式 现在再加上一个 极简主义法

闭包实现 变量是不会变的:) var myApplication = function(){ var name = 'Yuri'; var age = '34'; var status = 'sing ...

HTML5 极简的JS函数

页面初始化 mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面.关闭 ...

CSharpGL(28)得到高精度可定制字形贴图的极简方法

CSharpGL(28)得到高精度可定制字形贴图的极简方法 回顾 以前我用SharpFont实现了解析TTF文件从而获取字形贴图的功能,并最终实现了用OpenGL渲染文字. 使用SharpFont,美 ...

随机推荐

Android -- TabHost、Fragment、状态保存、通信

工程结构                                                                                       TabAFm到Ta ...

IntelliJ IDEA像Eclipse一样打开多个项目

原文:http://blog.csdn.net/zht666/article/details/47831893 我们做项目实际中经常会遇到这样的情况,创建一个common项目(Maven项目)作为公用 ...

C# 学习之旅(2)--- 意外的收获

今天在完成老师布置的C#作业(计算一元二次方程的根)的时候,收获到意外的知识,所以写此博文予以记录. 意外收获为: 对文本框的输入值进行检测,使之按照要求格式输入. 下面是整个的源代码: using ...

Ext.Net学习笔记06：Ext.Net DirectEvents用方补充

在ASP.NET控件上面使用DirectEvents 我们在ASP.NET中实现无刷新的页面请求的时候,通常会用到UpdatePanel,现在Ext.Net为我们提供了另外一种渠道:通过DirectE ...

[Swift]LeetCode849. 到最近的人的最大距离 | Maximize Distance to Closest Person

In a row of seats, 1 represents a person sitting in that seat, and 0 represents that the seat is emp ...

sql server 一直提示正在还原

restore database  数据库名称 with recovery

.NET-分页处理方式

分页方案一: 现在常见的前端框架datatable,easyui等的分页插件,都是采用的前端分页,原理:先将符合条件的数据全部加载到页面上,然后计算分页,进行分页处理.(装载全部数据) 优点: --在 ...

苹果电脑快速安装双系统 Winclone镜像包 Winclone安装Win7/Win8.1/Win10镜像

原文:https://bbs.feng.com/read-htm-tid-9940193.html by:旋律 2015年及以后的安装win8.1及win10(不支持win7) 请根据自己的机型安装合 ...

17-hadoop-yarn安装

在搭建好的 resourceHA的环境下, 配置yarn yarn是 hadoop2以后的计算框架, 通过ResourceManager的调用, 将我们写的程序包分到各个nodeManager上, 由 ...

Springboot @ResponseBody返回中文乱码

最近我在把Spring 项目改造Springboot,遇到一个问题@ResponseBody返回中文乱码,因为response返回的content-type一直是application/json;ch ...