补间动画:组件由原始状态向终极状态转变时,为了让过渡更自然,而自动生成的动画
常见的补间动画有平移动画、缩放动画、透明度变化动画、旋转动画等
平移动画的演示效果:
缩放动画的展示效果:
透明度变化的动画的展示效果:
旋转动画的展示效果:
一起飞动画的展示效果,一起飞表示所有的动画一起播放:
实现方式
第一步:使用Android Studio创建一个Android工程,并且在drawable文件夹中放一张图片
第二步:修改activity_main.xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.fyt.tweenanimation.MainActivity"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="平移"
android:onClick="translation"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="缩放"
android:onClick="scale"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="透明"
android:onClick="alpha"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="旋转"
android:onClick="rotation"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="一起飞"
android:onClick="flay"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/gold"
android:layout_centerInParent="true"/>
</RelativeLayout>
</LinearLayout>
最后一步:修改MainActivity.java文件
package com.fyt.tweenanimation;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
public class MainActivity extends Activity {
//用于创建ImageView对象
private ImageView iv;
//用于创建旋转动画
private RotateAnimation ra;
//用于创建修改透明度的动画
private AlphaAnimation aa;
//用于创建缩放动画
private ScaleAnimation sa;
//用于创建平移动画
private TranslateAnimation ta;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//获得布局文件上的ImageView
iv = (ImageView) findViewById(R.id.iv);
}
//平移按钮响应函数
public void translation(View view) {
/***
* 创建位移动画
* 第一个参数:表示开始位置的x坐标,其值为iv的真实的x坐标 + 10
* 第二个参数:表示结束位置的x坐标,其值为iv的真实的x坐标 + 100
* 第三个参数:表示开始位置的y坐标,其值为iv的真实的y坐标 + 10
* 第四个参数:表示结束位置的y坐标,其值为iv的真实的y坐标 + 100
*/
ta = new TranslateAnimation(10, 100, 10, 100);
/**
*创建位移动画
* 第一个参数:Animation.RELATIVE_TO_SELF表示相对于自己
* 第二个参数:表示开始位置的x坐标,其值为iv的真实的x坐标 + (-1) * iv的宽度
* 第三个参数:Animation.RELATIVE_TO_SELF表示相对于自己
* 第四个参数:表示结束位置的x坐标,其值为iv的真实的x坐标 + 2 * iv的宽度
* 第五个参数:Animation.RELATIVE_TO_SELF表示相对于自己
* 第六个参数:表示开始位置的y坐标,其值为iv的真实的y坐标 + (-0.5f) * iv的高度
* 第七个参数:Animation.RELATIVE_TO_SELF表示相对于自己
* 第八个参数:表示结束位置的y坐标,其值为iv的真实的y坐标 + (1.5f) * iv的高度
*/
ta = new TranslateAnimation(
Animation.RELATIVE_TO_SELF,
-1,
Animation.RELATIVE_TO_SELF,
2,
Animation.RELATIVE_TO_SELF,
-0.5f,
Animation.RELATIVE_TO_SELF,
1.5f);
//设置动画的播放时间,单位为毫秒
ta.setDuration(500);
//设置动画重复播放的次数
ta.setRepeatCount(1);
//设置重复模式为相反,表示第二次反着播放平移动画
ta.setRepeatMode(Animation.REVERSE);
//播放平移动画
iv.startAnimation(ta);
}
//缩放按钮响应函数
public void scale(View view) {
/**
* 创建缩放动画
* 第一个参数:iv在x方向上的开始时缩放比例
* 第二个参数:iv在x方向上的结束时的缩放比例
* 第三个参数:iv在y方向上的开始时的缩放比例
* 第四个参数:iv在y方向上的结束时的缩放比例
* 第五个参数:表示缩放点的x坐标
* 第六个参数:表示缩放点的y坐标
*/
sa = new ScaleAnimation(
0.5f,
2,
1.1f,
3,
iv.getWidth() / 2,
iv.getHeight() / 2
);
//设置动画的播放时间
sa.setDuration(200);
//设置缩放动画重复播放的次数
sa.setRepeatCount(1);
//设置重复模式为相反,表示第二次反着播放缩放动画
sa.setRepeatMode(Animation.REVERSE);
//设置停在缩放动画的结束位置上
sa.setFillAfter(true);
//播放缩放动画
iv.startAnimation(sa);
}
//修改透明度按钮响应函数
public void alpha(View view) {
//创建透明度动画
//第一个参数:起始时iv的透明度,0表示全不透明
//第二个参数:结束时iv的透明度,0.5f表示半透明
aa = new AlphaAnimation(0, 0.5f);
//设置动画的播放时间
aa.setDuration(1000);
//播放透明度动画
iv.startAnimation(aa);
}
//旋转按钮响应函数
public void rotation(View view) {
//创建旋转动画
//第一个参数:旋转开始时的角度
//第二个参数:旋转结束时的角度
//第三个参数:iv的旋转点的x坐标
//第四个参数:iv的旋转点的y坐标
ra = new RotateAnimation(20, 360, iv.getWidth() / 2, iv.getHeight() / 2);
//设置动画的播放时间
ra.setDuration(1000);
//播放旋转动画
iv.startAnimation(ra);
}
//一起飞按钮响应函数
public void flay(View view) {
//创建一个动画集合
AnimationSet set = new AnimationSet(false);
//将所有的动画添加到动画集合中
set.addAnimation(ra);
set.addAnimation(aa);
set.addAnimation(sa);
set.addAnimation(ta);
//播放所有的动画
iv.startAnimation(set);
}
}