Android 之 Tween补间动画
程序员文章站
2022-05-16 23:33:10
...
Tween 补间动画
1、优点：节省磁盘空间；
2、缺点：动画很复杂的时候无法自动生成中间图像；例如电影画面的组成，画面复杂，无法 下一步；
3、Android 提供的 4 种 补间动画效果：移动、旋转、缩放和透明度渐变；
4、移动补间动画：
实现方式：
xml文件配置
编码配置
5、提示：补间动画文件存放在res/anim 或者 res/drawable 下面
补间动画 -- 设置透明度： alpha
<?xml version="1.0" encoding="utf-8"?>
<!-- 透明渐变动画 -->
<!--
说明：
android:fromAlpha 代表起始的alpha值，浮点值，0.0 和 1.0之间
android:toAlpha 代表结尾的值，浮点值，0.0 和 1.0 之间
-->
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="8000"
android:fromAlpha="0.0"
android:repeatCount="infinite"
android:toAlpha="1.0" >
</alpha>
旋转补间动画 -- rotate
<?xml version="1.0" encoding="utf-8"?>
<!-- 旋转补间动画测试 -->
<!--
说明：
rotate 旋转动画，java 中对象为：RotateAnimation
android:fromDegrees 代表起始角度、浮点值，单位：度
android:toDegrees 代表结尾角度，浮点值，单位：度
android:pivotX 代表旋转中心的 X 坐标值；
android:pivotY 代表旋转中心的 Y 坐标值；
android:fillAfter 执行完后是否保持最后的状态；
android:duration 代表动画持续的时间，单位毫秒
旋转补间动画的渲染模式：
android:interpolator="@android:anim/accelerate_interpolator"
设置动画渲染器为加速动画(动画播放中越来越快)
android:interpolator="@android:anim/decelerate_interpolator"
设置动画渲染器为减速动画(动画播放中越来越慢)
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
设置动画渲染器为先加速再减速(开始最快，逐渐减慢)
提示：默认为匀速
-->
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX = "50%"
android:pivotY="50%"
android:duration="2000"
>
</rotate>
缩放补间动画：scale
<?xml version="1.0" encoding="utf-8"?>
<!-- 缩放补间动画 -->
<!--
说明：
android:fromXScale : 表示开始时 X 的缩放比例
android:fromYScale : 表示开始时 Y 的缩放比例
android:toXScale : 表示结束时 X 的缩放比例
android:toYScale : 表示结束时 Y 的缩放比例
android:pivotX : 表示沿 X 轴方向缩放的支点位置，50% 表示中心位置；
android:pivotY : 表示沿 Y 轴方向缩放的支点位置，50% 表示中心位置；
缩放比例的取值规则：
0.0 : 表示缩放到没有；
1.0 : 表示正常不收缩
>1.0: 表示将组件放大到相应的比例；
<1.0: 表示将组件收缩到相应的比例；
-->
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="2.0"
android:toYScale="2.0" >
</scale>
移动补间动画：
<?xml version="1.0" encoding="utf-8"?>
<!-- 移动补间动画 ， 测试案例 -->
<!--
说明：
android:fromXDelta 属性代表起始X方向的位置
android:toXDelta 代表结尾X方向上的位置
android:fromYDelta 代表起始方向Y 的位置
android:toYDelta 属性代表结尾Y 方向的位置
android:fillAfter 是否定格在尾端
android:repeatCount 循环次数
android:duration 执行时间
android:interpolator 运行速度定义：匀速，快，慢 等....
-->
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator"
android:fillAfter="true"
android:fromXDelta = "0"
android:fromYDelta = "0"
android:toXDelta = "320"
android:toYDelta = "480"
android:duration = "2000"
android:repeatCount = "5"
>
</translate>
在代码中使用补间动画达到对应的效果：
package com.sun.tween;
import java.util.Timer;
import java.util.TimerTask;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends Activity {
private ImageView image;
private Button translate,scale,rotate,alpha,heart,bird;
private ScaleAnimation large,small; // 缩放动画对象
private float curX = 0;
private float curY = 0;
private float nextX ,nextY;
// 初始化
public void init(){
translate = (Button) findViewById(R.id.button1);
scale = (Button) findViewById(R.id.button2);
rotate = (Button) findViewById(R.id.button3);
alpha = (Button) findViewById(R.id.button4);
heart = (Button) findViewById(R.id.heart);
bird = (Button) findViewById(R.id.bird);
translate.setOnClickListener(listener);
scale.setOnClickListener(listener);
rotate.setOnClickListener(listener);
alpha.setOnClickListener(listener);
heart.setOnClickListener(listener);
bird.setOnClickListener(listener);
}
// 入口
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
image = (ImageView) findViewById(R.id.image);
}
// 点击事件监听器
private View.OnClickListener listener = new View.OnClickListener() {
public void onClick(View v) {
if(v.getId() == R.id.button1){
translateAction();
return;
}
if(v.getId() == R.id.button2){
scaleAction();
return;
}
if(v.getId() == R.id.button3){
rotateAction();
return;
}
if(v.getId() == R.id.button4){
alphaAction();
return;
}
if(v.getId() == R.id.heart){
heartAction();
return;
}
if(v.getId() == R.id.bird){
birdAction();
return;
}
}
};
/*==================================Start 小鸟飞翔 ===============================================================*/
/**
* 小鸟飞翔效果 -- 帧动画实现翅膀拍动，位置右 补间 动画实现
*/
public void birdAction(){
// 设置 图片资源为 帧动画资源
AnimationDrawable ad = (AnimationDrawable) getResources().getDrawable(R.drawable.bird_fly);
image.setImageDrawable(ad);
ad.start();
// 补间动画实现 -- 移动
/* Timer() 定时器
TimerTask 定时任务
*/
new Timer().schedule(new TimerTask(){
// 定时的时间到了执行的任务
public void run() {
Message message = new Message();
message.what = 0x1; // 0x 表示该数为 整数 ， 消息ID 编号
handler.sendMessage(message);
Log.i("msg", "run()... 执行一次");
}},0, 200);
}
// 消息处理机制，执行对应的任务
private Handler handler = new Handler(){
public void handleMessage(Message msg) {
super.handleMessage(msg);
if(msg.what == 0x1){
if(nextX>300){
curX = nextX = 0; // 从头开始
}else{
nextX+=5; // 固定水平移动
}
// 计算下一步 Y 的坐标
nextY = (float) (curY+(Math.random()*10-5));
// 移动补间动作
Animation trans = new TranslateAnimation(curX, nextX, curY, nextY);
trans.setDuration(2000);
image.setAnimation(trans); // 启动
// 交换坐标数据
curX = nextX;
curY = nextY;
}
}
};
/*==================================End 小鸟飞翔 ===========================================================================*/
/**
* 移动补间动画测试
*/
public void translateAction(){
// 加载补间动画文件
TranslateAnimation ta = (TranslateAnimation) AnimationUtils.loadAnimation(MainActivity.this, R.drawable.translate);
image.setAnimation(ta); // 将动画应用到组件上
/* 代码实现 */
/*
Animation translate = new TranslateAnimation(0, 320, 0,480);
translate.setDuration(5000);
image.setAnimation(translate);
*/
}
/**
* 缩放补间动画测试
*/
public void scaleAction(){
// 加载动画文件
ScaleAnimation sa = (ScaleAnimation) AnimationUtils.loadAnimation(MainActivity.this,R.drawable.scale);
image.startAnimation(sa); // 应用到组件上
/* 代码实现 */
/*
Animation scale = new ScaleAnimation(0f, 3f, 0f, 3f);
scale.setDuration(5000);
image.setAnimation(scale);
*/
}
/**
* 旋转补间动画测试
*/
public void rotateAction(){
// 加载动画文件
RotateAnimation ra = (RotateAnimation) AnimationUtils.loadAnimation(MainActivity.this,R.drawable.rotate);
// 应用动画
image.setAnimation(ra);
/* 代码实现 */
/*
Animation rotate = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotate.setDuration(5000);
image.setAnimation(rotate);
*/
}
/**
* 透明渐变动画测试
*/
public void alphaAction(){
// 加载动画文件
AlphaAnimation aa = (AlphaAnimation) AnimationUtils.loadAnimation(MainActivity.this, R.drawable.alpha);
image.setAnimation(aa);
/* 代码实现 */
/*
Animation alpha = new AlphaAnimation(0.0f, 1.0f);
alpha.setDuration(5000);
image.startAnimation(alpha);
*/
}
/**
* 心型效果 -- 心动的感觉
*/
public void heartAction(){
// 加载 缩放 动画文件
large = (ScaleAnimation) AnimationUtils.loadAnimation(MainActivity.this, R.drawable.scale);
small = (ScaleAnimation) AnimationUtils.loadAnimation(MainActivity.this, R.drawable.scale_small);
// 设置动画监听器
large.setAnimationListener(animationListener);
small.setAnimationListener(animationListener);
// 初始动作
image.setAnimation(large);
}
// 补间动画监听器
private AnimationListener animationListener = new AnimationListener() {
// 动画开始时调用
public void onAnimationStart(Animation animation) {
Log.i("msg","onAnimationStart()...");
}
// 动画重复调用
public void onAnimationRepeat(Animation animation) {
Log.i("msg","onAnimationRepeat()...");
}
// 动画结束调用
public void onAnimationEnd(Animation animation) {
// 使用 hashCode 进行匹配对应关系
if(animation.hashCode() == large.hashCode()){
image.startAnimation(small);
}else{
image.startAnimation(large);
}
Log.i("msg", "onAnimationEnd()...");
}
};
}