2018-04-23

补间动画(Tween Animation)

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

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


图1-13.png

代码如下:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="145dp"
    android:src="@drawable/a09" />

 <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:layout_alignParentLeft="true"
     android:orientation="horizontal" >

     <Button
         android:id="@+id/button1"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="透明"
         android:onClick="Alpha" />

     <Button
         android:id="@+id/button2"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="旋转" 
         android:onClick="Rotate"/>

     <Button
         android:id="@+id/button3"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="缩放" 
         android:onClick="Scale"/>

     <Button
         android:id="@+id/button4"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="平移"
         android:onClick="Translate" />

     <Button
         android:id="@+id/button5"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:text="全部" 
         android:onClick="All"/>
 </LinearLayout>

 </RelativeLayout>

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); // 创建一个动画集合,把两种动画合在一
                                               起
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容