精华内容
下载资源
问答
  • Lottie

    2019-12-30 21:09:14
    Lottie支持多平台,使用同一个JSON动画文件,可在不同平台实现相同的效果。Android 通过Airbnb的开源项目lottie-android实现,最低支持 API 16; 实现方式如下。 1、创建dom <div id="lottieBackground"></...

    Lottie支持多平台,使用同一个JSON动画文件,可在不同平台实现相同的效果。Android 通过Airbnb的开源项目lottie-android实现,最低支持 API 16;
    实现方式如下。
    1、创建dom

    <div id="lottieBackground"></div>
    

    2、页面引入json文件和lottie

    import lottie from 'lottie-web'
    import backgroundImg from '@/assets/lottie/data2.json'
    

    3、初始化

    data() {
          return {
            lottieBackground: ''
          }
        },
    mounted() {
    	this.initLottie();
    },
    

    4、启用动态效果

    methods: {
    	initLottie() {
    	    this.lottieBackground = lottie.loadAnimation({
    		    container: document.getElementById('lottieBackground'),
    		    renderer: 'svg',
    		    loop: true,
    		    autoplay: true,
    		    animationData: backgroundImg
    	    })
        }
    }
    
    展开全文
  • lottie

    2019-03-26 16:39:52
    1.Lottie是什么 Lottie是Airbnb开源的一个支持iOS,Android,React Native和Web的动画库,我们可以使用设计师导出来的json文件快速实现动画效果. 2.如果我们想要实现下列动画 我们使用现有技术会遇到的问题: 1.每一帧...

    1.Lottie是什么
    Lottie是Airbnb开源的一个支持iOS,Android,React Native和Web的动画库,我们可以使用设计师导出来的json文件快速实现动画效果.

    2.如果我们想要实现下列动画

    我们使用现有技术会遇到的问题:
    1.每一帧都是一张图片,文件过于庞大。

    2.不同分辨率设备的适配存在不便。

    3.Gif格式的色深问题无法解决。

    4.想要在线获取动画成本比较高。

    替代方案:
    现在可以使用开源的Lottie动画库来实现相应效果。

    UI需要做的是,通过AE生成动画,然后使用bodymovin插件导出json和sourse(非必须)文件即可。

    对比gif和json的大小及清晰度区别:

    上面的方案:原始518k,压缩后514k

    下面的方案:原始29k,压缩后5k

    3.使用方法
    1.直接添加一个动画视图

    2.switch类控件

    3.转场动画
    支持协议即可,在回调中使用动画

    4.代码结构
    LOTAnimationView

    继承自LOTView,也就是UIView,主要是封装了一些动画的操作

    LOTComposition(动画数据)

    用于解析动画的json文件,获取整个动画数据

    LOTLayerGroup(Layer动画组)

    解析json文件中的"layers" 层的数据返回所有LOTLayer 集合

    LOTLayer

    解析获得json文件中的每一个layer数据具体详情

    更多结构示意

    5.注意事项
    • 如果使用了素材, 那么素材图片的每个像素都会直接加载进内存, 并且是不能释放掉的, 所以, 如果是一些小图片, 加载进去也还好, 但是如果是整页的启动动画, 不拆分一下素材, 可能一个启动页所需要的内存就是50MB以上. 如果不使用素材, 而是在AE中直接绘制则没有这个问题.

    • 如果使用的PS中绘制的素材, 在AE中做动画, 可能在动画导出的素材中出现黑边, 解决办法是将素材拖入PS去掉黑边, 同名替换.

    • 拆分素材的办法是将一个动画中静态的部分直接切出来加载, 动的部分单独做动画

    • 如果一个项目中使用了多个Lottie的动画, 需要注意Json文件中的路径及素材名称不能重复, 否则会错乱

    • Lottie先天就支持播放式动画, 对于交互式动画有个animationProgress的属性

    4.其他
    图片的另一种形式-矢量图

    导入工程的方式:

    1.简单使用
    与 PNG 格式的图片一样,在 Xcode 中把 PDF 格式的矢量图拖进 *.xcassets (默认是 Assets.xcassets) 文件夹中,然后用不带后缀(.pdf)的文件名生成 UIImage

    imageView.image = [UIImage imageNamed:@“Vector”];

    注意,如果以上代码用 “Vector.pdf”,无法得到 UIImage。

    这样做的话,Xcode 会在编译时根据 PDF 图的大小生成 @1x、@2x、@3x 的 PNG 图片,与使用 PNG 图片的显示效果相同。如果把图片放大到超过 PNG 图片的大小,则会显示模糊的图片。没有发挥矢量图可以任意调整大小的优点。

    2.改变矢量图大小
    如果需要改变矢量图大小并且保持清晰度,那就要解析 PDF 源文件,把矢量图绘制成所需大小的位图(Bitmap)。YHPDFImageLoader 库就实现了这个功能,并且可以选择拉伸图片时是否保持原图宽高比,还添加了内存和磁盘缓存。这里的 PDF 文件放在工程目录中,与 .m、.h 文件一样,可以放在bundle,不能放在 *.xcassets 里。

    矢量图加入工程中的优点

    1.APP 瘦身
    对比一下某个图标的一套常规的 PNG 图片和 PDF 类型的图片的大小:

    网络资源
    PDF 文件大小为 7KB

    PNG 三个文件合计大小为 85KB

    这里的PNG图片还可以压缩,压缩后可能会有较大幅度变更.

    2.便于维护
    方便后续的不同scale变化,不必要使用4x,5x等尺寸

    3.可以无限放大
    在文件大小固定的情况下可以无限放大,更加节省空间

    其他工具 - PaintCode
    代码直接将SVG文件转换成iOS代码,可以放到drawRect中实现纯代码绘制相应UI样式

    展开全文
  • lottie-源码

    2021-03-06 07:23:55
    lottie
  • lottie 资源

    2018-02-01 14:28:49
    Android lottie资源,用户显示lottie 动画,Ari bnb 需求。
  • Lottie使用说明

    2021-01-02 08:27:15
    Lottie使用说明
  • lottie demo

    2018-08-21 21:42:58
    lottie demo,实现ae生成简单动画,引入as中,实现android动画
  • lottie_imgs lottie_imgs
  • 洛蒂 Lottie的简要用法。
  • Lottie使用

    2019-12-01 12:16:55
    Lottie是Airbnb开源的一个动画渲染库,支持多平台,包括iOS、Android、React Native以及Web。 Lottie动画的制作流程如下: 设计师通用After Effects 制作动画,然后通过Bodymovin插件导出对应的json文件,给到每个端...

    一、简介

    Lottie是Airbnb开源的一个动画渲染库,支持多平台,包括iOS、Android、React Native以及Web。
    Lottie动画的制作流程如下:
    设计师通用After Effects 制作动画,然后通过Bodymovin插件导出对应的json文件,给到每个端的研发,然后进行编译展示。
    -w672

    官网地址
    GitHub地址

    二、简单使用

    1、依赖引入

    build.gradle 增加以下配置,最新版本号可在官网获取。或者从https://mvnrepository.com/这个地址可以找到maven库里面每个开源库所有的版本号。
    implementation 'com.airbnb.android:lottie:2.0.0'

    2、使用

    在代码里面创建一个LottieAnimationView对象,然后使用setAnimation设置存放在assets目录下的JSON文件,然后运行就可以看到对应的动画效果了。

    public class LoadingView extends FrameLayout {
    
        private LottieAnimationView lottieAnimationView;
    
        public LoadingView(@NonNull Context context) {
            super(context);
            lottieAnimationView = new LottieAnimationView(getContext());
            LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 1000);
            layoutParams.gravity = Gravity.CENTER;
            addView(lottieAnimationView, layoutParams);
            lottieAnimationView.setAnimation("LottieLogo1.json");
            lottieAnimationView.setRepeatCount(ValueAnimator.INFINITE);
        }
    
        @Override
        protected void onAttachedToWindow() {
            super.onAttachedToWindow();
            lottieAnimationView.playAnimation();
        }
    }
    

    这里有个小细节需要注意一点,如果遇到首次播放不了的情况,可以将playAnimation的调用,放在onAttachedToWindow的下面,具体原因后面解释。

    三、进阶用法

    多样的数据源

    • a、从raw文件夹获取:src/main/res/raw
    • b、从src/main/assets加载zip文件;
    • c、从一个指向json文件或者zip文件的url;
    • d、从网络返回的json字符串;
    • e、从InputStream获取到的json文件或者zip文件;
      带来的好处就是,根据根据诉求可以动态进行改变。

    代码变色

    lottie提供了三个改变颜色的API,

    addColorFilter();
    addColorFilterToLayer();
    addColorFilterToContent();
    
    • addColorFilter
      调用LottieAnimationView的addColorFilter方法,即可修改对应的颜色。
    lottieAnimationView.addColorFilter(new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP));
    

    譬如,官方demo 里面的HamburgerArrow.json文件,原先是紫色的,增加上以上代码之后,整个就变成了红色。
    -w229
    -w254
    注意,这种修改方式,只能使用在背景透明的动画上,如果lottie动画本身就自带了背景色,那这种方式并不适用。因为addColorFilter的实现原理是为每一层都加上了colorfilter,对应的源码如下:

      @Override public void addColorFilter(@Nullable String layerName, @Nullable String contentName,
          @Nullable ColorFilter colorFilter) {
        for (int i = 0; i < layers.size(); ++i) {
          final BaseLayer layer = layers.get(i);
          final String name = layer.getLayerModel().getName();
          if (layerName == null) {
            layer.addColorFilter(null, null, colorFilter);
          } else if (name.equals(layerName)) {
            layer.addColorFilter(layerName, contentName, colorFilter);
          }
        }
      }
    

    会连背景色也被替换成为红色。导致看不出动画效果。

    • addColorFilterToLayer
      为了解决上面提到的问题,lottie提供了另外一个apiaddColorFilterToLayer,可以在指定的layer上增加对应的colorfilter.

    • addColorFilterToContent
      进一步的,通过addColorFilterToContent可以给对应的layer的content,增加对应的色值。

    setSpeed

    设置播放速度,譬如如果设置了2,就是普通不设置场景下的2倍速度进行播放。

    setProgress

    设置开始播放的进度。第一次播放的时候,从整体进度的百分之多少开始执行动画,如果是loop的方式,只会影响第一次的进度。

    设置动画监听

    lottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
            
        }
    
        @Override
        public void onAnimationEnd(Animator animation) {
    
        }
    
        @Override
        public void onAnimationCancel(Animator animation) {
    
        }
    
        @Override
        public void onAnimationRepeat(Animator animation) {
    
        }
    });
        lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {}});
    

    性能提升

    1、Lottie动画如果包含遮罩、阴影或者蒙版,在性能会有所下降;如果必须使用遮罩,务必让其覆盖最小的区域。
    2.在列表中使用lottie动画,要使用缓存,避免内存抖动
    3.开启硬件加速。默认是关闭的。

    四、其他效率提升工具

    1、JSON文件预览地址

    五、参考链接

    https://blog.csdn.net/weixin_37618354/article/details/84072783

    展开全文
  • 这提供了一个使用Lottie-Web库的Lottie播放器,并添加了一个控制工具栏,渲染图和其他方便的配置以查看Lottie动画。 特征 通过道具配置彩票网 控制工具栏,具有播放,暂停,停止,带有寻道器的进度跟踪,循环播放 ...
  • NativeScript-Lottie NativeScript插件可显示Airbnb Lottie的超棒动画。 在Android上使用 ,在iOS上使用 。 演示画面 .gif不能使动画流畅 安装 要安装执行: tns plugin add nativescript-lottie 用法 普通{N} ...
  • Lottie 浅析

    千次阅读 2019-11-29 18:56:39
    Lottie 简介 Lottie是是一个可以解析Adobe After Effects使用BodyMovin插件导出的动画json文件,并且渲染到手机和网页上的库,Lottie支持Android,iOS,Web和Windows。 Lottie Android 如何使用 Lottie在Android仅...

    Lottie 简介

    Lottie是是一个可以解析Adobe After Effects使用BodyMovin插件导出的动画json文件,并且渲染到手机和网页上的库,Lottie支持Android,iOS,Web和Windows。

    Lottie Android

    如何使用

    Lottie在Android仅支持Gradle的形式依赖,需要在你的build.gradle中添加以下的依赖

    dependencies {
        ...
        implementation "com.airbnb.android:lottie:$lottieVersion"
        ...
    }
    

    到目前为止最新的版本是: 3.1.0

    支持的文件类型

    Lottie支持API 16以上,也就是android 4.1以上。

    • src/main/res/raw目录下的json动画文件
    • src/main/assets目录下的json动画文件
    • src/main/assets目录下的zip文件
    • json或者zip的url链接
    • json字符串,可以是通过网络请求获得的。
    • json或者zip文件的InputStream

    在XML中如何使用

    这是最简单的方式,推荐使用lottie_rawRes,因为你可以通过资源引用来使用静态的动画文件。

    <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
    
            app:lottie_rawRes="@raw/hello_world"
            // or
            app:lottie_fileName="hello_world.json"
    
            // Loop indefinitely
            app:lottie_loop="true"
            // Start playing as soon as the animation is loaded
            app:lottie_autoPlay="true" />
    

    动画的缓存

    所有的Lottie的动画都默认使用了LRU缓存机制。这个是2.6.0版本更改的,之前的版本是用Strong/WeakRef实现的。

    Animation Listeners

    你可以控制动画或者增加监听器:

    animationView.addAnimatorUpdateListener((animation) -> {
        // Do something.
    });
    animationView.playAnimation();
    ...
    if (animationView.isAnimating()) {
        // Do something.
    }
    ...
    animationView.setProgress(0.5f);
    ...
    

    在监听的代码中,你可以通过animation.getAnimatedValue()来获取当前动画的进度,不论是否设置了最大/最小的帧[0,1]。animatin.getAnimatedFraction()将会返回你设置大小的进度。

    自定义动画过程

    大部分情况下,直接使用playAnimation()即可,一些特殊的case,你也可以使用setProgress(...)来启动滑动,例如:

    
    // Custom animation speed or duration.
    ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f);
    animator.addUpdateListener(animation -> {
        animationView.setProgress(animation.getAnimatedValue());
    });
    animator.start();
    

    Looping

    Lottie支持重复播放,你可以使用setRepeatMode(...)或者setRepeatCount(...),或者在xml中使用lottie_loop="true"

    动画的尺寸(px vs dp)

    Lottie将所有的px值转换为dp值,这样就能保证在所有的设备上的大小是一致的。如果你的动画尺寸不是完美的,你可以有以下两个选择:

    • Image scaleType: LottieAnimationView继承自ImageView,它同样支持centerCropcenterInside两个属性
    • Scaling Up/Down: LottieAnimationViewLottieDrawable都有setScale(float)的API函数,PS:如果缩小你的动画,也可以减少每帧需要绘制的大小,也就是会提升性能。

    动态属性

    你可以在运行时动态的更新属性,这个可以帮你完成很多需求:

    • 改变主题(白天或者夜晚的主题)
    • 根据时间的相应来做出相应的事件
    • 不同的事件执行不同的动画

    Lottie实现原理

    基础概念

    图层

    图层的概念与Photoshop中的图层概念类似:图层是对整个动画进行了更细粒度的区分,将不同的类型元素进行了拆分,将不同的形状、纯色、文本等元素分别分配到不同的图层中,所有图层依序叠加在一起构成了所渲染的图像。在未与其他图层关联时,修改某一图层的属性不会影响到其他图层,这样在执行动画的时候可以更加清晰的对各个元素执行不同的动画逻辑。

    public enum LayerType {
        PRE_COMP,
        SOLID,
        IMAGE,
        NULL,
        SHAPE,
        TEXT,
        UNKNOWN
      }
    

    关键帧

    动画的单位是帧,预先设定初始值和目标值,在一段时间内不断改变这个值向目标靠近,这个初始值和目标值就可以认为是关键帧,在这之间可以插入多个关键值,这样就会有多个关键帧了。

    json

    {
      "v": "4.10.1", //版本号
      "fr": 25, // 帧率
      "ip": 0, // 首帧
      "op": 106, //尾帧
      "w": 1920, //宽
      "h": 1080, //高
      "nm": "Comp 1", //名称
      "ddd": 0,
      "assets": [], //图片集合
      "fonts": {...}, //字体
      "layers": [
        {
          "ddd": 0,
          "ind": 1, //图层id
          "ty": 4, //图层类型index-shape
          "nm": "perki Outlines", //图层name
          "sr": 1, //transform
          
      ...
    

    原理

    核心类:

    • LottieAnimationView继承自AppCompatImageView,通过它加载展示各种动画
    • LottieComposition通过生成LottieCompositionFactory解析json文件,转换成Java数据对象
    • LottieDrawable负责绘制逻辑
    1. 如何解析json文件
    2. 如何渲染json文件
    3. 动画播放

    解析Json文件

    在这里插入图片描述

    渲染动画

    LottieDrawable.draw() -> CompositionLayer.draw() -> Layers.draw()
    在这里插入图片描述

    动画

    LottieAnimationView.playAnimation -> LottieDrawable.playAnimation -> LottieValueAnimator.playAnimation

    
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
     @Override public void onAnimationUpdate(ValueAnimator animation) {
        if (compositionLayer != null) {
          compositionLayer.setProgress(animator.getValue());
        }
      }
    });
    

    在这里插入图片描述

    优缺点

    优点

    1. 跨平台,同一份json文件可以同时在iOS和Android上运行
    2. 不需要Native工程师制作动画,提高效率,并且更加精美的动画
    3. 动态替换,不仅支持本地json,zip文件而且支持url远端拉去数据
    4. 相比较webp、gif动画,json的文件更小
    5. 轻量级sdk

    缺点

    1. Masks 和 mattes会有较大的性能问题,并且蒙层/遮罩的交集成比例上升,如果开启硬件加速,可能会有几倍的性能提升
    展开全文
  • lottie使用

    2019-12-17 16:37:02
    lottie:设计师制作动画,并提供json文件。前端可以使用对应的api操作时间流,对动画进行一些事件上的操作。 官网文档:https://github.com/airbnb/lottie-web 一. 下载依赖 npm install lottie-web 二. 在组件...
  • Lottie for Android, iOS, React Native, Web, and Windows Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them ...
  • Lottie Android 初探Lottie是一个支持Android、iOS、React Native,并由 Adobe After Effects制作aep格式的动画,然后经由bodymovin插件转化渲染为json格式可被移动端本地识别解析的Airbnb开源库。Lottie实时呈现...
  • Lottie-Windows是一个用于在应用程序中本地渲染动画的库。 该项目将Windows添加到系列工具中,这些工具也针对 , 和 。 Lottie简化了设计到代码的工作流程,以将引人入胜的交互式矢量动画带入Windows应用程序,与...
  • Lottie / Bodymovin Remotion 控制器。 安装 npm install remotion-lottie 要么 yarn add remotion-lottie 用法 将您的动画加载到Lottier组件中。 加载库和 Lottie JSON 文件 import { Lottier , useLottie } from ...
  • Lottie Demo apk

    2017-02-24 09:34:56
    Lottie动画官方demo的apk

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,952
精华内容 1,580
关键字:

lottie