Lottie 使用

原文:https://mp.weixin.qq.com/s?__biz=MzIxNjc0ODExMA==&mid=2247485033&idx=1&sn=54dd477b4c4cd30d12fde48eba929546&chksm=97851f48a0f2965e342a2cdf55cbefceaa20a24b887e2b79ff940ca57a17b6cb9ae999643ace#rd

设计师使用 After Effects 设计出完美的动画,然后通过 Bodymovin 插件进行简单的转换和导出成 JSON,最后工程师将 JSON 放入 App 项目中,就可以将动画 100% 还原到产品中。

缺陷:

系统版本限制,Android(Api 14+) 和 iOS(>=8.0) 都有不同的版本限制。

有一些交互动画,不被支持,哪怕导出了也无法被正常执行。

Bodymovin 插件还有待完善,有些 After Effects 实现的效果,无法被正常导出。

开始使用:

compile ‘com.airbnb.android:lottie:2.0.0-beta4‘

最简单的使用方式是直接使用 LottieAnimationView ,LottieAnimationView 直接继承自 AppCompatImageView 。

只需要提前将动画的 JSON 文件,放在 app/src/main/assets 目录下,在 Layout 布局文件中,可以直接使用。

<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="hello-world.json"
app:lottie_loop="true"
app:lottie_autoPlay="true" />

或者你也可以使用逻辑代码去控制 Lottie 动画的播放

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);
animationView.playAnimation();

它支持几个属性:

lottie_fileName : 播放动画的 json 文件。

lottie_loop:是否循环播放,默认为 false。

lottie_autoPlay:是否加载完成之后,自动播放,默认为 false。

获取网络上的动画:

try {
            JSONObject json = new JSONObject(Const.json);
            LottieComposition.Factory.fromJson(getResources(), json, new OnCompositionLoadedListener() {
                @Override
                public void onCompositionLoaded(LottieComposition composition) {
                    lottie1.setProgress(0);
                    lottie1.loop(true);
                    lottie1.setComposition(composition);
                    lottie1.playAnimation();
                }
            });
        } catch (JSONException e) {
            e.printStackTrace();
        }

原文地址:https://www.cnblogs.com/chhom/p/8758883.html

时间: 2024-10-16 16:53:03

Lottie 使用的相关文章

Lottie 动画

#### 三方框架之Lotti使用Lottie 的使用 1.添加 Gradle 依赖 dependencies { compile 'com.airbnb.android:lottie:1.5.3'} 2.使用View Lottie支持Jellybean(API 16)及以上.最简单的使用方法是LottieAnimationView < com .airbnb.lottie.LottieAnimationView android :id = " @ + id / animation_vie

站在 Android 开发的角度,聊聊 Airbnb 的 Lottie!!!

一.前言 你有没有遇上一些设计师,对一些酷炫的动画着迷,喜欢根据场景设计出可爱而流畅的动画.但是在实际工作中,哪怕开发人员也觉得这些动画非常的棒,可我们知道,越是定制化的动画,实现起来将会越麻烦和耗时.这有时候就会引发设计师和工程师的矛盾. 而自从 Airbnb 开发出 Lottie 之后,设计师只需要使用 After Effects 设计出完美的动画,然后通过 Bodymovin 插件进行简单的转换和导出成 JSON,最后工程师将 JSON 放入 App 项目中,就可以将动画 100% 还原到

Lottie 动画里有图片怎么办?设计师小姐姐也能帮你减少开发量!

一.序 Hi,大家好,我是承香墨影! Lottie 是 Airbnb 开源的一套跨平台的完整解决方案,设计师只需要使用 After Effectes (之后简称 AE)设计出动画之后,使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式,就可以直接运用在 iOS.Android 和 React Native之上,无需关心中间的实现细节. 这样,对于不同的工作角色来说,Lottie 带来的都是更简洁的工作流.开发小哥哥不再担心动画实现困难,设计师小姐姐也不需要担

Expo大作战(三十三)--expo sdk api之MapView(地图),MailComposer(磁力传感计),Lottie(动画)

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981 [之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:从零学习rn开发] 相关文章: Expo大作战(一)--什么是expo,如何安装expo clinet和xde,xd

Android Lottie(快速展示Adobe Afeter Effect(AE)工具所作动画的框架)

添加依赖compile 'com.airbnb.android:lottie:2.2.0' 进入下载Demo 将项目中的示例中的assets文件夹拷贝到自己新建的项目 https://github.com/airbnb/lottie-android <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com

[UWP]在UWP平台中使用Lottie动画

原文:[UWP]在UWP平台中使用Lottie动画 最近QQ影音久违的更新了,因为记得QQ影音之前体验还算不错(FFmepg的事另说),我也第一时间去官网下载体验了一下,结果发现一些有趣的事情. 是的,你没看错,QQ影音主界面上这个动画效果是使用Lottie动画实现的! 这让我大为惊奇,我对Lottie了解还算是比较多的,但是Lottie常见应用于移动端APP和网页,在传统桌面端见到还是第一次. 那就趁这个机会,来分享点关于Lottie动画的东西吧! Lottie动画的UWP实现 Lottie是

[UWP]缓存Lottie动画帧

原文:[UWP]缓存Lottie动画帧 在上一篇博文<[UWP]在UWP平台中使用Lottie动画>中我简单介绍了一下LottieUWP项目以及如何使用它呈现Lottie动画,这篇文章里我们来讲点进阶的东西--缓存Lottie动画帧. 为什么会有这样的需求呢? 有两方面原因: 直接在XAML中使用Lottie动画时,是边播放边渲染,计算量比较大,某些Lottie文件会非常吃性能!另外也会存在渲染不正确(有黑色区域)的情况,但是如果我们把每一帧缓存下来,自己控制播放的话,性能会提升很多! 应用于

lottie动画实战(仿汽车之家底部Tab切换动画)

GitHub地址:https://github.com/kongpf8848/Animation 效果如下: 主要是自定义View继承LottieAnimationView并实现Checkable接口,代码如下: import android.content.Context; import android.util.AttributeSet; import android.widget.Checkable; import com.airbnb.lottie.LottieAnimationView

iOS接入 Lottie

oc 用pod pod 'lottie-ios', '~> 2.5.2' 加载动画 @property (nonatomic, strong) LOTAnimationView * lottielogo; self.lottielogo = [LOTAnimationView animationNamed:@"LottieLogo1"]; self.lottielogo.contentMode = UIViewContentModeScaleAspectFill; self.lo