UI设计篇·入门篇·简单动画的实现，透明动画/旋转动画/移动动画/缩放动画，混合动画效果的实现，为动画设置监听事件，自定义动画的方法

2023-01-07 16:35:26

基本的动画构成共有四种：透明动画/旋转动画/移动动画/缩放动画。

配置动画的方式有两种，一种是直接使用代码来配置动画效果，另一种是使用xml文档配置动画效果

相比而言，用xml文档写出来的动画效果，写一次可以很多次调用，但代码配置的话则每一次都需要重复配置过程。

具体使用代码：

//这是对一个按钮设置不同的动画
findViewById(R.id.animation).setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                //使用代码配置透明动画

                AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);　　//从0到1，代表从完全透明转变为完全不透明

                alphaAnimation.setDuration(1000);　　　　　　　　　　　　　　　　//这个变化的时间一共花费1秒

                v.startAnimation(alphaAnimation);　　　　　　　　　　　　　　　　//启动此animation

//                使用XML文档配置透明动画

                v.startAnimation(AnimationUtils.loadAnimation(Main2Activity.this,R.anim.alphaanimation));

//                使用代码配置旋转动画
　　　　　　　　//下面新建的旋转动画的意思是从0度旋转到360度，而旋转的中心点是相对于自身宽高的一半

                RotateAnimation rotateAnimation = new RotateAnimation(0,360, Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);

                rotateAnimation.setDuration(1000);

                v.startAnimation(rotateAnimation);

//                使用XML文档配置旋转动画

                v.startAnimation(AnimationUtils.loadAnimation(Main2Activity.this,R.anim.rotateanimation));

//                使用代码配置移动动画

                TranslateAnimation translateAnimation = new TranslateAnimation(0,200,0,200);　　//从（0，0）移动到（200，200）

                translateAnimation.setDuration(1000);

                v.startAnimation(translateAnimation);

//                使用代码配置移动动画

                v.startAnimation(AnimationUtils.loadAnimation(Main2Activity.this,R.anim.translateanimation));

//                使用代码配置缩放动画

                ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1,0,0);　　　　//按钮的长和宽的百分比从0缩放到1，缩放的原点在（0，0）

                scaleAnimation.setDuration(1000);

                v.startAnimation(scaleAnimation);

//                使用XML文档配置缩放动画

                v.startAnimation(AnimationUtils.loadAnimation(Main2Activity.this,R.anim.scaleanimation));

            }

        });

创建动画XML文档的方法：

1.在res目录文件下，新建XML文件，选择类型为animation

2.在该文件夹下新建xml文件，用来配置动画的相关信息

透明动画的xml配置文件：

<?xml version="1.0" encoding="utf-8"?>

<alpha xmlns:android="http://schemas.android.com/apk/res/android"

    android:fromAlpha="0"

    android:toAlpha="1"

    android:duration="1000">

</alpha>

旋转动画的xml配置文件：

<?xml version="1.0" encoding="utf-8"?>

<rotate xmlns:android="http://schemas.android.com/apk/res/android"

    android:fromDegrees="0"

    android:toDegrees="360"

    android:duration="1000"

    android:pivotX="50%"

    android:pivotY="50%">

</rotate>

移动动画的xml配置文件：

<?xml version="1.0" encoding="utf-8"?>

<translate xmlns:android="http://schemas.android.com/apk/res/android"

    android:fromXDelta="0"

    android:toXDelta="200"

    android:fromYDelta="0"

    android:toYDelta="200"

    android:duration="1000">

</translate>

缩放动画的xml配置文件：

<?xml version="1.0" encoding="utf-8"?>

<scale xmlns:android="http://schemas.android.com/apk/res/android"

    android:fromXScale="0"

    android:toXScale="1"

    android:fromYScale="0"

    android:toYScale="1"

    android:duration="1000">

</scale>

二、混合动画效果的实现：
1.新建一个animationSet容器，用来储存各种需要混合的动画效果数据

2.分别单独设计混合动画的各部分内容，然后将每种动画都添加进animationSet容器

3.通过startAnimation方法启动混合动画

实际代码：

AnimationSet animationSet = new AnimationSet(true);     //true容器内的每个动画都被使用

//透明动画
AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);

alphaAnimation.setDuration(1000);

animationSet.addAnimation(alphaAnimation);

//旋转动画

RotateAnimation rotateAnimation = new RotateAnimation(0,360, Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);

rotateAnimation.setDuration(1000);

animationSet.addAnimation(rotateAnimation);

//缩放动画

ScaleAnimation scaleAnimation = new ScaleAnimation(0,1,0,1,0,0);

scaleAnimation.setDuration(1000);

animationSet.addAnimation(scaleAnimation);
//以上的三种动画就是上面的简单动画的复用

v.startAnimation(animationSet);

使用XML文件配置混合动画的方法：

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:shareInterpolator="true"

    android:duration="1000">

    <alpha

        android:fromAlpha="0"

        android:toAlpha="1"

        android:duration="1000">

    </alpha>

    <rotate

        android:fromDegrees="0"

        android:toDegrees="360"

        android:duration="1000"

        android:pivotX="50%"

        android:pivotY="50%">

    </rotate>

    <scale

        android:fromXScale="0"

        android:toXScale="1"

        android:fromYScale="0"

        android:toYScale="1"

        android:duration="1000">

    </scale>

</set>

为动画设置监听事件：

动画的监听事件包含了三个时间的调用方法：动画开始，动画重复，动画结束。

实际代码：

Animation a = AnimationUtils.loadAnimation(Main2Activity.this,R.anim.multianimation);
a.setAnimationListener(new Animation.AnimationListener() {

　　@Override

   public void onAnimationStart(Animation animation) {

   　　Toast.makeText(getApplicationContext(),"动画开始",Toast.LENGTH_SHORT).show();

      }

   @Override

   public void onAnimationEnd(Animation animation) {

   Toast.makeText(getApplicationContext(),"动画结束",Toast.LENGTH_SHORT).show();

   }

   @Override

   public void onAnimationRepeat(Animation animation) {

   Toast.makeText(getApplicationContext(),"动画重复调用",Toast.LENGTH_SHORT).show();

   }

 });

 v.startAnimation(a);

自定义动画的实现方法步骤：

1.自定义class，继承Animation

2.根据实际需要重写父方法，设计代码实现实际需求

3.通过类名调用（使用方法与系统动画一致）

实际代码：

import android.view.animation.Animation;

import android.view.animation.Transformation;

/**

 * Created by Andrew on 2016/7/27.

 */

public class CustomAnimation extends Animation {

    @Override

    public void initialize(int width, int height, int parentWidth, int parentHeight) {

        //这是一个可以获取动画控件的宽高和父容器的宽高的方法

        super.initialize(width, height, parentWidth, parentHeight);

    }

    //需要特别注意的是，此方法是会执行无数次，期间interpolatedTime会从0到1变化无数次，所有动画的实现基本都与这个数值的变化有关

    @Override

    protected void applyTransformation(float interpolatedTime, Transformation t) {

        // interpolatedTime 这是一个与动画运行周期相关的数值，在动画运行过程中，它会从0变成1

        // t参数是接受变化的控件对象

        //自定义动画效果：透明渐变

        t.setAlpha(interpolatedTime);       //由于interpolatedTime是从0变化到1的，将他的值设置进去技能实现透明度渐变

        //自定义动画效果：X轴的晃动效果

        t.getMatrix().setTranslate((float) (Math.sin(interpolatedTime)*50),0);

        super.applyTransformation(interpolatedTime, t);

    }

}
上一篇：HDU 5807 Keep In Touch


下一篇：Spring 拦截器——HandlerInterceptor