Android基础动画

版权声明：欢迎大家留言讨论 https://blog.csdn.net/u014733374/article/details/47320843

这篇blog记录Android的四大基本动画及简单用法！

Android基础动画

1. Tween Animation 变换动画
2. .Frame Animation 帧动画
3. Layout Animation 布局动画
4. Property Animation 属性动画

一、先来看Tween Animation

Tween Animation也包含四种基本的动画效果：

• Alpha:渐变透明度动画
• Scale:渐变尺寸缩放动画
• Translate:位置移动动画
• Roatate:旋转动画

Tween Animation有几个共同的属性，即以上四种动画都有的属性：

1. Duration:动画持续时间（单位：毫秒）
2. fillAfter：设置为true,动画转化在动画结束后被应用
3. fillBefore:设置为true,动画转化在动画开始前被应用
4. interpolator：动画插入器（加速、减速插入器）
5. repeatCount:动画重复次数
6. repeateMode:顺序重复/倒序重复
7. startOffset:动画之间的时间间隔

以上四种Animation都有两种实现方式：

1. 配置文件（/res/anim)—alpha、scale、translate、rotate，即在/res/anim目录下创建xml文件，使用相应的属性标签
2. java代码实现—AlphaAnimation、ScaleAnimation、TranslateAnimation、RotateAnimation，创建对应的动画对象，设置对象的属性

接下来依次看下上面四种Tween Animation的实现即效果

AlphaAnimation

1. fromAlpha:动画起始时透明度
2. toAlpha:动画终止时的透明度

效果：

首先上面效果动画我是通过xml文件定义的

res/目录下创建了anim文件夹，然后在anim文件夹下创建了alpha.xml文件

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha
        android:duration="1000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0"/>

</set>

然后代码中加载动画，通过Android的AnimationUtils类来加载xml动画，然后将动画绑定给图片

 /**
     * 渐变透明度动画
     * @param view
     */
    public void AlphaAnimation(View view){
        loadAnimation=AnimationUtils.loadAnimation(context,R.anim.alpha);
        img.startAnimation(loadAnimation);
    }

ScaleAnimation

ScaleAnimation(缩放动画)

1. fromX、toX分别是起始和结束时x坐标上的伸缩尺寸
2. fromY,toY分别是起始和结束时y坐标上的伸缩尺寸
3. pivotX,pivotY分别为伸缩动画相对于x,y坐标开始的位置

效果：

scal的xml文件

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <scale
        android:duration="2000"
        android:fromXScale="0.0"
        android:toXScale="1.0"
        android:fromYScale="0.0"
        android:toYScale="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"/>

</set>

代码中加载：

/**
     * 渐变尺寸动画
     * @param view
     */
    public void ScaleAnimation(View view){
        loadAnimation=AnimationUtils.loadAnimation(context,R.anim.scal);
        img.startAnimation(loadAnimation);
    }

TranslateAnimation

1. fromXdelta，fromYdelta分别是起始时X、Y的坐标
2. toXDelta、toYDelta分别是结束时X、Y的坐标

效果：

anim文件夹下的translate动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="2000"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromXDelta="10"
        android:toXDelta="100"
        android:fromYDelta="10"
        android:toYDelta="10"/>

</set>

代码中使用

 /**
     * 位移动画
     * @param view
     */
    public void TranslateAnimation(View view){
        loadAnimation=AnimationUtils.loadAnimation(context,R.anim.translate);
        img.startAnimation(loadAnimation);
    }

RoatateAnimation
旋转动画

1. fromDegrees起始的角度
2. toDegrees终止的角度
3. pivotX,pivotY分别为旋转动画相对于x,y的坐标开始位置

效果：

anim文件夹下的roatate动画

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="+360"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"/>

</set>

代码中使用

/**
     * 旋转动画
     * @param view
     */
    public void RotateAnimation(View view){
        loadAnimation=AnimationUtils.loadAnimation(context,R.anim.roatate);
        img.startAnimation(loadAnimation);
    }

上面Tween Animation的四种动画都看过了，也还是挺简单的,下面看两个组合动画的实现，很好理解，就是两个或者多个动画组合在一起，效果：

  /**
     * 位移后旋转
     * @param view
     */
    public void continue_1(View view){
        loadAnimation=AnimationUtils.loadAnimation(context,R.anim.translate);
        img.startAnimation(loadAnimation);

        final Animation loadAnimation_1=AnimationUtils.loadAnimation(context, R.anim.roatate);
        //给第一个动画绑定了一个监听事件，监听其结束事件
        loadAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                img.startAnimation(loadAnimation_1);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
    }

组合动画

效果：

这组动画用一个配置文件实现，配置文件里面包含两个动画：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <alpha
        android:duration="3000"
        android:fromAlpha="0.2"
        android:toAlpha="1.0"/>
    <alpha
        android:duration="3000"
        android:fromAlpha="1.0"
        android:toAlpha="0.2"/>

</set>

代码中加载动画

代码中加载这个动画就可以，按先后顺序执行

/**
     * xml里面两个动画一次执行
     * @param view
     */
    public void continue_2(View view){
        loadAnimation=AnimationUtils.loadAnimation(context,R.anim.continue_anim);
        img.startAnimation(loadAnimation);
    }

上面动画基本都是在xml文件实现的，下面我们用代码的方式实现一个动画的效果

/**
     * 闪烁
     * @param view
     */
    public void flash(View view){

        AlphaAnimation alphaAnimation=new AlphaAnimation(0.1f,1.0f);
        alphaAnimation.setDuration(100);
        alphaAnimation.setRepeatCount(10);
        alphaAnimation.setRepeatMode(Animation.REVERSE);

        img.startAnimation(alphaAnimation);
    }

页面切换动画

 public void Change(View view){
        Intent intent=new Intent(MainActivity.this,OtherActivity.class);
        startActivity(intent);
        //调用该方法绑定页面跳转的动画
        overridePendingTransition(R.anim.zoom_in, R.anim.zoom_out);
    }

关键是两个动画
zoom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <scale
        android:duration="1000"
        android:fromXScale="0.1"
        android:toXScale="1.0"
        android:fromYScale="0.1"
        android:toYScale="1.0"
        android:pivotY="50%"
        android:pivotX="50%"/>
    <alpha
        android:duration="1000"
        android:fromAlpha="0"
        android:toAlpha="1.0"/>

</set>

zoom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <scale
        android:duration="1000"
        android:fromXScale="1.0"
        android:toXScale="0.1"
        android:fromYScale="1.0"
        android:toYScale="0.1"
        android:pivotX="50%"
        android:pivotY="50%"/>
    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"/>

</set>

布局动画

效果：

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_list);
        listView=(ListView) findViewById(R.id.listview);
        List<String> list=new ArrayList<String>();
        for(int i=0;i<6;i++)
        {
            list.add("星期"+i);
        }
        ArrayAdapter<String> adapter=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list);
        listView.setAdapter(adapter);
        LayoutAnimationController lac=new LayoutAnimationController(AnimationUtils.loadAnimation(this, R.anim.zoom_in));
        lac.setOrder(LayoutAnimationController.ORDER_NORMAL);
        listView.setLayoutAnimation(lac);
        listView.startLayoutAnimation();
    }

给listview绑定一个LayoutAnimationController对象即可。

逐帧动画
效果：

代码：

public void Button(View view){
        //先把动画list绑定给imageview
        img.setImageResource(R.drawable.anim_list);
        //然后通过imageview拿到AnimationDrawable对象，再让AnimationDrawable开始就ok
        AnimationDrawable animationDrawable= (AnimationDrawable) img.getDrawable();
        animationDrawable.start();
    }

anim_list.xml:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@drawable/one"
        android:duration="500"/>
    <item
        android:drawable="@drawable/two"
        android:duration="500"/>
    <item
        android:drawable="@drawable/three"
        android:duration="500"/>
    <item
        android:drawable="@drawable/four"
        android:duration="500"/>
    <item
        android:drawable="@drawable/five"
        android:duration="500"/>
    <item
        android:drawable="@drawable/six"
        android:duration="500"/>

</animation-list>

基础动画到此为止！！！