Android中Drawable动画、帧动画、转场动画

源码地址： https://download.csdn.net/download/dreams_deng/12236355

1. 理论知识

1.1 动画类型：
View动画 ：   View本身在动
Drawable动画：  View中内容在动,帧动画,图片在切换
 1.2.android实现动画方式：
 编码方式
 xml方式

1.3. 动画Api :

    scaleAnimation1.setStartOffset(1000);  // 动画延迟时间
    scaleAnimation1.setDuration(10000);   // 持续时间
    scaleAnimation1.setFillBefore(true);  // 最终状态
     img_context.startAnimation(scaleAnimation1);  // 启动动画
     translateAnimation.setRepeatCount(3); //重复次数动画
      translateAnimation.setInterpolator  // 设置动画变化率
      animationSet.setAnimationListener  // 设置动画监听回调

  2. 动画实现

2.1.1.代码实现缩放动画

//锚点位置： 默认位置视图中心点
        // 动画执行效果，1.图形变成原来的0.5倍宽高，2.延迟 1S ,3. 然后开始执行动画 10S 到1.5倍, 执行完毕,恢复默认1.0倍默认大小,4.动画执行中心点设置后面的4个参数都是
      // 动画中心点坐标,缩放中心点坐标：
        // Animation.RELATIVE_TO_SELF  0.5  现对于自己宽度0.5宽度的位置  中心点 X
       // Animation.RELATIVE_TO_PARENT   0.5  现对于父元素的0.5宽度的位置 中心点 X
        //  如何使用，原来的大小不用动 fromX , fromY

public void codeScale(View view) {
        /*
        float fromX, float toX, float fromY, float toY,
            int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
         */
        // 相对于自己，绝对值
        ScaleAnimation scaleAnimation1=new ScaleAnimation(0.5f,1.5f,0.5f,1.5f,Animation.ABSOLUTE,img_context.getWidth()/2,
                Animation.ABSOLUTE,0);

        // 现对于自己，中心点
        ScaleAnimation scaleAnimation2=new ScaleAnimation(0.5f,1.5f,0.5f,1.5f,Animation.RELATIVE_TO_SELF,0.5f,
                Animation.RELATIVE_TO_SELF,0.5f);

        // 延迟1s开始
        scaleAnimation1.setStartOffset(1000);
      // 持续时间
        scaleAnimation1.setDuration(10000);
        // 最终还原
        scaleAnimation1.setFillBefore(true);
        // 启动动画
        img_context.startAnimation(scaleAnimation1);

        //锚点位置： 默认位置视图中心点
        // 动画执行效果，图形变成原来的0.5倍宽高，延迟 1S , 然后开始执行动画 10S 到1.5s, 执行完毕,恢复默认1.0
      // 动画中心点坐标,缩放中心点坐标：
        // Animation.RELATIVE_TO_SELF  0.5  现对于自己宽度0.5宽度的位置  中心点 X
       // Animation.RELATIVE_TO_PARENT   0.5  现对于父元素的0.5宽度的位置 中心点 X
        //  如何使用，原来的大小不用动 fromX , fromY


    }

  2.1.2  xml实现缩放动画：/res/anim/scale1.xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0"
    android:fromYScale="0"
    android:toXScale="1.5"
    android:toYScale="1"
    android:startOffset="1000"
    android:duration="3000"
    android:pivotX="100%"
    android:pivotY="100%"
    android:fillAfter="true">

</scale>
   <!--
      android:pivotX="100%"
    android:pivotY="100%"    相对于自己

       android:pivotX="100"  绝对值像素
    android:pivotY="100"

       android:pivotX="100%p"  现对于父亲
    android:pivotY="100%p"
   -->
    <!-- 宽度从0.0到1.5, 高度从0.0到1.0, 延迟1s开始,持续3s,圆心为右下角, 最终固定 -->

   public void xmlScale(View view) {
       Animation animation= AnimationUtils.loadAnimation(this,R.anim.scale1);
        img_context.startAnimation(animation);

    }

