Android学习(16)Animations_动画

Android学习(16)Animations_动画

什么是Animations：

Animations提供了一系列的动画效果，这些效果可以作用于大多数的控件之上

Animations分为两大类：

• Tweened Animations:该类提供了旋转、移动、缩放、淡入淡出的动画效果
• Frame-by-Frame Animations:该类可以创建一个Drawable序列，这些Drawable中的图片可以按照指定时间一个一个连续显示，就形成了动画效果。可以制作出动图的效果。

Animations的使用步骤

• 创建一个AnimationSet动画集对象
• 根据需要创建相应的Animation对象
• 为Animation设置相应的数据
• 将Animation动画放入AnimationSet中
• 给控件添加动画并执行

Animations的分类

• Alpha：淡入淡出
• Scale：缩放
• Rotate：旋转
• Translate：移动

1.在Activity中设置Tweened Animations

（1）在布局文件中布局五个按钮，分别用于实现四个动画效果和动画的监听

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btnAlpha"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="淡入淡出"/>
    <Button
        android:id="@+id/btnScale"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="缩放"/>
    <Button
        android:id="@+id/btnRotate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="旋转"/>
    <Button
    android:id="@+id/btnTranslate"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="移动"/>
    <Button
        android:id="@+id/btnAnLsn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="动画的监听"/>
</LinearLayout>

（2）在Activity中实例化动画效果

public class AnimaionsActivity extends AppCompatActivity implements View.OnClickListener{

    private Button Alpha_btn,Scale_btn,Rotate_btn,Translate_btn,AnLsn_btn;
    //声明动画并实例化
    private AlphaAnimation alpha1 = new AlphaAnimation(1,0);
    private AlphaAnimation alpha2 = new AlphaAnimation(0,1);
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animaions);
        Alpha_btn = (Button)findViewById(R.id.btnAlpha);
        Scale_btn = (Button)findViewById(R.id.btnScale);
        Rotate_btn = (Button)findViewById(R.id.btnRotate);
        Translate_btn = (Button)findViewById(R.id.btnTranslate);
        AnLsn_btn = (Button)findViewById(R.id.btnAnLsn);
        Alpha_btn.setOnClickListener(this);
        Scale_btn.setOnClickListener(this);
        Rotate_btn.setOnClickListener(this);
        Translate_btn.setOnClickListener(this);
        AnLsn_btn.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            //淡入淡出
            case R.id.btnAlpha:
                //第一步：创建animationSet动画集对象
                AnimationSet animationSet_a = new AnimationSet(true);
                //第二步：创建相应的动画
                AlphaAnimation alpha = new AlphaAnimation(1,0);//从什么透明度到什么透明度
                //第三步：设置动画执行时间
                alpha.setDuration(2000);
                //第四步：将动画放入动画集中
                animationSet_a.addAnimation(alpha);
                //第五步：直接作用在控件之上
                Alpha_btn.startAnimation(animationSet_a);
                break;
            //缩放
            case R.id.btnScale:
                AnimationSet animationSet_s = new AnimationSet(true);
                //(Animation.RELATIVE_TO_PARENT)围绕父级控件变化
                //X轴从1缩放到0.1，Y轴从1缩放到0.1
                //围绕父级控件缩放，从1到0
                ScaleAnimation scale = new ScaleAnimation(1,0.1f,1,0.1f,
                        Animation.RELATIVE_TO_PARENT,1f,Animation.RELATIVE_TO_PARENT,0);
                scale.setDuration(2000);
                animationSet_s.addAnimation(scale);
                Scale_btn.startAnimation(animationSet_s);
                break;
            //旋转
            case R.id.btnRotate:
                AnimationSet animationSet_r = new AnimationSet(true);
                //(Animation.RELATIVE_TO_SELF)围绕自身
                //从0度旋转到到360度
                RotateAnimation rotate = new RotateAnimation(0,360,
                        Animation.RELATIVE_TO_SELF,0.5f,
                        Animation.RELATIVE_TO_SELF,0.5f);
                rotate.setDuration(2000);
                animationSet_r.addAnimation(rotate);
                Rotate_btn.startAnimation(animationSet_r);
                break;
                //移动
            case R.id.btnTranslate:
                AnimationSet animationSet_t = new AnimationSet(true);
                //X轴上从父级控件的0到父级控件的1，Y轴上从父级控件的0到父级控件的1
                TranslateAnimation translate = new TranslateAnimation(
                        Animation.RELATIVE_TO_PARENT,0f,
                        Animation.RELATIVE_TO_PARENT,1f,
                        Animation.RELATIVE_TO_PARENT,0f,
                        Animation.RELATIVE_TO_PARENT,1f
                );
                translate.setDuration(2000);
                animationSet_t.addAnimation(translate);
                Translate_btn.startAnimation(animationSet_t);
                break;
            //动画的监听
            case R.id.btnAnLsn:
                //设置动画执行时间
                alpha1.setDuration(2000);
                alpha2.setDuration(2000);
                //设置a按钮的监听
                AnLsn_btn.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        AnLsn_btn.startAnimation(alpha1);
                    }
                });
                //动画的监听，当第一个动画结束后立即执行第二个动画
                alpha1.setAnimationListener(new Animation.AnimationListener() {
                    //动画开始时触发
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }
                    //动画结束时触发
                    @Override
                    public void onAnimationEnd(Animation animation) {
                        AnLsn_btn.startAnimation(alpha2);
                    }
                    //动画重新执行时触发
                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });
                break;
        }
    }
}

淡入淡出效果

缩放效果

旋转效果

移动效果

动画的监听

2.在XML文件中配置Tweened Animations

优点：使用方便，可重复利用

(1)新建一个文件夹anim存放动画相关的xml

(2)在XML中创建动画

淡入淡出动画alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <alpha
        android:fromAlpha = "1.0"
        android:toAlpha = "0.0"
        android:duration="2000"
        android:startOffset="1000"
        />
</set>

属性解析：
android:fromAlpha = “1.0”：从透明度1.0
android:toAlpha = “0.0”：到透明度0.0
android:duration=”2000”：变化时间2秒
android:startOffset=”1000”：延时1秒钟后执行

缩放动画scale.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <scale
        android:duration="2000"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="1"
        android:toXScale="0"
        android:fromYScale="1"
        android:toYScale="0"
        />
</set>

属性解析：
android:duration=”2000”：动画执行时间2秒
android:pivotX=”50%”：以自身X轴长度的50%为中心
android:pivotY=”50%”：以自身Y轴长度的50%为中心
android:fromXScale=”1”：X轴从坐标1开始缩放
android:toXScale=”0”：缩放到X轴的坐标0
android:fromYScale=”1”：Y轴从坐标1开始缩放
android:toYScale=”0”：缩放到Y轴的坐标0

旋转动画rotate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <rotate
        android:fromDegrees = "0"
        android:toDegrees="720"
        android:duration="2000"
        android:pivotX="50%"
        android:pivotY="50%"
        />
</set>

属性解析：
android:fromDegrees = “0”：从0度开始旋转
android:toDegrees=”720”：旋转720度
android:duration=”2000”：执行时间2秒
android:pivotX=”50%”：以自身X轴长度的50%为中心
android:pivotY=”50%”：以自身Y轴长度的50%为中心

移动动画translate.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <translate
        android:fromXDelta="0"
        android:toXDelta="1000"
        android:fromYDelta="0"
        android:toYDelta="1000"
        android:duration="2000"
        />
</set>

属性解析：
android:fromXDelta=”0”：从X轴坐标的0位置开始移动
android:toXDelta=”1000”：移动到X轴坐标的1000位置
android:fromYDelta=”0”：从Y轴坐标的0位置开始移动
android:toYDelta=”1000”：移动到Y轴坐标的1000位置
android:duration=”2000”：执行时间2秒

(3)在布局文件中添加四个按钮，实现四个动画效果

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.test.androidtest.AnimationXMLActivity">
    <Button
        android:id="@+id/btnAlphaX"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="淡入淡出"/>
    <Button
        android:id="@+id/btnScaleX"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="缩放"/>
    <Button
        android:id="@+id/btnRotateX"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="旋转"/>
    <Button
        android:id="@+id/btnTranslateX"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="移动"/>
</LinearLayout>

(4)在Activity中引入xml文件

public class AnimationXMLActivity extends AppCompatActivity implements View.OnClickListener{

    private Button btn_alpha,btn_rotate,btn_scale,btn_tran;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation_xml);
        //找到按钮并绑定监听
        btn_alpha = (Button)findViewById(R.id.btnAlphaX);
        btn_alpha.setOnClickListener(this);
        btn_rotate = (Button)findViewById(R.id.btnRotateX);
        btn_rotate.setOnClickListener(this);
        btn_scale = (Button)findViewById(R.id.btnScaleX);
        btn_scale.setOnClickListener(this);
        btn_tran = (Button)findViewById(R.id.btnTranslateX);
        btn_tran.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            //淡入淡出
            case R.id.btnAlphaX:
                //引入XML文件
                Animation animation_1 = AnimationUtils.loadAnimation(
                        AnimationXMLActivity.this,R.anim.alpha);
                //给4个组建添加动画效果
                btn_alpha.startAnimation(animation_1);
                btn_rotate.startAnimation(animation_1);
                btn_scale.startAnimation(animation_1);
                btn_tran.startAnimation(animation_1);
                break;
            //旋转
            case R.id.btnRotateX:
                //引入XML文件
                Animation animation_2 = AnimationUtils.loadAnimation(
                        AnimationXMLActivity.this,R.anim.rotate);
                btn_alpha.startAnimation(animation_2);
                btn_rotate.startAnimation(animation_2);
                btn_scale.startAnimation(animation_2);
                btn_tran.startAnimation(animation_2);
                break;
            //缩放
            case R.id.btnScaleX:
                //引入XML文件
                Animation animation_3 = AnimationUtils.loadAnimation(
                        AnimationXMLActivity.this,R.anim.scale);
                btn_alpha.startAnimation(animation_3);
                btn_rotate.startAnimation(animation_3);
                btn_scale.startAnimation(animation_3);
                btn_tran.startAnimation(animation_3);
                break;
            //移动
            case R.id.btnTranslateX:
                //引入XML文件
                Animation animation_4 = AnimationUtils.loadAnimation(
                        AnimationXMLActivity.this,R.anim.translate);
                //给组件添加动画
                btn_alpha.startAnimation(animation_4);
                btn_rotate.startAnimation(animation_4);
                btn_scale.startAnimation(animation_4);
                btn_tran.startAnimation(animation_4);
                break;
        }
    }
}

