animation动画详解 - v1.0


前言前言 本文内容主要讲解 Android Animation动画入门,提高,进阶知识! 适用人群适用人群 本教程为Android Animation动画入门教程,适合初学者学习。 学习前提学习前提 在学习本教程之前,你需要对 Android 基础知识有一定了解。 章节简介章节简介 • 1、《Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法》 • 2、《Animation动画详解(二)——Interpolator插值器》 • 3、《Animation动画详解(三)—— 代码生成alpha、scale、translate、rotate、set及插值器动画》 • 4、《Animation动画详解(四)——ValueAnimator基本使用》 • 5、《Animation动画详解(五)——ValueAnimator高级进阶(一)》 • 6、《Animation动画详解(六)——ValueAnimator高级进阶(二)》 • 7、《Animation动画详解(七)——ObjectAnimator基本使用》 • 8、《 Animation动画详解(八)——PropertyValuesHolder与Keyframe》 • 9、《 Animation动画详解(九)——联合动画的代码实现》 • 10、《Animation动画详解(十)——联合动画的XML实现与使用示例》 • 11、《 Animation动画详解(十一)——layoutAnimation与gridLayoutAnimation》 • 12、《自定义控件三部曲之动画篇(十二)——animateLayoutChanges与LayoutTransition》 • 13、《自定义控件三部曲之动画篇(十三)——实现ListView Item进入动画》 欢迎扫描作者微信公众号,每周分享优质技术干货 本系列课程是作者 启舰 授权转载。 原文地址:http://blog.csdn.net/harvic880925/article/details/39996643 未经作者允许,请不要转载。 目录目录 前言前言. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 第 1 章第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法alpha、scale、translate、rotate、set 的 xml 属性及用法 . . . . . . . . . . . . . . 66 一、概述 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 二、scale 标签——调节尺寸 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 三、alpha 标签——调节透明度 . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 四、rotate 标签——旋转. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 五、translate 标签 —— 平移 . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 六、set 标签——定义动作合集 . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 七、实例——如何将动画 XML 文件应用于控件中. . . . . . . . . . . . . . . . . . . . 25 第 2 章第 2 章 Interpolator 插值器Interpolator 插值器 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2828 一、概述 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 二、scale 标签 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 三、rotate 标签. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 四、alpha 标签 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 五、translate 标签 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 第 3 章第 3 章 代码生成 alpha、scale、translate、rotate、set 及插值器动画代码生成 alpha、scale、translate、rotate、set 及插值器动画 . . . . . . . . . . 5151 一、概述 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 二、Animation 公共类 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 三、ScaleAnimation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 四、AlphaAnimation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 五、RotateAnimation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 六、TranslateAnimation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 七:AnimationSet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 八、Interpolater 插值器. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62 九、示例,源码 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 第 4 章第 4 章 ValueAnimator 基本使用ValueAnimator 基本使用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6565 一、概述 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 二、ValueAnimator 简单使用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 三、常用方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 第 5 章第 5 章 高级进阶(一)高级进阶(一) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9090 一、插值器 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 二、Evaluator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 第 6 章第 6 章 高级进阶(二)高级进阶(二) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111111 一、ofObject()概述 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 二、ofObject 之自定义对象示例. . . . . . . . . . . . . . . . . . . . . . . . . . . 116 3、使用 MyPointView. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 第 7 章第 7 章 ObjectAnimator 基本使用ObjectAnimator 基本使用 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122122 一、概述 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3、ObjectAnimator 动画原理 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134 二、自定义 ObjectAnimator 属性 . . . . . . . . . . . . . . . . . . . . . . . . . . 137 四、注意——何时需要实现对应属性的 get 函数. . . . . . . . . . . . . . . . . . . . 142 三、常用函数 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 第 8 章第 8 章 PropertyValuesHolder 与 KeyframePropertyValuesHolder 与 Keyframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150150 一、PropertyValuesHolder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 二、Keyframe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 三、PropertyValuesHolder 之其它函数. . . . . . . . . . . . . . . . . . . . . . . . 179 第 9 章第 9 章 联合动画的代码实现联合动画的代码实现 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181181 一、AnimatorSet——playSequentially,playTogether>. . . . . . . . . . . . . . . . . 183 第 10 章第 10 章 联合动画的 XML 实现与使用示例联合动画的 XML 实现与使用示例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199199 一、联合动画的 XML 实现. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 二、开篇示例——AnimatorSet 应用 . . . . . . . . . . . . . . . . . . . . . . . . . 211 第 11 章第 11 章 layoutAnimation 与 gridLayoutAnimationlayoutAnimation 与 gridLayoutAnimation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221221 一、LayoutAnimation 的 xml 实现——layoutAnimation 标签. . . . . . . . . . . . . . 223 二、LayoutAnimation 的代码实现——LayoutAnimationController. . . . . . . . . . . . 229 三、GridLayoutAnimation 的 XML 实现——gridLayoutAnimation . . . . . . . . . . . . 232 四、GridLayoutAnimation 的代码实现——GridLayoutAnimationController. . . . . . . . 248 第 12 章第 12 章 自定义控件三部曲之动画篇(十二)——animateLayoutChanges与LayoutTransitio自定义控件三部曲之动画篇(十二)——animateLayoutChanges与LayoutTransitio nn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253253 android:animateLayoutChanges属性 . . . . . . . . . . . . . . . . . . . . . . . . . 255 LayoutTransaction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 第 13 章第 13 章 自定义控件三部曲之动画篇(十三)——实现ListView Item进入动画自定义控件三部曲之动画篇(十三)——实现ListView Item进入动画 . . . . . . . . 282282 搭框架 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Item添加动画——初步实现 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 优化 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 11 alpha、scale、translate、rotate、set 的 xmlalpha、scale、translate、rotate、set 的 xml 属性及用法属性及用法 一、概述一、概述 Android 的 animation 由四种类型组成:alpha、scale、translate、rotate,对应 android 官方文档地 址:《Animation Resources》 1、XML 配置文件中1、XML 配置文件中 alphaalpha 渐变透明度动画效果渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 下面我们逐个讲讲每个标签的属性及用法。 2、动作文件存放位置2、动作文件存放位置 动作定义文件应该存放在 res/anim 文件夹下,访问时采用 R.anim.XXX.xml 的方式,位置如图: 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 7 二、scale 标签——调节尺寸二、scale 标签——调节尺寸 1、自有属性1、自有属性 scale 标签是缩放动画,可以实现动态调控件尺寸的效果,有下面几个属性: • android:fromXScale 起始的 X 方向上相对自身的缩放比例,浮点值,比如 1.0 代表自身无变化,0.5 代表 起始时缩小一倍,2.0 代表放大一倍; • android:toXScale 结尾的 X 方向上相对自身的缩放比例,浮点值; • android:fromYScale 起始的 Y 方向上相对自身的缩放比例,浮点值, • android:toYScale 结尾的 Y 方向上相对自身的缩放比例,浮点值; • android:pivotX 缩放起点 X 轴坐标,可以是数值、百分数、百分数 p 三种样式,比如 50、50%、50%p,当 为数值时,表示在当前 View 的左上角,即原点处加上 50px,做为起始缩放点;如果是 50%,表示在当前控 件的左上角加上自己宽度的 50%做为起始点;如果是 50%p,那么就是表示在当前的左上角加上父控件宽度的 50%做为起始点 x 轴坐标。(具体意义,后面会举例演示) • android:pivotY 缩放起点 Y 轴坐标,取值及意义跟 android:pivotX 一样。 下面看一个实例,当 scale 里的属性这样设置时,效果会怎样呢: (1)、pivotX 取值数值时(50)(1)、pivotX 取值数值时(50) 这个控件,宽度和高度都是从 0 放大到 1.4 倍,起始点坐标在控件左上角(坐标原点),向 x 轴正方向和 y 轴正方向都加上 50 像素; 根据 pivotX,pivotY 的意义,控件的左上角即为控件的坐标原点,这里的起始点是 在控件的原点的基础上向 X 轴和 Y 轴各加上 50px,做为起始点,如下图中图二所示 图一 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 8 图二 (2)、pivotX 取值百分数时(50%)(2)、pivotX 取值百分数时(50%) 下面再看看当 pivotX、pivotY 取百分数的时候,起始点又在哪里? 上面我们讲了,pivotX 的值,当取 50%时,表示在原点坐标的基础上加上的自己宽度的 50%,看看效果: 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 9 缩放位置大小仍然从 0-1.4,只改变 pivotX 和 pivotY;起始点位置如下图中图二所示: 图一 图二 (3)、pivotX 取值 50%p 时(3)、pivotX 取值 50%p 时 前面说过,当取值在百分数后面加上一个字母 p,就表示,取值的基数是父控件,即在原点的基础上增加的值是 父标签的百分值。 效果图,及起始点坐标图如下所示: 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 11 2、从 Animation 类继承的属性2、从 Animation 类继承的属性 Animation 类是所有动画(scale、alpha、translate、rotate)的基类,这里以 scale 标签为例,讲解一下,A nimation 类所具有的属性及意义。关于 Animation 类的官方文档位置为:《Animation》 - android:duration 动画持续时间,以毫秒为单位 - android:fillAfter 如果设置为 true,控件动画结束时,将保持动画最后时的 状态 - android:fillBefore 如果设置为 true,控件动画结束时,还原到开始动画前的状态 - android:fillEnab led 与 android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态 - android:repeatCount 重复次数 - android:repeatMode 重复类型,有 reverse 和 restart 两个值,reverse 表示倒序回放,restart 表示重新放一遍,必须与 repeatCount 一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动 作。 - android:interpolator 设定插值器,其实就是指定的动作效果,比如弹跳效果等,不在这小节中讲 解,后面会单独列出一单讲解。 对于 android:duration,就不再讲解了,就是动画的持续时长,以毫秒为单位,下面看看 android:fillAfter 和 android:fillBefore (1)android:fillAfter:保持动画结束的状态(1)android:fillAfter:保持动画结束的状态 (2)android:fillBefore 还原初始化状态(2)android:fillBefore 还原初始化状态 android:fillBefore="true" 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 13 android:fillEnable="true" 上面顺便列出了,当仅设定 fillEanble 为 true 时的效果,这两个的标签的效果完全相同。 (3)、android:repeatMode="restart /reverse" 设定回放类型(3)、android:repeatMode="restart /reverse" 设定回放类型 androidRepeatMode 设为 restart androidRepeatMode 设为 reverse 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 15 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 16 三、alpha 标签——调节透明度三、alpha 标签——调节透明度 1、自身属性1、自身属性 • android:fromAlpha 动画开始的透明度,从 0.0 --1.0 ,0.0 表示全透明,1.0 表示完全不透明 • android:toAlpha 动画结束时的透明度,也是从 0.0 --1.0 ,0.0 表示全透明,1.0 表示完全不透明 使用 示例: 2、从 Animation 类继承的属性2、从 Animation 类继承的属性 • android:duration 动画持续时间,以毫秒为单位 • android:fillAfter 如果设置为 true,控件动画结束时,将保持动画最后时的状态 • android:fillBefore 如果设置为 true,控件动画结束时,还原到开始动画前的状态 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 17 • android:fillEnabled 与 android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态 • android:repeatCount 重复次数 • android:repeatMode 重复类型,有 reverse 和 restart 两个值,reverse 表示倒序回放,restart 表示重 新放一遍,必须与 repeatCount 一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。 • android:interpolator 设定插值器,其实就是指定的动作效果,比如弹跳效果等,不在这小节中讲解,后面 会单独列出一单讲解。 与 scale 标签意义一样,就不再缀述。 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 18 四、rotate 标签——旋转四、rotate 标签——旋转 1、自身属性1、自身属性 • android:fromDegrees 开始旋转的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数 • android:toDegrees 结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数 • android:pivotX 缩放起点 X 轴坐标,可以是数值、百分数、百分数 p 三种样式,比如 50、50%、50%p,具 体意义已在 scale 标签中讲述,这里就不再重讲 • android:pivotY 缩放起点 Y 轴坐标,可以是数值、百分数、百分数 p 三种样式,比如 50、50%、50%p 围绕自身从 0 度逆时针旋转 650 度 android:fromDegrees="0" android:toDegrees="-650" 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 19 围绕自身从 0 度顺时针旋转 650 度 android:fromDegrees="0" android:toDegrees="650" 2、从 Animation 类继承的属性2、从 Animation 类继承的属性 • android:duration 动画持续时间,以毫秒为单位 • android:fillAfter 如果设置为 true,控件动画结束时,将保持动画最后时的状态 • android:fillBefore 如果设置为 true,控件动画结束时,还原到开始动画前的状态 • android:fillEnabled 与 android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态 • android:repeatCount 重复次数 • android:repeatMode 重复类型,有 reverse 和 restart 两个值,reverse 表示倒序回放,restart 表示重 新放一遍,必须与 repeatCount 一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。 • android:interpolator 设定插值器,其实就是指定的动作效果,比如弹跳效果等,不在这小节中讲解,后面 会单独列出一单讲解。 与 scale 标签意义一样,就不再缀述。 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 20 五、translate 标签 —— 平移五、translate 标签 —— 平移 1、自身属性1、自身属性 • android:fromXDelta 起始点 X 轴坐标,可以是数值、百分数、百分数 p 三种样式,比如 50、50%、5 0%p,具体意义已在 scale 标签中讲述,这里就不再重讲 • android:fromYDelta 起始点 Y 轴从标,可以是数值、百分数、百分数 p 三种样式; • android:toXDelta 结束点 X 轴坐标 • android:toYDelta 结束点 Y 轴坐标 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 21 2、从 Animation 类继承的属性2、从 Animation 类继承的属性 • android:duration 动画持续时间,以毫秒为单位 • android:fillAfter 如果设置为 true,控件动画结束时,将保持动画最后时的状态 • android:fillBefore 如果设置为 true,控件动画结束时,还原到开始动画前的状态 • android:fillEnabled 与 android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态 • android:repeatCount 重复次数 • android:repeatMode 重复类型,有 reverse 和 restart 两个值,reverse 表示倒序回放,restart 表示重 新放一遍,必须与 repeatCount 一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。 • android:interpolator 设定插值器,其实就是指定的动作效果,比如弹跳效果等,不在这小节中讲解,后面 会单独列出一单讲解。 与 scale 标签意义一样,就不再缀述。 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 22 六、set 标签——定义动作合集六、set 标签——定义动作合集 前面我们讲解了各个标签动画的意义及用法,但他们都是独立对控件起作用,假设我现在想上面的 textView 控 件做一个动画——从小到大,旋转出场,而且透明度也要从 0 变成 1,即下面的这个效果,该怎么办? 这就需要对指定的控件定义动作合集,Set 标签就可以将几个不同的动作定义成一个组; 属性:属性: set 标签自已是没有属性的,他的属性都是从 Animation 继承而来,但当它们用于 Set 标签时,就会对 Set 标签下的所有子控件都产生作用。 属性有:(从 Animation 类继承的属性) • android:duration 动画持续时间,以毫秒为单位 • android:fillAfter 如果设置为 true,控件动画结束时,将保持动画最后时的状态 • android:fillBefore 如果设置为 true,控件动画结束时,还原到开始动画前的状态 • android:fillEnabled 与 android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态 • android:repeatCount 重复次数 • android:repeatMode 重复类型,有 reverse 和 restart 两个值,reverse 表示倒序回放,restart 表示重 新放一遍,必须与 repeatCount 一起使用才能看到效果。因为这里的意义是重复的类型,即回放时的动作。 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 23 • android:interpolator 设定插值器,其实就是指定的动作效果,比如弹跳效果等,不在这小节中讲解,后面 会单独列出一单讲解。 与 scale 标签意义一样,就不再缀述。 上面这个效果,所对应的 XML 代码为: 第 1 章 alpha、scale、translate、rotate、set 的 xml 属性及用法 | 24 七、实例——如何将动画 XML 文件应用于控件中七、实例——如何将动画 XML 文件应用于控件中 上面我仅仅是列出了每个标签及其属性的意义及应用之后的效果演示,但上面是如何将定义动画的 xml 应用到 t extView 控件中的却迟迟没说,这一小节,就以 scale 动画为例,讲述如何将定义好的 scle 动作添加到指定控 件中。 先看最终效果图:先看最终效果图: 1、新建工程、新建 scale 动画文件(scaleanim.xml)1、新建工程、新建 scale 动画文件(scaleanim.xml) 新建一个工程,并且在 res 文件夹下,新建一个 anim 文件夹,然后再新建一个 scaleanim.xml 文件,结构如 图所示: scaleanim.xml 的代码为:(从 TextView 中心点,从 0 放大到 1.4 倍,反复一次,最后还原到初始化状态) 2、XML 布局文件2、XML 布局文件

pdf贡献者

文杰天下

贡献于2016-10-25

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf