2018-04-23

补间动画(Tween Animation)

 包括  (1)透明度渐变动画  AlphaAnimation
       (2)旋转动画  RotateAnimation
       (3)缩放动画  ScaleAnimation
       (4)平移动画  TranslateAnimation

1.做出如图所示的界面,然后给各个按钮加上onclick,对按钮进行监听:


图1-13.png

代码如下:

 



 

     

2.在MainActivity中编写各个按钮应实现的功能
代码如下:
先找到图片,以便把动画效果运用到图片上:

 public class MainActivity extends Activity { 
ImageView img;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    img = (ImageView) findViewById(R.id.imageView1);
}

(1)透明度渐变动画 AlphaAnimation

  public void Alpha(View view) {
    AlphaAnimation aa = new AlphaAnimation(1.0f, 0.0f);// 1.0不透明的,0.0透明的
    aa.setDuration(2000);// 设置动画的持续时间,毫秒
    aa.setRepeatCount(1);// 设置动画重复的次数 重复两次
    aa.setRepeatMode(Animation.REVERSE);// 设置动画重
       复模式 REVERSE相反的回来一次 从有到无,从无到有
    img.startAnimation(aa); // 把动画应用到图片上
}

(2)旋转动画 RotateAnimation

 public void Rotate(View view) {
    // 以左上角为中心点进行旋转360度
    // RotateAnimation ra=new RotateAnimation(0.0f, 360.0f);
    // 以自身中心点进行旋转
    RotateAnimation ra = new RotateAnimation(0.0f, 360.0f,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
            0.5f);
    ra.setDuration(2000);
    ra.setRepeatCount(3); // 转四圈
    ra.setRepeatMode(Animation.REVERSE);
    img.startAnimation(ra);
}

(3)缩放动画 ScaleAnimation

 public void Scale(View view) {
    // 以左上角为缩放点
    // ScaleAnimation sc=new ScaleAnimation(1.0f,2.0f,1.0f,2.0f);
    // 以自身中心点为缩放点
    ScaleAnimation sc = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
            0.5f);
    sc.setDuration(2000);
    sc.setRepeatCount(3);
    sc.setRepeatMode(Animation.REVERSE);
    img.startAnimation(sc);
}

(4)平移动画 TranslateAnimation

 public void Translate(View view) {
    TranslateAnimation tr = new TranslateAnimation(
         //x轴从-2.5到2.5,y轴从-2.0到2.0
            Animation.RELATIVE_TO_SELF, -2.5f, 
            Animation.RELATIVE_TO_SELF, 2.5f,
            Animation.RELATIVE_TO_SELF, -2.0f,
            Animation.RELATIVE_TO_SELF, 2.0f);

    tr.setDuration(5000);
    tr.setRepeatCount(1);
    tr.setRepeatMode(Animation.REVERSE);
 // tr.setFillAfter(true);//走到哪之后,停下来
    img.startAnimation(tr);

 }

5.把几种动画效果合起来

 public void All(View view) {
    ScaleAnimation sc = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
            0.5f);
    sc.setDuration(2000);
    sc.setRepeatCount(3);
    sc.setRepeatMode(Animation.REVERSE);
         
    RotateAnimation ra = new RotateAnimation(0.0f, 360.0f,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
            0.5f);
    ra.setDuration(2000);
    ra.setRepeatCount(3); // 转四圈
    ra.setRepeatMode(Animation.REVERSE);

    AlphaAnimation aa = new AlphaAnimation(1.0f, 0.0f);// 1.0不透明的,0.0透明的
    aa.setDuration(2000);// 设置动画的持续时间,毫秒
    aa.setRepeatCount(3);// 设置动画重复的次数 重复两次
    aa.setRepeatMode(Animation.REVERSE);// 设置动画重
     复模式 REVERSE相反的回来一次 从有到无,从无到有

    AnimationSet as = new AnimationSet(true); // 创建一个动画集合,把两种动画合在
                                                 一起
    as.addAnimation(sc);
    as.addAnimation(ra);
    as.addAnimation(aa);
    img.setAnimation(as);

}

运行结果如图所示:

(1)
图1-14.png

(2)
图1-15.png

(3)
图1-19.jpg

(4)
图1-16.png

图1-17.png

(5)
图1-18.jpg

本节知识点:

1. setDuration(2000);// 设置动画的持续时间,毫秒
2. setRepeatCount(3);// 设置动画重复的次数 
3.setRepeatMode(Animation.REVERSE);// 设置动画重复模式  REVERSE相反的回来一次 
从有到无,从无到有
4.img.startAnimation(aa); // 把动画应用到图片上
5.AnimationSet as = new AnimationSet(true); // 创建一个动画集合,把两种动画合在一
                                               起

你可能感兴趣的:(2018-04-23)