【Android】Tween Animation(补间动画)

作者:邹峰立,微博:zrunker,邮箱:zrunker@yahoo.com,微信公众号:书客创作,个人平台:www.ibooker.cc

本文选自书客创作平台第16篇文章。阅读原文

书客创作

​Android动画Tween Animation(变换动画/补间动画/View Animation),是操作某个控件让其展现出旋转、渐变、移动、缩放的这么一种转换过程。我们可以以XML形式定义动画,也可以编码实现。

Tween Animation有四种形式:

alpha:渐变透明度动画效果,在Java代码中使用AlphaAnimation,或者在XML中使用<alpha>标签实现。

scale:渐变尺寸伸缩动画效果,在Java代码中使用ScaleAnimation,或者在XML中使用<scale>标签实现。

translate:位置移动动画效果,在Java代码中使用TranslateAnimation,或者在XML中使用<translate>标签实现。

rotate:旋转动画效果,在Java代码中使用RotateAnimation,或者在XML中使用<rotate>标签实现。

这几种动画有一些公共的方法:

(1)setDuration(long durationMills)设置动画时间间隔,单位毫秒/ms。

(2)setFillAfter(Boolean fillAfter)设置画面保持动画完成后的状态,与之相对的是setFillBefore(true)设置画面保存动画开始之前的状态。

(3)setStartOffSet(long startOffSet)设置动画开始之前的停顿等待时间,单位毫秒/ms。

(4)setRepeatCount(int repeatCount)设置动画重复执行的次数。

(5)setInterpolator(Context context,@AnimRes @Interpolator Resintres ID)设置动画插值器,例如加速,匀速等。

1、对于alpha动画,可以借助于AlphaAnimation实现。

AlphaAnimation alphaAnim =new AlphaAnimation(1.0f, 0.0f);
alphaAnim.setDuration(1000);
alphaAnim.setFillAfter(true);
alphaAnim.setStartOffset(1000);
alphaAnim.setInterpolator(this, android.R.anim.decelerate_interpolator);
imageView.startAnimation(alphaAnim);

构造方法说明:new AlphaAnimation(float fromAlpha, float toAlpha);参数fromAlpha表示从哪个透明度开始,参数toAlpha表示到哪个透明度结束。取值范围0~1,0代表全透明,1代表不透明。

也可以在XML文件中通过<alpha>标签实现。

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="1000"
   android:fillAfter="true"
   android:startOffset="1000"
   android:fromAlpha="1.0"
   android:interpolator="@android:anim/decelerate_interpolator"
   android:toAlpha="0.0"/>

<alpha>是渐变动画,可以实现fadeIn和fadeOut的效果,与之对应的Java对象是AlphaAnimation。android:fromAlpha属性代表起始alpha值,浮点值,范围在0.0和1.0之间,分别代表透明和完全不透明,android:toAlpha属性代表结尾alpha值,浮点值,范围也在0.0和1.0之间。

最后通过AnimationUtils进行调用即可。

Animation alphaAnim = AnimationUtils.loadAnimation(this, R.anim.alpha);
imageView.startAnimation(alphaAnim);

2、对于scale动画,可以借助于ScaleAnimation实现。

ScaleAnimation scaleAnim =new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f, 0.5f, 0.5f);
scaleAnim.setDuration(1000);
scaleAnim.setFillAfter(true);
scaleAnim.setStartOffset(1000);
scaleAnim.setInterpolator(this, android.R.anim.decelerate_interpolator);
imageView.startAnimation(scaleAnim);

构造方法说明:new ScaleAnimation(float fromX, float toX, float fromY, float toY,float pivotX, float pivotY);参数fromX表示起始的X方向上相对自身的缩放比例,参数toX表示代表结尾的X方向上相对自身的缩放比例,参数fromY表示起始的Y方向上相对自身的缩放比例,参数toY表示代表结尾的Y方向上相对自身的缩放比例,参数pivotX属性代表缩放的中轴点X坐标,参数pivotY属性代表缩放的中轴点Y坐标。

也可以在XML文件中通过<scale>标签实现。

<scale xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="1000"
   android:fillAfter="true"
   android:startOffset="1000"
   android:fromXScale="1.0"
   android:fromYScale="1.0"
   android:interpolator="@android:anim/decelerate_interpolator"
   android:pivotX="0.5"
   android:pivotY="0.5"
   android:toXScale="0.5"
   android:toYScale="0.5"/>

<scale>是缩放动画,可以实现动态调控件尺寸的效果,与之对应的Java对象是ScaleAnimation。android:fromXScale属性代表起始的X方向上相对自身的缩放比例,浮点值,比如1.0代表自身无变化,0.5代表起始时缩小一倍,2.0代表放大一倍;android:toXScale属性代表结尾的X方向上相对自身的缩放比例,浮点值;android:fromYScale属性代表起始的Y方向上相对自身的缩放比例,浮点值;android:toYScale属性代表结尾的Y方向上相对自身的缩放比例,浮点值;android:pivotX属性代表缩放的中轴点X坐标,浮点值,android:pivotY属性代表缩放的中轴点Y坐标,浮点值,对于这两个属性,如果我们想表示中轴点为图像的中心,我们可以把两个属性值定义成0.5或者50%。

最后通过AnimationUtils进行调用即可。

Animation scaleAnim = AnimationUtils.loadAnimation(this, R.anim.scale);
imageView.startAnimation(scaleAnim);

3、对于translate动画,可以借助于TranslateAnimation实现。

TranslateAnimation translateAnim =new TranslateAnimation(0.0f, 100.0f, 0.0f, 100.0f);
translateAnim.setDuration(1000);
translateAnim.setFillAfter(true);
translateAnim.setStartOffset(1000);
translateAnim.setInterpolator(this, android.R.anim.decelerate_interpolator);
imageView.startAnimation(translateAnim);

构造方法说明:new TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta);参数fromXDelta代表起始X方向的位置,参数toXDelta代表结尾X方向上的位置,参数fromYDelta代表起始Y方向上的位置,参数toYDelta代表结尾Y方向上的位置。

也可以在XML文件中通过<translate>标签实现。

<translate xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="1000"
   android:fillAfter="true"
   android:fromXDelta="0"
   android:fromYDelta="0"
   android:interpolator="@android:anim/decelerate_interpolator"
   android:startOffset="1000"
   android:toXDelta="100"
   android:toYDelta="100"/>

<translate>是位移动画,代表一个水平、垂直的位移。与之对应的Java对象是TranslateAnimation。android:fromXDelta属性代表起始X方向的位置,android:toXDelta代表结尾X方向上的位置,android:fromYScale属性代表起始Y方向上的位置,android:toYDelta属性代表结尾Y方向上的位置,以上四个属性都支持三种表示方式:浮点数、num%、num%p;如果以浮点数字表示,代表相对自身原始位置的像素值;如果以num%表示,代表相对于自己的百分比,比如toXDelta定义为100%就表示在X方向上移动自己的1倍距离;如果以num%p表示,代表相对于父类组件的百分比。

最后通过AnimationUtils进行调用即可。

AnimationtranslateAnim = AnimationUtils.loadAnimation(this, R.anim.translate);
imageView.startAnimation(translateAnim);

4、对于rotate动画,可以借助于RotateAnimation实现。

RotateAnimation rotateAnim =new RotateAnimation(0.0f,180.0f,0.5f,0.5f);
rotateAnim.setDuration(1000);
rotateAnim.setFillAfter(true);
rotateAnim.setStartOffset(1000);
rotateAnim.setInterpolator(this,android.R.anim.decelerate_interpolator);
imageView.startAnimation(rotateAnim);

构造方法说明:RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY);参数fromDegrees代表起始角度,参数toDegrees代表结尾角度,参数pivotX代表旋转中心的X坐标值,参数pivotY代表旋转中心的Y坐标值。

也可以在XML文件中通过<rotate>标签实现。

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
   android:duration="1000"
   android:fillAfter="true"
   android:fromDegrees="0"
   android:interpolator="@android:anim/decelerate_interpolator"
   android:pivotX="50%"
   android:pivotY="50%"
   android:startOffset="1000"
   android:toDegrees="180"/>

<rotate>是旋转动画,与之对应的Java对象是RotateAnimation。android:fromDegrees属性代表起始角度,浮点值,单位:度;android:toDegrees属性代表结尾角度,浮点值,单位:度;android:pivotX属性代表旋转中心的X坐标值,android:pivotY属性代表旋转中心的Y坐标值,这两个属性也有三种表示方式,数字方式代表相对于自身左边缘的像素值,num%方式代表相对于自身左边缘或顶边缘的百分比,num%p方式代表相对于父容器的左边缘或顶边缘的百分比。

最后通过AnimationUtils进行调用即可。

Animation rotateAnim = AnimationUtils.loadAnimation(this,R.anim.rotate);
imageView.startAnimation(rotateAnim);

5、对于组合动画,组合动画是将多种动画结合在一起实现动画效果,它的实现方式有3种,可以通过动画监听的方式实现,可以借助于AnimationSet实现,也可以通过XML的方式来实现。

a. 第一种:动画监听。

