[关闭]
@linux1s1s 2017-01-22T16:26:52.000000Z 字数 5039 阅读 2625

Android 动画 Tween Animation

AndroidAnimation 2016-06


基本概念

Android 3.0以前,android支持两种动画模式:

在android3.0中又引入了一个新的动画系统:

这三种动画模式在SDK中被称为

可通过NineOldAndroids项目在3.0之前的系统中使用Property Animation

上面的三种动画,我们先学习tween animation
先引用官方文档中的一段话:
Tween动画是操作某个控件让其展现出旋转、渐变、移动、缩放的这么一种转换过程,我们称为补间动画。我们可以XML形式定义动画,也可以代码实现。
如果以XML形式定义一个动画,我们按照动画的定义语法完成XML,并放置于/res/anim目录下,文件名可以作为资源ID被引用;如果由代码实现,我们需要使用到Animation对象。

Tween Animation XML

如果用定义XML方式实现动画,我们需要熟悉一下动画XML语法:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:interpolator="@[package:]anim/interpolator_resource"
  4. android:shareInterpolator=["true" | "false"] >
  5. <alpha
  6. android:fromAlpha="float"
  7. android:toAlpha="float" />
  8. <scale
  9. android:fromXScale="float"
  10. android:toXScale="float"
  11. android:fromYScale="float"
  12. android:toYScale="float"
  13. android:pivotX="float"
  14. android:pivotY="float" />
  15. <translate
  16. android:fromX="float"
  17. android:toX="float"
  18. android:fromY="float"
  19. android:toY="float" />
  20. <rotate
  21. android:fromDegrees="float"
  22. android:toDegrees="float"
  23. android:pivotX="float"
  24. android:pivotY="float" />
  25. <set>
  26. ...
  27. </set>
  28. </set>

对上面的Tag 说明如下

尤其需要注意的是 沙面这些Tag 在代码中对应的类分别是:

<alpha> ---- AlphaAnimation
<scale> ---- ScaleAnimation
<translate> ---- TranslateAnimation
<rotate> ---- RotateAnimation

如果要把定义在XML中的动画应用在一个ImageView上,代码是这样的

  1. ImageView image = (ImageView) findViewById(R.id.image);
  2. Animation testAnim = AnimationUtils.loadAnimation(this, R.anim.test);
  3. image.startAnimation(testAnim);

当然了,可以给动画设置一个回调,比如:

  1. testAnim.setAnimationListener(new AnimationListener() {
  2. @Override
  3. public void onAnimationStart(Animation animation) {
  4. // TODO Auto-generated method stub
  5. }
  6. @Override
  7. public void onAnimationRepeat(Animation animation) {
  8. // TODO Auto-generated method stub
  9. }
  10. @Override
  11. public void onAnimationEnd(Animation animation) {
  12. // TODO Auto-generated method stub
  13. }
  14. });

上面的补间动画是通过XML 来定义的,这也是官方建议的补间动画开发方式,当让你也可以通过代码来定义,比如:

  1. final View view = new TextView(context)
  2. AlphaAnimation anim = new AlphaAnimation( 1.0f,0.0f);
  3. anim.setDuration(2000);
  4. final AnimationSet animSet1 = new AnimationSet(false);
  5. animSet1.addAnimation(anim1);
  6. animSet1.setFillAfter(true);
  7. animSet1 .setAnimationListener( new AnimationListener() {
  8. @Override
  9. public void onAnimationStart(Animation animation) {
  10. // TODO Auto-generated method stub
  11. }
  12. @Override
  13. public void onAnimationRepeat(Animation animation) {
  14. // TODO Auto-generated method stub
  15. }
  16. @Override
  17. public void onAnimationEnd(Animation animation) {
  18. // TODO Auto-generated method stub
  19. }
  20. });
  21. view.startAnimation(animSet1)

上面的xml定义的动画等价于下面XML的定义

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <set xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:fillAfter = "true"
  4. android:shareInterpolator="false">
  5. <alpha
  6. android:fromAlpha="1.0f"
  7. android:toAlpha="0.0f"
  8. android:duration ="2000" />
  9. </set>

然后代码就可以这样写了:

  1. final View view = new TextView(context)
  2. Animation anim = AnimationUtils.loadAnimation(mContext, R.anim.rotate);
  3. anim .setAnimationListener( new AnimationListener() {
  4. @Override
  5. public void onAnimationStart(Animation animation) {
  6. // TODO Auto-generated method stub
  7. }
  8. @Override
  9. public void onAnimationRepeat(Animation animation) {
  10. // TODO Auto-generated method stub
  11. }
  12. @Override
  13. public void onAnimationEnd(Animation animation) {
  14. // TODO Auto-generated method stub
  15. }
  16. });
  17. view.startAnimation(anim)

补充 线性差值器

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

此处输入图片的描述

然后我们可以这样使用一个插值器:

  1. <set android:interpolator="@android:anim/accelerate_interpolator">
  2. ...
  3. </set>

本文参考: 详解Android动画之Tween Animation

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注