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

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

分类: IT文章 • 2022-05-22 10:50:58

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

配置动画的方式有两种，一种是直接使用代码来配置动画效果，另一种是使用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:andro>
    android:fromAlpha="0"
    android:toAlpha="1"
    android:duration="1000">
</alpha>

旋转动画的xml配置文件：

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:andro>
    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:andro>
    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:andro>
    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:andro>
    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);
    }
}

相关推荐