zoukankan      html  css  js  c++  java
  • 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_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 “ />
    }

    或者从 代码中加载。 从 app / src / main / assets中的json资源:

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


    如果你想复用动画,比如在列表中的每个项目或者从网络请求加载JSONObject

    LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
    ...
    Cancellable compositionCancellable = LottieComposition.Factory.fromJson(getResources(), jsonObject, (composition) -> {
    animationView.setComposition(composition);
    animationView.playAnimation();
    });


    然后控制动画执行或者对动画添加监听

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

    // 自定义动画的速度和持续时间

    ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
    .setDuration(500);
    animator.addUpdateListener(animation -> {
    animationView.setProgress(animation.getAnimatedValue());
    });
    animator.start(); // 动画开始
    ...
    animationView.cancelAnimation(); // 关闭

    支持 After Effects 的功能

    关键的插值器

    • Linear Interpolation 线性插值器
    • Bezier Interpolation 贝塞尔插值器
    • Hold Interpolation 保持插值器

    Rove Across Time

    Spatial Bezier

    固定变换

    • Transform Anchor Point 锚点变换
    • Transform Position 位置变换
    • Transform Scale 伸缩比例变换
    • Transform Rotation 旋转变换
    • Transform Opacity 透明度变换

    遮罩 (碉堡了!)

    Path 路径

    • Opacity 不透明度
    • Multiple Masks (additive, subtractive, inverted) 多重多样的遮罩

    Track

    • Alpha Matte 透明度遮罩

    Parenting

    Multiple Parenting

    Nulls

    图层形状

    • Rectangle (All properties) 矩形
    • Ellipse (All properties) 椭圆
    • Polystar (All properties) 北极星?什么鬼
    • Polygon (All properties. Integer point values only.) 多边形
    • Path (All properties) 路径

    Anchor Point 锚点

    Position 位置坐标

    Scale 缩放

    Rotation 旋转

    Opacity 不透明

    Group Transforms (Anchor point, position, scale etc) 合成变换

    Multiple paths in one group 多路径合成

    冲程(形状层,外层)

    • Stroke Color 描边颜色
    • Stroke Opacity 不透明描边
    • Stroke Width 描边宽度
    • Line Cap 压线帽
    • Dashes 破折号

    填充

    • Fill Color 填充颜色
    • Fill Opacity 填充不透明度

    修剪路径

    • Trim Paths Start
    • Trim Paths End
    • Trim Paths Offset

    性能和内存

    1、如果组合没有用到遮罩masks或mattes,那么性能和内存开销应该相当不错。没有创建位图bitmap,大多数操作都是简单的画布操作。

    2、如果组合中有遮罩masks或mattes,将在合成的地方创建2-3个bitmap,当动画师徒添加到view时,bitmap由lotti自动创建,并在View删除时被回收。所以不建议在RecyclerView中使用带有遮罩masks或mattes的动画,可能会造成溢出。(后面看到git又把这一条更新掉了,索性还是贴上来吧)!后来看到Git更新为:如果组合有遮罩或遮罩,将使用屏幕外缓冲区,画面以外的缓冲区的使用和性能会有影响了。

    3、如果在list中使用,建议在LottieAnimationView.setAnimation(String,CacheStrategy)中使用CacheStrategy,因此动画不必每次都反序列化。

  • 相关阅读:
    SQL注入过滤
    ASP.NET长文章分页
    简单的权限管理类
    不错的面试题
    【转载】【重要】Ubuntu Linux 下 Ffmpeg 及 Mencoder 安装使用小结
    回到xwindows
    suse11 linux不自动启动xwindows
    flash的几种工具
    mencoder和ffmpeg参数详解
    ffmpeg和Mencoder使用实例小全
  • 原文地址:https://www.cnblogs.com/fanfusuzi/p/6847161.html
Copyright © 2011-2022 走看看