淡入淡出

旋转

缩放

移动

4.在Activity中配置Frame-by-Frame Animations

(1)把要显示的图片放入drawable文件夹中

(2)在布局文件中添加两个按钮用于开始和停止动画，添加一个ImageView显示动画图片

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btnFAStart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="开始"/>
    <Button
        android:id="@+id/btnFAStop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="停止"/>
    <ImageView
        android:id="@+id/ivFA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

(3)在Activity中设置动画

public class FramAnimationsActivity extends AppCompatActivity implements View.OnClickListener{
    //通过数组将要加载的图片的ID存入数组frameIds[]
    private int[] frameIds = new int[]{
            R.drawable.anim_0010001,R.drawable.anim_0010002,R.drawable.anim_0010003,
            R.drawable.anim_0010004,R.drawable.anim_0010005,R.drawable.anim_0010006,
            R.drawable.anim_0010007,R.drawable.anim_0010008,R.drawable.anim_0010009,
            R.drawable.anim_0010010,R.drawable.anim_0010011,R.drawable.anim_0010012,
            R.drawable.anim_0010013,R.drawable.anim_0010014,R.drawable.anim_0010015,
            R.drawable.anim_0010016,R.drawable.anim_0010016
    };
    private Button start_btn,stop_btn;
    private ImageView iv;
    //创建AnumationDrawable序列对象
    private AnimationDrawable anim;
    //资源
    private Resources res;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fram_animations);
        start_btn = (Button)findViewById(R.id.btnFAStart);
        stop_btn = (Button)findViewById(R.id.btnFAStop);
        iv = (ImageView)findViewById(R.id.ivFA);
        start_btn.setOnClickListener(this);
        stop_btn.setOnClickListener(this);

        //获得图片的资源
        res = getResources();
        anim = new AnimationDrawable();
        for (int i=0; i < 17; i++) {
            //参数：图片的资源参数，每一张图片之间执行的间隔时间
            anim.addFrame(res.getDrawable(frameIds[i]),100);
        }
        //加载动画
        iv.setBackgroundDrawable(anim);
        //设置动画是否可见
        anim.setVisible(true,true);
        //设置动画执行一次
        anim.setOneShot(false);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btnFAStart:
                //开始动画
                anim.start();
                break;            
            case R.id.btnFAStop:
                //停止动画
                anim.stop();
                break;
        }
    }
}

5.在XML中配置Frame-by-Frame Animations

在代码中书写以及在XML文件中配置：
创建animation-list标签，以及标签下的item标签并配置其属性
(1)创建anim_list.xml文件，加载动画图片

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <item
        android:drawable="@drawable/anim_0010001"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010002"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010003"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010004"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010005"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010006"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010007"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010008"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010009"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010010"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010011"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010012"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010013"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010014"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010015"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010016"
        android:duration="100"
        />
    <item
        android:drawable="@drawable/anim_0010017"
        android:duration="100"
        />
</animation-list>

注意事项：
android:drawable=”@drawable/anim_0010017”：表示图片地址
android:duration=”100”：表示图片存在时间

(2)在布局文件中的ImageView中加载anim_list.xml中的图品

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:id="@+id/btnFAXStart"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="开始"/>
    <Button
        android:id="@+id/btnFAXStop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="停止"/>
    <ImageView
        android:id="@+id/ivFAX"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/anim_list"/>
</LinearLayout>

(3)在Activity中获得动画资源，启动或停止动画

public class FrameAnimXmlActivity extends AppCompatActivity implements View.OnClickListener{

    private ImageView iv;
    //定义AnimationDrawable对象
    private AnimationDrawable anim;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_frame_anim_xml);
        findViewById(R.id.btnFAXStart).setOnClickListener(this);
        findViewById(R.id.btnFAXStop).setOnClickListener(this);
        iv = (ImageView)findViewById(R.id.ivFAX);
        //通过AnimationDrawable对象获得资源
        anim = (AnimationDrawable) iv.getBackground();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btnFAXStart:
                //开启动画
                anim.start();
                break;
            case R.id.btnFAXStop:
                //停止动画
                anim.stop();
                break;
        }
    }
}

---

声明：
1.知识点来源于《网易云课堂》——《Android基础视频教程》
2.本文只用于本人自身学习记录，如有侵权，请立即通知本人更改或删除