浅析Android动画(一),View动画高级实例探究

本猿自诩Android小白,天然呆谷粉米粉,爱开源,更爱漂亮妹纸((^o^)/~来跟我一起唱:原谅我一生放荡不羁爱自由~~~请自行脑补掌声三分钟^O^);好了好了说人话:本猿中南大学大三狗一个,每天最快乐的时光都与14寸的DeskTop为伴,曾经我是一个热爱并略懂Java和Android的小白,现在我是一个热爱并熟悉Java和Android的小白,就这样!聊技术谈梦想欢迎私信 @哈皮小猿_wondertwo

视图动画的基本用法

提起 Android 动画很多初学者就会一脸懵逼二阶茫然,当初翻遍图书馆的一大堆入门书籍都找不到一本书在讲 Android 动画机制,好在一颗痴迷技术的心让我自备燃料有始有终,最后总算弄明白了 Android 动画到底是个什么鬼。其实我们有木有经常用手机拍了很多漂亮照片以后,打开相册,点击更多,点击自动播放,这些静态的照片就会连贯的播放起来了有木有?这其实就是逐帧动画,类似于动画片的效果。是不是很简单呢?关于Android动画的分类我查了很多资料,最初只有两种动画即逐帧动画(frame-by-frame animation)和补间动画(tweened animation),补间动画只需要开发者设置动画的起始值和结束值,中间的动画由系统自动帮我们完成,下面要介绍的视图动画就属于补间动画。但是从Android 3.x开始谷歌引入了一种全新的动画——属性动画,相对于视图动画只能给View对象设置动画效果来说,属性动画要强大的太多,只要是一个Object对象属性动画都能为其设置动画属性,不管这个对象能不能看得见,会不会与用户产生交互。关于属性动画的用法会在下一篇博客中详细介绍,下面的主要以讲解视图动画为主。视图动画即我们常说的 View Animation, 有四种效果如下:

  • 透明度变化(AlphaAnimation);
  • 位移(TranslateAnimation);
  • 缩放(ScaleAnimation);
  • 旋转(RotateAnimation);

可以从Android api文档看到视图动画 Add in api level 1 ,算是 Android 动画家族中的老腊肉了。那我们就从视图动画的基本用法着手,一步步深入学习!这里先放上狂炫酷帅的QQ客户端抖一抖动画和3D旋转&电视关闭画面的自定义动画,哈哈,这都是用视图动画做出来的效果哦!

QQ抖一抖

电视关机画面&3D旋转

哈哈,上面的自定义动画有木有惊艳到你呢?“每一个宅男心中都藏着一个女神”,你看的没错!画面中就是我的女神——张钧甯。上面的动画特效是在四种最基本的视图动画的基础上稍加改进出来的,那么四种基本的视图动画效果如何呢?

AlphaAnimation

ScaleAnimation

RotateAnimation

TranslateAnimation

分别对应着透明度变化(AlphaAnimation),缩放(ScaleAnimation),旋转(RotateAnimation),位移(TranslateAnimation); View 动画的四种变换效果对应着的 AlphaAnimation , ScaleAnimation , RotateAnimation , TranslateAnimation 这4个动画类都继承自 Animation 类,Animation 类是所有视图动画类的父类,后面讲解的自定义动画类其实也必须继承 Animation

并且既可以在代码中动态的指定这四种动画效果,也可以在 xml 文件中定义, xml 文件中视图动画的目录是 res/anim/file_name.xml ,与视图动画不同, xml 文件中属性动画的目录是 res/animator/file_name.xml ,不过属性动画并不推荐在 xml 文件中定义,关于属性动画请关注我的下一篇博客哦 。xml 文件中视图动画代码如下,透明度动画对应标签 ,缩放动画对应标签 ,旋转动画对应标签 ,位移动画对应标签 ,根标签 就表示一个动画集合 AnimationSetshareInterpolator="true" 表示动画集合中的所有动画共享插值器,反之shareInterpolator="false" 表示不共享插值器,关于插值器会在第二篇博客的属性动画中详细介绍。

以上代码标签中的属性值,其具体含义如下:

  • alpha
    • fromAlpha —- 透明度起始值,0表示完全透明
    • toAlpha —- 透明度最终值,1表示不透明
  • scale
    • fromXScale —- 水平方向缩放的起始值,比如0
    • fromYScale —- 竖直方向缩放的起始值,比如0
    • toXScale —- 水平方向缩放的结束值,比如2
    • toYScale —- 竖直方向缩放的结束值,比如2
    • pivotX —- 缩放支点的x坐标
    • pivotY —- 缩放支点的y坐标(支点可以理解为缩放的中心点,缩放过程中这点的坐标是不变的;支点默认在中心位置)
  • translate
    • fromXDelta —- x起始值
    • toXDelta —- x结束值
    • fromYDelta —- y起始值
    • toYDelta —- y结束值
  • rotate
    • fromDegrees —- 旋转起始角度
    • toDegrees —- 旋转结束角度

除此之外,还有一些常见的属性值,如下:

  • android:duration —- 动画的持续时间
  • android:fillAfter —- true表示保持动画结束时的状态,false表示不保持

上面就是通过 xml 文件定义的 View 动画,那怎么应用上面的动画呢?也很简单,通过 View 对象在代码中动态加载即可,代码如下。值得注意的是,AnimationUtils.loadAnimation(this, R.anim.ani_view) 方法接收两个参数,第一个是当前的上下文环境,第二个就是我们通过 xml 定义的动画啦。代码如下:

OK那么问题来了,怎样直接通过代码动态定义 View 动画呢?也很简单,先上代码如下:

AlphaAni—-透明度动画代码如下,相信你经过前面的部分已经能很容易就看懂这些代码了,在 beginAnimation() 方法中,我们在3000ms的时间内把一个 LinearLayout 对象 llAlpha 的透明度从0到1,即从完全透明渐变到完全不透明,然后在 onCreate() 方法中调用 beginAnimation() 方法就能以透明度渐变动画的方式跳转到 AlphaAni :

ScaleAni—-缩放动画代码如下,与上面的透明度渐变动画类似,通过 ctrl+左键 查看源码可以知道,在创建 ScaleAnimation 缩放动画的对象的时候, ScaleAnimation(0, 2, 0, 2) 接受的四个参数分别是 ScaleAnimation(float fromX, float toX, float fromY, float toY)

RotateAni—-旋转动画代码如下,表示把一个 View 对象从起始角度0旋转到360度,后面的四个参数 RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f 表示以中心位置为旋转支点:

TranslateAni—-位移动画代码如下,表示把 View 对象从起始坐标 (0, 0) 位移到 (200, 300) ,是不是很简单呢:


视图动画的高级用法

趁热打铁,接下来正是掌握 View 动画高级用法的好时机啦,所谓高级用法,其实也很简单,就是把上面的四种基本效果进行任意的排列组合,然后设定重复次数、重复模式(常用的重复模式有顺序、逆向等等),同时启动或者延迟一定的时间启动动画!为了更直观感受视图动画的高级用法,直接上图请往下看,一种很酷炫的图片旋转飞入效果!

四种基本效果的组合动画

直接上代码如下,看过代码肯定会觉得,不就是把上面介绍的四种动画组合到一起了嘛,事实上就是这么简单。

唯一不同的是,我们这次是把四个 View 动画装进了一个动画集合(AnimationSet)中,至于动画集合,你就把他当做普通的 Set 集合使用就好,创建动画集合时传入的参数 false 表示动画集合中装入的和四个 View 动画不共享插值器。到这里你已经学会 View 动画了,但是后面还有更高级用法呢!


自定义View动画

当你看完上面的 View 动画,自定义 View 动画对你来说已经不在话下,我准备的两个 demo 你肯定很期待,分别是:模仿QQ客户端的抖一抖特效,和电视画面关闭&3D旋转,效果如下:

QQ抖一抖

模仿QQ客户端的抖一抖特效,先上代码!

上面这段代码就是我们自定义的QQ抖一抖动画了,所有的自定义动画都需要继承 android.view.animation.Animation 抽象类,然后重写 initialize()applyTransformation() 这两个方法,在 initialize() 方法中对一些变量进行初始化,在 applyTransformation() 方法中通过矩阵修改动画数值,从而控制动画的实现过程,这也是自定义动画的核心。 applyTransformation(float interpolatedTime, Transformation t) 方法在动画的执行过程中会不断地调用,可以看到接收的两个参数分别是 float interpolatedTime 表示当前动画进行的时间与动画总时间(一般在 setDuration() 方法中设置)的比值,从0逐渐增大到1; Transformation t 传递当前动画对象,一般可以通过代码 android.graphics.Matrix matrix = t.getMatrix() 获得 Matrix 矩阵对象,再设置 Matrix 对象,一般要用到 interpolatedTime 参数,以此达到控制动画实现的结果。可以看到在上面的代码中 t.getMatrix().setTranslate((float) Math.sin(interpolatedTime * 50) * 8, (float) Math.sin(interpolatedTime * 50) * 8) 设置了 Matrix 对象的 Translate ,传入的参数是一个正弦函数值,这个值是通过 interpolatedTime 参数计算出来的,这样就实现了动画在x,y轴两个方向上的来回抖动效果。

下面是QQ抖一抖动画的测试类 Activity ,代码如下:

接着我们再看一个酷炫的自定义动画,类似电视机关机画面和图片3D旋转,效果如下!

电视关机画面&3D旋转

直接上代码,电视关机画面效果动画 TVCloseAni 如下:

图片3D旋转效果动画代码如下:

下面是电视机关机画面和图片3D旋转动画的测试类, CustomAniTest 代码如下!

唯一不同的是在上面3D旋转自定义动画中,我们引入了 Camera 的概念, android.graphics.Camera 中的 Camera 类封装了 openGL 的3D动画,因此可以通过 Camera 类实现很多酷炫的3D动画效果。关于Android中矩阵Matrix的概念,在很多地方都会用到,比如图片处理,动画变换等等地方,这里我就不仔细展开啦!贴上http://www.cnblogs.com/qiengo/archive/2012/06/30/2570874.html#code,看完你肯定能明白矩阵的巨大威力啦,这里感谢原作者!


在最后附上浅析Android动画系列的三篇文章:

  1. 浅析Android动画(一),View动画高级实例探究 http://www.cnblogs.com/wondertwo/p/5295976.html
  2. 浅析Android动画(二),属性动画与高级实例探究 http://www.cnblogs.com/wondertwo/p/5312482.html
  3. 浅析Android动画(三),自定义Interpolator与TypeEvaluator http://www.cnblogs.com/wondertwo/p/5327586.html

如果觉得不错,请继续关注哦!下一篇将继续介绍Android属性动画哈!

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部