RotateAnimation rotateAnim =new RotateAnimation(0.0f, 180.0f, 0.5f, 0.5f);
rotateAnim.setDuration(1000);
rotateAnim.setFillAfter(true);
rotateAnim.setStartOffset(1000);
rotateAnim.setInterpolator(this, android.R.anim.decelerate_interpolator);
rotateAnim.setAnimationListener(new Animation.AnimationListener() {

   @Override
   public voidonAnimationStart(Animation animation) {
   }

   @Override
   public voidonAnimationEnd(Animation animation) {
      TranslateAnimation translateAnim =new TranslateAnimation(0.0f, 100.0f, 0.0f, 100.0f);
      translateAnim.setDuration(1000);
      translateAnim.setFillAfter(true);
      translateAnim.setStartOffset(1000);
      translateAnim.setInterpolator(TweenAnimationActivity.this, android.R.anim.decelerate_interpolator);
      imageView.startAnimation(translateAnim);
   }

   @Override
   public voidonAnimationRepeat(Animation animation) {
   }
});
imageView.startAnimation(rotateAnim);

b. 第二种:AnimationSet实现。

AnimationSet animationSet =new AnimationSet(true);
animationSet.setInterpolator(this, android.R.anim.decelerate_interpolator);
animationSet.setFillAfter(true);
RotateAnimation rotateAnim =new RotateAnimation(0.0f, 180.0f, 0.5f, 0.5f);
rotateAnim.setDuration(1000);
rotateAnim.setStartOffset(1000);
TranslateAnimation translateAnim =new TranslateAnimation(0.0f, 100.0f, 0.0f, 100.0f);
translateAnim.setDuration(1000);
translateAnim.setStartOffset(2000);
animationSet.addAnimation(rotateAnim);
animationSet.addAnimation(translateAnim);
imageView.startAnimation(animationSet);

c. 第三种:XML实现。

<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:fillAfter="true"
   android:interpolator="@android:anim/decelerate_interpolator"
   android:shareInterpolator="true">

   <!--旋转动画-->
   <rotate
      android:duration="1000"
      android:fromDegrees="0"
      android:pivotX="50%"
      android:pivotY="50%"
      android:startOffset="1000"
      android:toDegrees="180"/>

   <!--位置移动-->
   <translate
      android:duration="1000"
      android:fromXDelta="0"
      android:fromYDelta="0"
      android:interpolator="@android:anim/decelerate_interpolator"
      android:startOffset="2000"
      android:toXDelta="100"
      android:toYDelta="100"/>
</set>

<set>是一个动画容器,管理多个动画的群组,与之相对应的Java对象是AnimationSet。它有两个属性,android:interpolator代表一个插值器资源,可以引用系统自带插值器资源,也可以用自定义插值器资源,默认值是匀速插值器;稍后我会对插值器做出详细讲解。android:shareInterpolator代表里面的多个动画是否要共享插值器,默认值为true,即共享插值器,如果设置为false,那么的插值器就不再起作用,我们要在每个动画中加入插值器。

下面重点介绍一下插值器的概念:

首先要了解为什么需要插值器,因为在补间动画中,我们一般只定义关键帧(首帧或尾帧),然后由系统自动生成中间帧,生成中间帧的这个过程可以成为“插值”。插值器定义了动画变化的速率,提供不同的函数定义变化值相对于时间的变化规则,可以定义各种各样的非线性变化函数,比如加速、减速等。下面是几种常见的插值器:

Interpolator对象资源ID功能作用:

  1. AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator先加速再减速。
  2. AccelerateInterpolator @android:anim/accelerate_interpolator加速。
  3. AnticipateInterpolator @android:anim/anticipate_interpolator先回退一小步然后加速前进。
  4. AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator在上一个基础上超出终点一小步再回到终点。
  5. BounceInterpolator @android:anim/bounce_interpolator最后阶段弹球效果。
  6. CycleInterpolator @android:anim/cycle_interpolator周期运动。
  7. DecelerateInterpolator @android:anim/decelerate_interpolator减速。
  8. LinearInterpolator @android:anim/linear_interpolator匀速。
  9. OvershootInterpolator @android:anim/overshoot_interpolator快速到达终点并超出一小步最后回到终点。

注意:补间动画改变的只是控件当前的动作,控件在动画处理之后,它的属性值并未发生任何变化。例如你对设置点击事件的ImageView进行平移,让其保持平移之后的状态,当你点击平移之后的ImageView,你会发现没有预期的点击效果,但是如果你点击平移之前的位置你会发现有预期点击效果。这个就是因为补间动画没有改变控件的属性。

GitHub地址
阅读原文


微信公众号:书客创作
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容