2.2.1  实现旋转动画:

 //    旋转动画  ，  0度旋转到90度,旋转点是图形中心点
        RotateAnimation rotateAnimation=new RotateAnimation(0f,90.0f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        rotateAnimation.setDuration(5000);
        img_context.startAnimation(rotateAnimation);

  /res/anim/rotate_test.xml 代码实现：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="-90"
    android:duration="5000">
    
</rotate>
<!-- 以左顶点为坐标, 从正90度到负90度, 持续5s -->

    // 默认旋转点是左上角, xml实现
        Animation animation= AnimationUtils.loadAnimation(this,R.anim.rotate_test);
//        img_context.startAnimation(animation);

2.3.1. 实现透明度动画:   从显示到隐藏，

        // 透明度动画
        // 不透明度1  透明度0 不透明
        // 不透明度0  透明度1 透明
        AlphaAnimation alphaAnimation=new AlphaAnimation(1,0);
        alphaAnimation.setDuration(5000);
        img_context.startAnimation(alphaAnimation)

  /res/anim/alpha_test.xml 代码实现：

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1" 
    android:toAlpha="0"
    android:duration="4000">

</alpha>
<!-- 从完全不透明到完全透明, 持续4s -->

        // 透明度动画, 从显示到隐藏
        animation= AnimationUtils.loadAnimation(this,R.anim.alpha_test);
        img_context.startAnimation(animation);ation);

2.4.1. 实现移动动画:

/*
         *  Animation.ABSOLUTE, 0,
               Animation.ABSOLUTE, 0,    开始现对于自己没有动
         *        Animation.RELATIVE_TO_SELF, 1,
               Animation.RELATIVE_TO_SELF, 1    现对于自己移动一个自己
         *    X中移动一个自己宽度距离，Y轴移动相对于自己高度距离
         */
        TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE, 0,
                Animation.RELATIVE_TO_SELF, 1,
                Animation.ABSOLUTE, 0,
                Animation.RELATIVE_TO_SELF, 1);
        translateAnimation.setDuration(5000);
        translateAnimation.setRepeatCount(3); //重复次数动画
        // Animation.INFINITE) 无限次数

        // 设置动画变化率
        /**
         * LinearInterpolator 线性变化
         * AccelerateInterpolator: 加速变化
         * DecelerateInterpolator : 减速变化
         * CycleInterpolator: 周期变化
         *
         */
        translateAnimation.setInterpolator(new AccelerateInterpolator());

        img_context.startAnimation(translateAnimation);

        /res/anim/translate_test.xml 代码实现：

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


</translate>
    <!-- 从屏幕的右边逐渐回到原来的位置, 持续2s -->

       animation= AnimationUtils.loadAnimation(this,R.anim.translate_test);
        img_context.startAnimation(animation);

        3. 综合动画，
      1.1.多个动画同时执行  AnimationSet
      1.1. 如果动画逐个执行，那么设置动画延时，执行第一个完毕，才执行第二个alphaAnimation.setStartOffset(2000);

  public void  codeSetAnimation(View view){
   // 透明度 从 透明到不透明    持续 2s  接着进行旋转360 持续1s
         AlphaAnimation alphaAnimation=new AlphaAnimation(1,0);
         alphaAnimation.setDuration(2000);
         alphaAnimation.setStartOffset(2000); // 设置延时，避免动画同时执行

         RotateAnimation rotateAnimation=new RotateAnimation(0f,360f,
                 Animation.RELATIVE_TO_SELF,0.5f,
                 Animation.RELATIVE_TO_SELF,0.5f
         );
         rotateAnimation.setDuration(1000);
        AnimationSet animationSet=new AnimationSet(true);
        animationSet.addAnimation(alphaAnimation);
        animationSet.addAnimation(rotateAnimation);


        animationSet.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {

            }

            @Override
            public void onAnimationRepeat(Animation animation) {
     // 动画重复
            }
        });

        img_context.startAnimation(animationSet);
    }

 /res/anim/set_test.xml 代码实现：

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

    <alpha
        android:duration="2000"
        android:fromAlpha="0"
        android:toAlpha="1" >
    </alpha>

    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:startOffset="2000"
        android:toDegrees="360" />

</set>
<!-- 透明度从透明到不透明, 持续2s, 接着进行旋转360度的动画, 持续2s -->

 public void xmlSetAnimation(View view){
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.set_test);
        //3. 启动动画
        img_context.startAnimation(animation);
    }

  4.  帧动画 ： 

1. /res/drawable/drawable_animation_test.xml  设置图片播放顺序

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

    <!-- android:duration 每一张 图片 动画执行时间 -->
    <item
        android:drawable="@drawable/nv1"
        android:duration="500"/>
    <item
        android:drawable="@drawable/nv2"
        android:duration="500"/>
    <item
        android:drawable="@drawable/nv3"
        android:duration="500"/>
    <item
        android:drawable="@drawable/nv4"
        android:duration="500">
    </item>

</animation-list>

2.  设置图片播放控件：android:background

  <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="imgAnimation"
            android:text="启动帧动画"/>

        <ImageView
            android:id="@+id/donghuaImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/drawable_animation_test"
            android:layout_marginLeft="20dp"
            android:layout_gravity="center_vertical"
            />

3.  播放帧动画、停止帧动画

 // 启动停止帧动画
   public void  imgAnimation(View view){
        AnimationDrawable animationDrawable= (AnimationDrawable) donghuaImg.getBackground();
        if(animationDrawable.isRunning()){
            animationDrawable.stop();
        }else{
            animationDrawable.start();
        }
    }

 效果图：

4. Android实现转场动画： 

实现原理图：

   实现代码逻辑：

1.  MainActivity界面功能按钮：

   // 当前界面下一个界面
    public void nextPage(View view) {
        startActivity(new Intent(MainActivity.this,SecondActivity.class));
        // 右边进来动画 right_in
        // 当前界面出去动画：left_out
 // 让动画起效果函数
        overridePendingTransition(R.anim.right_in, R.anim.left_out);
    }

/res/drawable/right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<translate
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:fromXDelta="100%"
     android:toXDelta="0"
     android:duration="500">
    <!-- 从屏幕右边移动到屏幕显示上，做上角坐标从100% 到 0 -->
</translate>

/res/drawable/right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0" 
    android:toXDelta="100%"
    android:duration="500">
</translate>

2.  SecondActivity 关闭返回

 public void back(View view){
        finish();
        // 进来动画，右边动画进来
        // 当前界面出去
        overridePendingTransition(R.anim.left_in, R.anim.right_out);
    }

/res/drawable/left_in.xml

<?xml version="1.0" encoding="utf-8"?>
<translate
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:fromXDelta="-100%"
     android:toXDelta="0"
     android:duration="500">
</translate>

/res/drawable/right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="100%"
android:duration="500">
</translate>

效果图：

5. 动画案例, APIDemos总demo , 点击实现EditText实现左右抖动

5.1. 布局：

  <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="开始"
        android:onClick="back"/>

    <EditText
        android:id="@+id/et_main_name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="用户名" />

5.2. Java 代码：

    public void back(View view){
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.shake);
        et_main_name.startAnimation(animation);
    }

/res/anim/shake.xml

<?xml version="1.0" encoding="utf-8"?>
<!--
     Copyright (C) 2007 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
  
          http://www.apache.org/licenses/LICENSE-2.0
  
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromXDelta="0"
    android:interpolator="@anim/cycle_8"
    android:toXDelta="10" />

/res/anim/cycle_8.xml   抖动次数

<?xml version="1.0" encoding="utf-8"?>
<!--
     Copyright (C) 2007 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
  
          http://www.apache.org/licenses/LICENSE-2.0
  
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:cycles="8" />