【Xamarin.Forms】使用Lottie将惊人的动画带进你的应用中

简介: 动画总是带给我们的应用一个喜悦,但是动画却是非常难创建的。设计一个动画并将其转换成平台特定的代码既乏味又容易出错。Lottie是有Airbnb为iOS和Android创建的一个移动动画库,它通过解析Adobe动画影响(导出为JSON)后并重新使用本地动画API来渲染。

动画总是带给我们的应用一个喜悦,但是动画却是非常难创建的。设计一个动画并将其转换成平台特定的代码既乏味又容易出错。Lottie是有Airbnb为iOS和Android创建的一个移动动画库,它通过解析Adobe动画影响(导出为JSON)后并重新使用本地动画API来渲染。通过使用Lottie,首次设计者都可以创建和勾画出非常漂亮的动画而不需要一个工程师通过手工来的重新创建。因为它使用JSON返回,动画具有非常小的尺寸,但却具有非常强大和复杂的功能!动画可以播放,调整大小,打圈,加快、减慢,甚至进行擦洗。

因为它很容易将幻想动画,而且还要更新和维护它们,我们已经开始使用Lottie来创建所有应用中的动画。Lottie有几个功能内置到它的API使它更加灵活和高效。它支持通过网络加载JSON文件,具有可选的缓存机制, 动画可以通过手势驱动。在我的博客中,你将学到如何使用Lottie动画框架 来为iOS,Androidto甚至Xamarin.Forms应用创建漂亮的动画!

Lottie is an animation framework from AirBnb.

使用Lottie添加漂亮的动画

在我们得到的代码,首先我们要创建我们的动画。 Lottie功能是在Adobe受影响之后导出的JSON传输到本地动画中。首先,在Adobe中创建一个动画效果。接着,使用动画影响bodymovin插件 导出动画为JSON。这将作为后备存储为动画,Lottie将负载从代码。

现在是时候添加动画到我们的移动应用程序。通过访问NuGet获取Xamarin的Lottie发布。在我们的应用中使用Lottie,简单添加到iOS, Android, 或者 Xamarin.Forms 版本的Lottie包到我们的工程中。

Android

Lottie支持Jellybean (API 16)及以上版本。非常简单的方法是通过LottieAnimationView使用它:

 

或者,您可以通过编程方式从位于资源目录中的JSON加载动画:

LottieAnimationView animationView = FindViewById(Resource.Id.animation_view);
animationView.SetAnimation("hello-world.json");
animationView.Loop = true;

iOS

通过AAnimationView在代码中创建一个动画,  添加动画到视图,并调用layWithCompletion:

LAAnimationView animation = LAAnimationView.AnimationNamed("LottieLogo1");
this.View.AddSubview(animation);
animation.PlayWithCompletion((animationFinished) => {
  // Do Something
});

你也可以从NSUrl加载程序(本地或通过网络):

LAAnimationView animation = new LAAnimationView(new NSUrl(url));
this.View.AddSubview(animation);

Xamarin.Forms

Lottie也为Xamarin.Forms应用提供了可用的API,使用它们自己的XAML标签 too:

 

下载样例应用

查看预建动画实例,从GitHub下载Lottie样例应用, 或者直接从Google应用商店获取它。

过不了多久,你将通过Lottie为你的用户创造愉快的动画!

Example of Lottie animation framework in the AirBnb app.

了解更多

还有更多的结合本地库和Lottie的Xamarin样例.你可以查找到更多关于Xamarin中使用Lottie的知识,它们在GitHub的README文件中。有关创建绑定的更多信息、疑难解答和示例,查看 AndroidiOS 文档。也可以加入我们在Github上的源码和分支!

目录
相关文章
|
C# 开发者 容器
[UWP]合体姿势不对的HeaderedContentControl
原文:[UWP]合体姿势不对的HeaderedContentControl 1. 前言 HeaderedContentControl是WPF中就存在的控件,这个控件的功能很简单:提供Header和Content两个属性,在UI上创建两个ContentPresenter并分别绑定到Header和Content,让这两个ContentPresenter合体组成HeaderedContentControl。
895 0
|
C#
C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码
原文:C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码 前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.
1172 0
|
Windows 容器 API
[UWP]涨姿势UWP源码——UI布局
原文:[UWP]涨姿势UWP源码——UI布局 懒癌晚期兼正月里都是过年,一直拖到今天才继续更新。之前的几篇介绍了数据的来源,属于准备工作。本篇我们正式开始构建涨姿势UWP程序的UI界面。 我们这个Hello World程序比较简单,总共只有一个页面,在PC和Tablet上呈左右分开,左边以列表显示新闻标题及简述,右边则显示新闻正文。
1485 0
|
图形学
Unity3D UI史
http://www.cnblogs.com/hammerc/p/4837204.html
|
前端开发 图形学
Unity UI on hololens
http://heliosinteractive.com/scaling-ui-hololens/  https://forum.unity3d.com/threads/unity-ui-on-the-hololens.
[Silverlight动画]转向行为 - 总结
这一系列文章概述了转向的基本行为,从简单的寻找和避开到复杂的对象回避和群落。随着合并这些简单行为,而产生了复杂的动态效果。希望这些对大家开发自己的产品或者游戏有所帮助。   [Silverlight动画]转向行为 - 介绍 [Silverlight动画]转向行为 - 2D向量 [Silve...
890 0
[Silverlight动画]转向行为 - 群落
说到群落,很难不引用Craig Reynolds和他的"boilds"模拟系统。Reynolds很牛的将一个看似非常恐怖的复杂过程,拆成了几个比较简单的行为。 想想鸟群,它含有三个主要角色: 首先,鸟们都保持在同一个区域。
934 0