来一份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/

猜你喜欢

转载自blog.csdn.net/u014644594/article/details/86529050
今日推荐