ReView动画初探



ReView动画效果


这节课我们继续学习动画,这节课要学习的动画是安卓新引入的动画类型,叫ReView动画。所谓的ReView动画就是一种展示动画。我们先看一个示范:当我鼠标点击这些小圆圈的时候,它的一个动画效果:


0.png


当我点击小圆圈的时候,这些小圆圈会逐步的放大,到全屏,然后最后缩小到小圆圈上去。这就是所谓的ReView动画,它是把View按圆形进行剪切,然后不断改变它的半径,来达到一个动画的效果。


1.png


那么我们在讲解这个例子之前呢!我们还是先从一个最简单的例子入手大家请看,这是一个最简单的ReView动画:效果和刚刚是一样的,只不过我们换成了一张图片。我们先在这个简单的图片上做出类似于刚才的简单效果。


2.png


我点击图片,它消失掉了,按一种圆形的方式消失。


3.png


然后,我们把它展开:


4.png


这样的:


5.png


这个动画其实非常的简单,就是安卓新引入的一个API,叫:ViewAnimationUtils,是这个类里面的createCircularReveal方法。


6.png


这个方法呢,它有几个参数,我们一起来看一下。第一个参数是view:就是我们要给谁做动画。接下来的这两个参数是它的X和Y轴:即相对于这个View的一个它的位置,也就说我们要做圆圈动画的那个圆心所在处。然后就是半径:我们从哪一个点开始;然后做到哪一个点为止。


7.png


然后,我们还是来看一下具体的例子(我们先看一下布局),这个布局非常的简单,就只有一张图片。


8.png


好,我们找到这张图片:


9.png


然后,我们先看消失动画,大家可以考虑,消失动画,那么也就是说从最外面到缩小到中心。当我点击图片的时候,进行消失动画:


90.png


首先,我们要获取这个view的中间区域。


91.png


通过高度和宽度进行,除以2就获取到了我们图片的中心位置。


92.png


然后,把这个中心位置,作为参数传入到这里面去:


93.png


我们重点看这个地方,这就是我们API的一个使用:


94.png


首先,圆心定义好,然后从最开始的动画。也就是说,如果initialRadius大于0,那么这里就变成了消失动画,最开始缩小到圆心里面,结束。


95.png


然后,给它设了一个时间:


96.png


当然,如果你想要扩展的话,还可以设置差值器,你想要什么样的效果的话:


97.png


这里要提到一点的是,我这里增加了Animator Listener,做什么用的呢?是当我在这个动画结束的时候,我需要把这个视图给隐藏,主要目的是隐藏。


98.png


这里要特别注意的是:我们在隐藏的时候,这里能不能设为Gone啊?大家可以想一下,设成Gone,会发生什么。这个视图会在这个布局文件中不存在。如果它不存在了,当我在展示它的时候我能不能获取它的高和宽呢?当然不能。所以说这里必须是用invisible。以保证获取视图中心点的这个函数,可用。


99.png


当图片隐藏之后,我们点击菜单让图片重新显示出来,同样的这里获取到圆心:


990.png


然后在showRevealEffect函数里面设置显示的visibility:


991.png


然后,获取高度:


992.png


把它的高度作为圆心:


993.png


同样设了个时间,然后开始动画:


994.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部