tween动画基础

最新推荐文章于 2025-05-12 14:05:10 发布

haixiuyundezhuanyong

最新推荐文章于 2025-05-12 14:05:10 发布

阅读量570

点赞数

1.Android平台提供了两类动画，分别是Tween动画，和Frame动画。本篇主讲Tween动画，Tween动画通过对场景里的对象不断的进行图片的变换，比如平移、渐变、缩放、旋转等来产生动画效果。

Tween动画的四种效果：

①Alpha：渐变透明度动画
②Scale：渐变尺寸伸缩动画
③Translate：画面转换位置移动动画
④Rotate：画面转移旋转动画

setDuration(long durationMillis);
功能：设置动画显示的时间
参数：durationMillis为动画显示时间的长短，以毫秒为单位

startAnimation(Animation animation)
功能：开始播放动画
参数：animation为要播放的动画

android animation中的参数interpolator详解

android:interpolator

interpolator 被用来修饰动画效果，定义动画的变化率，可以使存在的动画效果可以 accelerated(加速)，decelerated(减速),repeated(重复),bounced(弹跳)等。

android 自带的interpolator

AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢，在中间的时候加速

AccelerateInterpolator 在动画开始的地方速率改变比较慢，然后开始加速

AnticipateInterpolator 开始的时候向后然后向前甩

AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值

BounceInterpolator 动画结束的时候弹起

CycleInterpolator 动画循环播放特定的次数，速率改变沿着正弦曲线

DecelerateInterpolator 在动画开始的地方快然后慢

LinearInterpolator 以常量速率改变

OvershootInterpolator 向前甩一定值后再回到原来位置

第一种：AlphaAnimation(float fromAlpha, float toAlpha)
功能：创建一个透明度渐变的动画
参数说明：fromAlpha是动画起始时透明度；toAlpha是动画结束时透明度
注：0.0表示完全透明，1.0表示完全不透明

实现它有两种方式。
1、直接在程序中创建动画

Java代码

//创建Alpha动画
Animation alpha = new AlphaAnimation(0.1f, 1.0f);
//设置动画时间为5秒
alpha.setDuration(5000);
//开始播放
img.startAnimation(alpha);

2、通过XML来创建动画
alpha_anim.xml。在res/anim目录下

Xml代码

<?xml version="1.0" encoding="utf-8"?> /*这行代码必须顶格写，不然会出错*/
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
android:duration="5000">
</alpha>
</set>

程序中直接调用

Java代码

Animation alpha = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.alpha_anim);
//开始动画
img.startAnimation(alpha);

第二种：ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, floatXValue,
int pivotYType, float pivotYValue)
功能：创建一个渐变尺寸伸缩动画
参数：fromX，toX分别是起始和结束时x坐标上的伸缩尺寸。fromY,toY分别是起始和结束时ye坐标上的伸缩尺寸。
pivotXValue，pivotYValue分别为伸缩动画相对于x,y坐标开始的位置，pivotXType，pivotYType分别为x,y的
伸缩模式。

它有两种实现方式。
1、直接在程序中实现的方式

Java代码

Animation scale = new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
//设置动画持续时间
scale.setDuration(5000);
//开始动画
img.startAnimation(scale);

2、在XML中是创建动画
scale_anim.xml，在res/anim目录下

Xml代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXScale="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="5000"
/>
</set>

Animation scale = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.scale_anim);
img.startAnimation(scale);

注意这边的piovtX属性后面跟的值，因为scale缩放时，轴心的位置相对于控件的位置有三种：
1. 当你写50时，它是采用的absolute去取轴心的位置
2. 当你写50%时，它是采用的RELATIVE_TO_SELF去取轴心的位置
3. 当你写50%p时，它是采用的RELATIVE_TO_PARENT去取轴心的位置

第3种:TranslateAnimation(float fromXDelta, float toXDelta, float YDelta, float toYDelta)
功能：创建一个移动画面位置的动画
参数：fromXDelta,fromYDelta分别是其实坐标；toXDelta,toYDelta分别是结束坐标

它有两种是实现方式
1、直接在程序中实现

Java代码

Animation translate = new TranslateAnimation(10, 100, 10, 100);
//设置动画持续时间
translate.setDuration(3000);
//开始动画
img.startAnimation(translate);

2、在XML中创建动画

Xml代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="10"
android:toXDelta="100"
android:fromYDelta="10"
android:toYDelta="100"
android:duration="5000"
/>
</set>

在程序中可以定义其实现，比如在Button中的按钮事件
Animation translate = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.translate_anim);

img.startAnimation(translate);

第4种：Rotate(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType,
float pivotYValue)
功能：创建一个旋转画面的动画
参数：fromDegrees为开始的角度；toDegrees为结束的角度。pivotXValue、pivotYType分别为x,y的伸缩模式。
pivotXValue，pivotYValue分别为伸缩动画相对于x,y的坐标开始位置

它有两种实现方式。
1、直接在程序中创建动画

Java代码

Animation rotate = new RotateAnimation(0f,+360f,
Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
rotate.setDuration(3000);
img.startAnimation(rotate);

2、在XML中创建动画
rotate_anim.xml
在res/anim目录下

Java代码

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromDegrees="0"
android:toDegrees="+360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
/>
</set>

Animation rotate = AnimationUtils.loadAnimation(TweenActivity.this, R.anim.rotate_anim);

img.startAnimation(rotate);

下面是程序的全部代码。XML定义的动画部分在上面：

/*使用XML中的animation来实现的动画效果*/
package com.example.test;
import java.util.concurrent.Delayed;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity {

private ImageView img;
    private int flag = 0;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img = (ImageView)findViewById(R.id.imageView1);
        img.setOnClickListener(new ImgOnClickListenr());
    }

    class ImgOnClickListenr implements OnClickListener{

        @Override
        public void onClick(View v) {
            switch (flag) {
            case 0:
                // 加载动画的配置文件
                Animation alphaAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha_anim);
                // 调用animation
                img.startAnimation(alphaAnimation);
                flag++;

                break;
        case 1:
                Animation rotateAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate_anim);
                img.startAnimation(rotateAnimation);
                flag++;

                break;
          case 2:
                Animation scaleAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale_anim);
                img.startAnimation(scaleAnimation);
                flag++;
                break;

            case 3:
                Animation translateAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate_anim);
                img.startAnimation(translateAnimation);
                flag = 0;
            default:
                break;
            }
        }

    }
}

注意的是：

             Animation alphaAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha_anim);
                // 调用animation
                img.startAnimation(alphaAnimation);

                Animation rotateAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
                img.startAnimation(rotateAnimation);

                Animation translateAnimation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate_anim);
                img.startAnimation(translateAnimation);

在一个case中同时执行以上代码的时候，只有最后一个动画才有效。

/*在代码中设置动画属性进行动画*/

package com.example.test;

import java.util.concurrent.Delayed;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;

public class MainActivity extends Activity {

private ImageView img;
    //定义Alpha动画
    private Animation alpha = null;
    //定义Scale动画
    private Animation scale = null;
    //定义Translate动画
    private Animation translate = null;
    //定义Rotate动画
    private Animation rotate = null;
    private int flag = 0;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img = (ImageView)findViewById(R.id.imageView1);
        img.setOnClickListener(new ImgOnClickListenr());
    }

    class ImgOnClickListenr implements OnClickListener{

        @Override
        public void onClick(View v) {
            switch (flag) {
            case 0:
                alpha = new AlphaAnimation(0.1f, 1.0f);
                //设置动画时间为5秒
                alpha.setDuration(5000);
                //开始播放
                img.startAnimation(alpha);
                flag++;

                break;
        case 1:
           rotate = new RotateAnimation(0f, +360f,
             Animation.RELATIVE_TO_SELF, 0.5f,
             Animation.RELATIVE_TO_SELF, 0.5f);
             rotate.setDuration(3000);
             img.startAnimation(rotate);
             flag++;

                break;
          case 2:
              scale = new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
              //设置动画持续时间
              scale.setDuration(5000);
              //开始动画
              img.startAnimation(scale);
                flag++;
                break;

            case 3:
               translate = new TranslateAnimation(10, 100, 10, 100);
                 //设置动画持续时间
                 translate.setDuration(3000);
                 //开始动画
                 img.startAnimation(translate);
                flag = 0;
            default:
                break;
            }
        }

    }
}