来一份Android动画全家桶

https://juejin.im/post/5b002a96f265da0b873ac44a---文档链接

前言

自上次《MTRVA2.0来啦》发布后，马上就有小伙伴问我有哪些Android动画，过了一段时间又有小伙伴问我啥时候发布Android动画。其实，在写《MTRVA2.0来啦》的时候，这次要讲的Android动画已经完成的差不多了，而在写这篇文章的时候，下个版本的内容也快写的差不多了（捂脸）。想提前学习的同学可以去我的开源项目CrazyDaily的develop分支，然后再跟我的文章过一遍，挺不错的学习方法。废话不多说，Android动画似乎已经是老生常谈的技术点，老生常谈的技术感觉总是潜移默化成为Android程序员的必备技能。今天，大家再跟我一起过一遍Android动画及进阶使用。

进阶使用。

 

 

 

效果图

国际惯例，No picture,say a J8!

 

 

 

先来看看今天讲解的内容吧！

 

• lottie
• 3D动画
• 列表侧滑删除
• 列表展开闭合
• 转场动画进阶
• 卫星菜单

一个大类可能包含多种动画，比如转场动画用到了贝塞尔曲线的路径动画。再则说到Android动画总是避免不了扯到View，所以期间会带大家玩一玩自定义View。

高能预警：本篇较长，可以先选择自己喜欢的内容进行阅读或者收藏一下有空再看。

温馨提示：想看针对第五章节额外附送的属性动画源码分析请点这里。

分析

这次的分析随着效果图的展示顺序一一讲解，首先，向我们迎面走来的是...额，不是，首先，是我们的可能是动画趋势的lottie动画。

lottie

简介

lottie可能是一个革命性的动画库。为什么这么说？当然也只是我想这么说，先来看看lottie的震撼特点：

• 跨平台，支持Web、Android、iOS和React Native
• 在线更新动画，意味着不用发版和减少资源的占用体积等
• 相对于原生动画和GIF更为轻量
• 代码实现简单，易于上手和维护

我们再来看看这样的一个效果图（官方效果图）：

 

 

 

这么说吧，这种效果原生肯定是能写的，但是非常费脑子和精力，不信的同学可以尝试一下。其次用帧动画，缺点也很明显，资源占用很大。最简单的就是一张GIF图片，没有什么动画是GIF搞不定的（手动滑稽），但这应该是最差的方案了。

而lottie只要一份记录动画信息的json文件，就可以在各大平台跑起来。是不是很炫酷？

Android

So Easy！除了这个词我还真没想到怎么形容。废话不多说，先上代码：

implementation 'com.airbnb.android:lottie:2.5.4' //gradle依赖

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/splash_lottie"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/splash_height"
        app:lottie_autoPlay="true"
        app:lottie_fileName="lottie/mtrva.json"
        app:lottie_imageAssetsFolder="images/mtrva/" />
复制代码

是的，就是这么简单，只要把你的json文件传给LottieAnimationView，它就可以流畅地播放起来，像如何在代码中使用及其它我就不一一贴出来了，大家可以点这里。

扩展

这才是重头戏，面试的时候说自己会实现复杂的动画可能是个卖点，但现在似乎这个工作可以被设计师取代，我们先不谈什么级别的设计师，我们先来说说为啥我们Android程序员不可以来完成这份工作呢？跟我抢饭碗？不可能！

正如项目中Splash页面底下文字[什么都懂一点，生活更多彩一些][廋金体]，感兴趣就玩一玩，真的很有意思！

简单分析一下，Splash页面的动画，logo图标沿着s型的路径，淡入，放大。很简单的一个动画，原生实现也是很简单的。重点在于如何开发这样的lottie动画，只需要Adobe After Effects+bodymovin就可以轻松导出一份这样的json文件。而详细的安装及环境配置可以点这里，不过英文要好哦，不然只能看看蹩脚的翻译。

简单的开发可以很快入门，我刚玩了一会儿，就开发了这样的一个效果：

 

 

 

很可惜，好像导出在Android端运行不太兼容，没有达到预期的效果，可能是我使用姿势不对。就玩了一会儿，弊端就体现出来了，这也是各种跨端的弊端，兼容性问题。一个库开源，使用者总是避免不了踩坑，例如上面xml中lottie_imageAssetsFolder属性添加是因为json中有图片资源，需要图片资源的路径且图片资源名要改为image_0，具体原因可以打开json文件瞧一瞧。

那么有同学问有没有什么现成的json吗？AE这玩意好像学起来挺麻烦的，这个肯定有，lottiefiles挺不错的一个网站，点击preview可以拖拽你的json文件进行预览和简单地编辑。

关于lottie动画介绍差不多就到这里，关键点都说了，剩下的可能是你的AE熟练度了。这玩意没法速成，需要大量经验积累！难点并不是技术，而是创意！创意！创意！

 

 

 

3D动画

进入首页，最先刺激我眼球的是右下角的妹子，其次是它的动画，这样的效果我最先在百度贴吧上看到的，现在好像去掉了，这也是我第一家公司面试的时候的作品，很有亲切感！

我们简单地拆解一下动画，可以分为这些：3D翻转、平移、阴影渐变和vignette。

3D翻转

这个动画的核心，用的是补间动画，你也可以植入view中，我相信这对你来说并不难。

拆解动画：view分为两面，一面翻上去或者一面翻下去，然后展示另一面，所以分为4个动画TopInAnimation、TopOutAnimation、BottomInAnimation和BottomOutAnimation，Top和Bottom为反向操作，因此这里只分析Top。

如果没图，我猜有些同学不好理解，这里给出一张中间单帧图，画得不好，谅解，谅解。

 

 

 

最后，感谢一直支持我的人！

传送门

Github：github.com/crazysunj/

博客：crazysunj.com/