Activity动画演练



Android Activity 动画


上节课,我们学习了TransitionManager以及Scene的使用方法,讲解了在两个场景之间的变换,如何进行动画的方法?这次,我们在开头的部分,继续学习TransitionManager的一个简单的用法。


大家先看一个Demo。


0.png


1.png


这个Demo,是我之前给大家演示过的。其实,它是一个很简单的。那么,在这种情况下,它的动画原理是当前帧和下一帧之间,做一个场景变换。也就是说,当我点击鼠标的时候,当前是第一帧,点击鼠标完后,我会对这个View做一些改变,那么刷新识图之后,它就变成下一帧;那么,这个动画的原理就是说:在这一帧和下一帧之间创建一个类似于补间的一个效果。这个代码呢!说起来是非常简单,我们可以看一下:这就是我们的简单动画的代码,我们重点关注这一段代码:


2.png


首先,我创建了一个ChangeBounds的一个Transition:在上节课,我们学到了ChangeBounds它能够改变元素的形状、大小,它在里面去捕获getWidth和getHeight的方法,作为一个形状的变形。


3.png


在这个Transition里面呢,我给它设了个2秒钟,同时用了EaseBackInOutInterpolator这个差值器。


4.png


这次我们要讲的重点是,我们使用TransitionManager的。beginDelayedTransition方法,这个方法然后你要传一个你要动画的根节点进去,然后把这个Transition放进去,就ok了。


5.png


接下来的事情,调用上面那句之后,我们对要动画的这个元素改变它的属性,比如我这里是设置它的大小为400像素:


6.png


那么,它在这个地方对layout parameter进行修改,修改完之后,它会调用视图的方法,去刷新这个视图,那么刷新视图的时候,我们得到了下一帧;于是乎,它就在这一帧为改变尺寸之前和改变之后,创建一个补间动画,完成我们这种效果,它这是一种特殊的Transition动画,使用起来是非常的简单,这是上节课收尾的TransitionManager使用的方式。


7.png



Activity的动画


那么,这节课我们将进入Activity的动画。我们先看一下要实现的一个效果,这个效果之前也是给大家演示过的。我这里有一个很多图片的列表,是个grid。


8.png


然后,我点击其中一张图片,然后大家注意:这次我特地把时间放慢了。让大家清除的看到这个Activity的变化过程:


9.png


然后,图片慢慢放大了:


91.png


直到充满整个屏幕。


92.png


然后,我们再次点击,让图片返回:


93.png


然后,我们再点击另外一张图片:


94.png


然后,再让这张图片返回:


95.png


大家觉得,要实现这个动画,会不会非常的复杂?其实答案是非常的简单。因为在安卓L里面,它已经支持Activity的这种变换动画。


代码


首先,我们这个项目还是分为3个Activity。第一个Activity是我们的BaseActivity,是我们的基类。这里使用了一个ToolBar:


96.png


第二个Activity是HomeActivity,这是我们的主界面,就是第一个界面:


97.png


第三个Activity就是我们的DetailActivity,它的我们的第二个页面:


98.png


那么,我们要实现一个Activity的动画,先给大家讲一下这个Activity动画的原理。要实现这个Activity动画,那么第一步是要打开这个开关,使其内容能够具有动画变换的能力。毫无疑问,我们是应该在主题里面去设置,这是我这个应用的主题:


99.png


然后,我这个主题继承了AppTheme.Base:


990.png


然后,通过设置第一句话的属性,可以把这个效果打开:(如果该属性的值是false的话,那么它的效果是做不出来的)


991.png


如果是说,你没有在这个主题里面进行配置,你也可以通过写代码的方式来完成。你可以request一个Feature。这个代码和在主题里面配置的效果是一样的。只不过,一个是在主题里面去申明,一个是在代码里面动态去获取。


992.png


我先给大家讲一下Activity动画变换的原理:我们有一个Activity A,跳转到Activity B。那么这个过程是什么样子的呢?首先是,Activity A要消失掉,那么它我们定义的一个动作是exist。然后是Activity B的enter。那么从Activity B返回到Activity A呢?首先是Activity B的return动画;然后再是Activity A的reenter动画。这些动作,我们要理解它发生的时机,这样子我们才能更好的定义它的一个动画。好,我们还是回到代码中来。我们先跳过这两句:


993.png


这里是指reenter动画。


994.png


这个exist动画是什么动画呢?(是从A到B的时候,A的动画)


995.png


然后,这里有一个return:(是从B到A的时候,B本身的返回,就是return动画)


996.png


Enter动画,就是从A到B的时候,B的动画:


997.png


注意,我们又把它分解为:打开B或者从B回到A的时候,采用爆炸式;那么对B来说,A到B,然后从B返回A的时候,都是做一个消失的一个效果。这个整个都是对Activity的内容来说的:


998.png


那么,对于这里有一个SharedElementEnterTransition,它就跟我们之前的场景变换是一样的:如果是说,你在Activity的两个Activity之间定义了相同名称的元素,我们专门为这个名称定义为Transition Name。如果有这两个相同的元素,它会把这个两个元素给连接起来,做一个动画。


999.png


这个动画呢,我们可以看一下这张图:相当于在这些图片里面,我任意点击一张图片,那么这张图片就是连接Activity A以及Activity B之间的一个纽带。


0.png


那么,这张图片就是我们的SharedElement:


1.png


好,我们注意哈,进去的时候,这个Activity 是一个爆炸式的,B是慢慢进来的:


2.png


返回的时候也是,B是渐渐隐藏的,A是有这种爆炸式的向中间渐渐汇聚的这么一种方式来播放。


3.png


好,我们来看一下它的代码,代码也非常简单。GridView我们就不说了,我们来看一下,这个点击事件里面发生了什么事情。首先,它把这个url地址取出来。


4.png


然后调用这个DetailActivity,就是我们的下一个Activity的Launcher这个方法,来进行。那它传了什么值呢?它先传递了一个上下文,就是Activity它本身;然后传递了图片的对象;最后传递了刚才得到的url变量。


5.png


好,重点就在这个Launcher里面:我们注意到,这里使用了一个ActivityOptionsCompat的一个类,这个类呢,它首先是定义了,你怎么把这个共有元素传给下一个Activity。


6.png


这个OptionsCompat,首先调用了它的一个工厂方法来创建这个option。第一个参数是activity;第二个参数是我们要变换的这个View;第三个参数是给这个View起的一个名字。


7.png


然后,我们把这个option放到startActivity里面:然后把最后,这个option转换成bundle传过去。


8.png


这就是它启动的Activity:重点就是第一句话,传递了一个option。


9.png


我们注意到,当我们oncreate的时候,这里有一副图,它把图的名字命名为:EXTRA_IMAGE。


90.png


这个名称就和我之前的这个名称是一一对应的,不能错,错了的话,这个动画就播放不了。这个表示,那边传过来的元素是同一个元素,它才能播放这个动画。这个动画到此为止就实现了。


91.png


刚才跳过了这两句话,现在解释一下。这个overlap的意思就是重叠:比如说你在播放进入动画的时候,那么之前的退出动画是不是应该同时播放,可以重叠一小节;如果是true的话,就同时,感觉会顺滑一点儿,所以一般情况下,这里都会设为true,当然你也可以根据自己的需要去选择。


92.png


这就是Activity的动画,非常简单,下一次课我们给大家讲另外一个例子。



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

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

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

客服热线 400-862-8862

回到顶部