一、补间动画(即view动画)
1.透明 AlphaAnim
2.旋转 RotateAnim
3.缩放 ScaleAnim
4.位移 TranslateAnim
原理:动画效果不会改变控件的真实坐标位置
布局文件:activity_main.xml
MainActrivity.java
1> 定义布局文件中的几个控件
private Button btn_touming;
private Button btn_suofang;
private Button btn_xuanzhuan;
private Button btn_weiyi;
private Button btn_yiqi;
private ImageView iv_show;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btn_touming = (Button)findViewById(R.id.btn_touming);
btn_suofang = (Button)findViewById(R.id.btn_suofang);
btn_xuanzhuan = (Button)findViewById(R.id.btn_xuanzhuan);
btn_weiyi = (Button)findViewById(R.id.btn_weiyi);
btn_yiqi = (Button)findViewById(R.id.btn_yiqi);
iv_show = (ImageView)findViewById(R.id.iv_show);
btn_touming.setOnClickListener(this);
btn_suofang.setOnClickListener(this);
btn_xuanzhuan.setOnClickListener(this);
btn_weiyi.setOnClickListener(this);
btn_yiqi.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch(v.getId()){
case R.id.btn_touming:
{
//透明
AlphaAnimation aa = new AlphaAnimation(1.0f,0.0f);
aa.setDuration(2000);//设置执行时间
aa.setRepeatCount(1);//设置动画重复次数
aa.setRepeatMode(Animation.REVERSE);//反向执行
iv_show.startAnimation(aa);//执行动画
break;
}
case R.id.btn_xuanzhuan:
{
//旋转
//RotateAnimation ra = new RotateAnimation(0,360);//默认是以图片左上角的坐标进行旋转
RotateAnimation ra = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);//后面的参数进行指定坐标以自己坐标为屏幕宽的一半和屏幕高的一半为坐标进行旋转
ra.setDuration(2000);//设置执行时间
ra.setRepeatCount(1);//设置动画重复次数
ra.setRepeatMode(Animation.REVERSE);//反向执行
iv_show.startAnimation(ra);//执行动画
break;
}
case R.id.btn_suofang:
{
//缩放
ScaleAnimation sa = new ScaleAnimation(1.0f,2.0f,1.0f,2.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
sa.setDuration(2000);//设置执行时间
sa.setRepeatCount(1);//设置动画重复次数
sa.setRepeatMode(Animation.REVERSE);//反向执行
iv_show.startAnimation(sa);//执行动画
break;
}
case R.id.btn_weiyi:
{
//位移
TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT,0,Animation.RELATIVE_TO_PARENT,0,Animation.RELATIVE_TO_PARENT,0,Animation.RELATIVE_TO_PARENT,0.2f);
ta.setDuration(2000);//设置执行时间
ta.setRepeatCount(1);//设置动画重复次数
ta.setRepeatMode(Animation.REVERSE);//反向执行
ta.setFillAfter(true);
iv_show.startAnimation(ta);//执行动画
break;
}
case R.id.btn_yiqi:
{
AnimationSet set = new AnimationSet(false);
//以上几种一起执行
AlphaAnimation aa = new AlphaAnimation(1.0f,0.0f);
aa.setDuration(2000);//设置执行时间
aa.setRepeatCount(1);//设置动画重复次数
aa.setRepeatMode(Animation.REVERSE);//反向执行
RotateAnimation ra = new RotateAnimation(0,360,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);//后面的参数进行指定坐标以自己坐标为屏幕宽的一半和屏幕高的一半为坐标进行旋转
ra.setDuration(2000);//设置执行时间
ra.setRepeatCount(1);//设置动画重复次数
ra.setRepeatMode(Animation.REVERSE);//反向执行
ScaleAnimation sa = new ScaleAnimation(1.0f,2.0f,1.0f,2.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
sa.setDuration(2000);//设置执行时间
sa.setRepeatCount(1);//设置动画重复次数
sa.setRepeatMode(Animation.REVERSE);//反向执行
TranslateAnimation ta = new TranslateAnimation(Animation.RELATIVE_TO_PARENT,0,Animation.RELATIVE_TO_PARENT,0,Animation.RELATIVE_TO_PARENT,0,Animation.RELATIVE_TO_PARENT,0.2f);
ta.setDuration(2000);//设置执行时间
ta.setRepeatCount(1);//设置动画重复次数
ta.setRepeatMode(Animation.REVERSE);//反向执行
ta.setFillAfter(true);
//载入动画
set.addAnimation(aa);
set.addAnimation(ra);
set.addAnimation(sa);
set.addAnimation(ta);
iv_show.startAnimation(set);//执行动画
break;
}
default:
break;
}
}
特别注意的是:要在res目录下创建一个anim文件夹,然后下面的布局文件要放到anim下才可以。
1.alpha.xml 透明效果
3.scale.xml 缩放效果
4.translate.xml 位移效果
5.set.xml 采用集合的方式
OnClick 方法的实现:
@Override
public void onClick(View v) {
switch(v.getId()){
case R.id.btn_touming:
{
//透明
Animation aa = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.alpha);
iv_show.startAnimation(aa);
break;
}
case R.id.btn_xuanzhuan:
{
//旋转
Animation ra = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate);
iv_show.startAnimation(ra);//执行动画
break;
}
case R.id.btn_suofang:
{
//缩放
Animation sa = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale);
iv_show.startAnimation(sa);//执行动画
break;
}
case R.id.btn_weiyi:
{
//位移
Animation ta = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
iv_show.startAnimation(ta);//执行动画
break;
}
case R.id.btn_yiqi:
{
Animation set = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.set);
iv_show.startAnimation(set);//执行动画
break;
}
default:
break;
}
}
原理:动画效果会改变控件的坐标位置
1>直接通过代码的方式:
这里我直接把按钮点击如何调用写一下,其他按钮声明初始化都和上面一样:
@Override
public void onClick(View v) {
switch(v.getId()){
case R.id.btn_touming:
{
//透明
/*
* 参数1是ImageView控件,参数2是透明属性名,后面是可变参数,0表示不透明 1表示完全透明
*/
ObjectAnimator oa = ObjectAnimator.ofFloat(iv_show, "alpha", 0,0.5f,0,1,0,1);
oa.setDuration(2000);
oa.start();//启动动画
break;
}
case R.id.btn_xuanzhuan:
{
//旋转
/*
* 参数1表示ImageView控件,参数2表示旋转属性名,后面是可变参数
*/
ObjectAnimator oa = ObjectAnimator.ofFloat(iv_show, "rotation", 0,180,90,360);
oa.setDuration(2000);
oa.start();//启动动画
break;
}
case R.id.btn_suofang:
{
//缩放
/*
* 参数1表示ImageView控件,参数2表示水平属性名,后面是可变参数
*/
ObjectAnimator oa = ObjectAnimator.ofFloat(iv_show, "scaleY", 0.1f, 2, 1, 2);
oa.setDuration(2000);
oa.start();//启动动画
break;
}
case R.id.btn_weiyi:
{
//位移
/*
* 参数1表示ImageView控件,参数2表示位移属性名,后面是可变参数
*/
ObjectAnimator oa = ObjectAnimator.ofFloat(iv_show, "translationX", 10,50,10,130);
oa.setDuration(2000);
oa.start();//启动动画
break;
}
case R.id.btn_yiqi:
{
AnimatorSet set = new AnimatorSet();
//以上几种一起执行
ObjectAnimator aa = ObjectAnimator.ofFloat(iv_show, "alpha", 0,0.5f,0,1,0,1);
aa.setDuration(2000);
ObjectAnimator ra = ObjectAnimator.ofFloat(iv_show, "rotation", 0,180,90,360);
ra.setDuration(2000);
ObjectAnimator sa = ObjectAnimator.ofFloat(iv_show, "scaleY", 0.1f, 2, 1, 2);
sa.setDuration(2000);
ObjectAnimator ta = ObjectAnimator.ofFloat(iv_show, "translationX", 10,50,10,130);
ta.setDuration(2000);
//载入动画
//一起进行
set.playTogether(aa,ra,sa,ta);
//挨个进行
// set.playSequentially(aa,ra,sa,ta);
set.setDuration(2000).start();//执行动画
break;
}
default:
break;
}
}
}
2>通过xml方式加载:
注意:要在res下添加文件夹anmiator,将资源文件放到目录下
Animator aa = AnimatorInflater.loadAnimator(getApplicationContext(), R.animator.oanimator);
aa.setTarget(iv_show);
aa.start();
通过AnimatorInflater类的这个loadAnimator()来加载。
setTarget参数传的是控件ImageView,因为我要操作这个上面图片。
最后启动调用start();
oanimator.xml 布局文件给出来: