Android 动画系列之补间动画以及帧动画

1、简介

动画想必大家做开发的时候都有用到吧，本文将介绍的是补间动画中的平移动画，包括xml形式的常用于弹出框的动画，还有java代码中 new TranslationAnimation()构造参数的解析。简要的为大家介绍下帧动画。

2、xml平移动画

2.1.平移固定数值:

        mBtn_translate.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Animation animation = AnimationUtils.loadAnimation(mContext,R.anim.animation_translation);
                mIv.startAnimation(animation);
            }
        });

anim文件中的animation_translation.xml：

<?xml version="1.0" encoding="utf-8"?>
    <!--android:fillAfter 结束后是否停在结束位置-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="false">
<translate
    android:fromXDelta="0"
    android:toXDelta="100"/>
<!--  平移动画中的数值:表示的是位置相对于 视图左上角的的相对位置:正为右,负为左 -->
</set>

运行效果:

        

运行结论:

            普通数值是相对于当前View的左上角为参考系进行平移的。

2.2. 平移为百分数

<?xml version="1.0" encoding="utf-8"?>
    <!--android:fillAfter 结束后是否停在结束位置-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="false">
<translate
    android:fromXDelta="0%"
    android:toXDelta="100%"/>
    <!-- x% 表示的是当前View的位置 + 当前View的宽*x%
         y% 表示的是当前View的位置 + 当前View的高*y%
    -->
</set>

结论:这里就先不演示了,单纯的百分数确实是相对于左上角加上View的宽高

2.3. 平移百分数P实现从底部弹出的效果

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    >
<translate
    android:duration= "2000"
    android:fromYDelta="100%p"
    android:toYDelta="0"/>
    <!--
       表示从  当前View的左上角+View的父布局的高度,
              由于Android坐标系下为正,所以是从很下面
          到   当前View的位置
    -->
</set>

 

又一个简单的例子：

// 执行动画语句
    private void turnRight() {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.view_right);
        mImageView.startAnimation(animation);
    }

    private void turnLeft() {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.view_left);
        mImageView.startAnimation(animation);
    }

view_left.xml

<?xml version="1.0" encoding="utf-8"?>
<!--fillAfter-true  设置动画结束后停留在原来位置-->
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:duration="1000">
    <!-- 从控件起始位置 向左移动到距离其父组件宽度的位置上-->
    <translate
        android:fromXDelta="0"
        android:toXDelta="-100%p">
    </translate>
</set>

运行效果如下：

结论: x%p 或者 y%p 还是很有用的,对于活动的跳转乃至弹出框的平移动画等都是很有用途的

         在我们日常开发中这些都是比较常见的故而有必要进行掌握

总结:

        数值  百分数 百分数P 其实都是对View的当前位置,即左上角的偏移，数值指代的是偏移多少个dp，不管是from 还是to 都是相当于当前位置的

        百分数指代的是偏移当前View的宽高百分比

         百分数P指代的是偏移当前View的父组件的宽高(注意这里是父组件)

3、Java中构建平移动画对象

说明一下 java对应的xml的解释如下！

        Animation.ABSOLUTE            =====> 数值;
        Animation.RELATIVE_TO_SELF    =====> 自身控件百分比(相对自己);
        Animation.RELATIVE_TO_PARENT  =====> 父布局百分比(相对父亲);

  如下即为,平移动画的构造函数，描述的是从当前view的偏移量 移动到view的偏移量。有一个相对关系，即是相对于视图位置。

    public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
            int fromYType, float fromYValue, int toYType, float toYValue) {

        mFromXValue = fromXValue;
        mToXValue = toXValue;
        mFromYValue = fromYValue;
        mToYValue = toYValue;

        mFromXType = fromXType;
        mToXType = toXType;
        mFromYType = fromYType;
        mToYType = toYType;
    }

对照着下面的代码进行讲解

    /**
     * 减速从底部弹出视图
     */
    private void doShowFromBottom(){
        mImageView.setVisibility(View.VISIBLE);
        // X轴不变,Y轴从父亲组件的底部一直平移到当下位置
        TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE, 0, Animation.ABSOLUTE, 0
                , Animation.RELATIVE_TO_PARENT, 1, Animation.RELATIVE_TO_PARENT, 0);
        translateAnimation.setDuration(2000);
        translateAnimation.setInterpolator(new DecelerateInterpolator());
        // 是否停留在动画结束的位置
        translateAnimation.setFillAfter(true);
        mImageView.startAnimation(translateAnimation);
    }

ok,代码已经给出,具体效果图像已经给出了可以观察。弄清楚三个状态值的话，后面理解起来是比较ok的。

        // x轴从a扩展到b y轴从a扩展到b  ; 相对点
        ScaleAnimation scaleAnimation = new ScaleAnimation(0.2f, 1.2f, 0.2f, 1.2f,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setFillAfter(true);
        scaleAnimation.setDuration(1000);
        mImageView.startAnimation(scaleAnimation);

 

4、帧动画

            <ImageView
                android:id="@+id/img_progress"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/yun_anim" />

<?xml version="1.0" encoding="utf-8"?>
<!-- 这里其实没多神奇,就是简单的帧动画罢了
     难点在于UI吧 没有图例
 -->
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/app_loading0"
        android:duration="150" />
    <item
        android:drawable="@drawable/app_loading1"
        android:duration="150" />
    <item
        android:drawable="@drawable/app_loading2"
        android:duration="150" />
    <item
        android:drawable="@drawable/app_loading3"
        android:duration="150" />

</animation-list>  

        mAnimationDrawable = (AnimationDrawable) mImgProgress.getDrawable();
        if (!mAnimationDrawable.isRunning()) {
            mAnimationDrawable.start();
        }

效果的话,就是图片跳动的动画