全平台丝滑的动画-lottie(android篇)

2020-06-08 本文已影响0人 v587的毅哥

不好意思不会有iOS篇了，我不会。flutter的话看情况吧。

预览效果
这种动画我想，如果用自己用Canvas去画要废点脑细胞了，如果用lottie则很简单了。

android github地址：https://github.com/airbnb/lottie-android

简单介绍一下lottie:让设计师用AfterEffects设计动画，然后导出为Json格式的文件，放到各个平台中后，再集成lottie的sdk渲染它！

设计师该怎么做？

安装插件
从官方文档https://github.com/airbnb/lottie-web里可以看到有6种方式。这里只说最简单的说说mac的方式。详细见上面这个网址：

$ brew tap danielbayley/adobe
$ brew cask install lottie

安装后
Windows：转到“编辑”>“首选项”>“脚本和表达式...”，然后选中“允许脚本编写文件和访问网络”
Mac：转到Adobe After Effects>首选项>脚本和表达式...>并选中“允许脚本编写文件和访问网络”
旧版本
Windows：转到“编辑”>“首选项”>“常规”>，然后选中“允许脚本编写文件和访问网络”
Mac：转到Adobe After Effects>首选项>常规>，然后选中“允许脚本编写文件和访问网络”
安装HTML播放器

$ npm install lottie-web
$ bower install bodymovin

怎么设计？
视频详见（需要翻墙）：https://www.youtube.com/watch?v=5XMUJdjI0L8
文字版：
- 打开您的AE项目，然后在“窗口”>“扩展”>“ bodymovin”中选择bodymovin扩展名。
- 将打开一个面板，其中包含“成分”选项卡，其中列出了所有项目成分。
- 选择要导出的合成。
- 选择一个目标文件夹。
- 点击渲染
- 查找导出的json文件（如果动画上有图像或AI层，将有一个包含导出文件的图像文件夹）

android开发者怎么做？
1. 在app的gradle里加入引用implementation 'com.airbnb.android:lottie:3.4.0'
2. 下载这个https://github.com/airbnb/lottie-android/blob/master/LottieSample/src/main/assets/lottiefiles/deadpool.json
  json，在res里新建一个raw目录，然后放到里面
3. 在xml里贴上控件

  <com.airbnb.lottie.LottieAnimationView
          android:id="@+id/lottie_layer_name"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:lottie_loop="true"
          app:lottie_autoPlay="true"
          app:lottie_rawRes="@raw/deadpool" />

运行程序，搞定！

怎么在程序里控制它(kotlin版)？详细见官方文档：http://airbnb.io/lottie/#/android
1. 播放/暂停/循环播放
  去掉上面xml的app:lottie_autoPlay="true"和app:lottie_loop="true"，然后在代码里：

  lottie_layer_name.playAnimation()
  lottie_layer_name.pauseAnimation()
  lottie_layer_name.repeatMode = LottieDrawable.RESTART
  lottie_layer_name.repeatCount = ValueAnimator.INFINITE

动画的进度回调

  lottie_layer_name.addAnimatorUpdateListener {
    Log.d("tag",it.animatedValue.toString())
    //it是一个ValueAnimator，更多方法和属性自己点进去看
  }

怎么控制进度？
比如根据当前的一个动画进度来控制它的进度

  val animator = ValueAnimator.ofFloat(0f, 1f)
    animator.addUpdateListener { animation: ValueAnimator ->
    lottie_layer_name.progress = animation.animatedValue.toString().toFloat()
  }
  animator.start()

怎么动态改变动画(局部)的属性(上面gif里的眼睛在绿色和白色之间变化)？
这个得分2步：
1.找到对应的KeyPath。
在界面上随便加一个按钮btn1

       btn1.setOnClickListener {
          lottie_layer_name.resolveKeyPath(KeyPath("**")).forEach {
            Log.d("tag","KeyPath$it")
          }
        }

此时会打印出类似如下的log信息：

      KeyPathKeyPath{keys=[note_big_02],resolved=true}
      KeyPathKeyPath{keys=[note_big_02, note_big_02],resolved=true}
      KeyPathKeyPath{keys=[note_big_02, note_big_02, Path],resolved=true}
      ……
      KeyPathKeyPath{keys=[eye_left],resolved=true}
      KeyPathKeyPath{keys=[eye_left, Group 1],resolved=true}
      KeyPathKeyPath{keys=[eye_left, Group 1, Fill 1],resolved=true}
      ……

其中，eye_left、Group 1、Fill 1就是图层关系与属性，在AfterEffects里大概是这样的：

aftereffectskeypath.png
其实，最好的方式还是直接问设计师某个图层的名字和属性,上面我们自己来找只是在目前没有设计师的情况下。
2.写代码来改变属性

      //左眼
      lottie_layer_name.addValueCallback(
            KeyPath("eye_left", "Group 1","Fill 1"),
            LottieProperty.COLOR_FILTER,
            { frameInfo ->
                if (frameInfo.overallProgress < 0.5) SimpleColorFilter(Color.GREEN) else SimpleColorFilter(
                    Color.WHITE
                )
            }
        )
        //右眼
        lottie_layer_name.addValueCallback(
            KeyPath("eye_right", "Group 1","Fill 1"),
            LottieProperty.COLOR_FILTER,
            { frameInfo ->
                if (frameInfo.overallProgress < 0.5) SimpleColorFilter(Color.GREEN) else SimpleColorFilter(
                    Color.WHITE
                )
            }
        )

另外，除了上面这个属性，还有其他一些属性可以这么改，这里就不作赘述了。
附属性：