Android Animation——view animation

程序员文章站 2022-03-01 20:59:51

...

Interpolator

interpolator是用来控制动画进度的，即动画的速率变化。常见的有以下几类：

Java 类	res引用(@android:anim/)	含义
AccelerateInterpolator	accelerate_interpolator	在动画开始的地方速率改变比较慢，然后开始加速
DecelerateInterpolator	decelerate_interpolator	在动画开始的地方速率改变比较慢，然后开始减速
AccelerateDecelerateInterpolator	accelerate_decelerate_interpolator	在动画开始与结束的地方速率改变比较慢，在中间的时侯加速
AnticipateInterpolator	anticipate_interpolator	开始的时候向后然后向前甩
OvershootInterpolator	overshoot_interpolator	向前甩一定值后再回到原来位置
AnticipateOvershootInterpolator	anticipate_overshoot_interpolator	开始的时候向后然后向前甩一定值后返回最后的值
CycleInterpolator	cycle_interpolator	动画循环播放特定的次数，速率改变沿着正弦曲线
BounceInterpolator	bounce_interpolator	动画结束的时候弹起
LinearInterpolator	linear_interpolator	在动画的以均匀的速率改变

四种动画实践

四种动画的实现方式有两种：

利用xml方式来实现：
- 在res/anim目录下创建资源文件（root element为set），然后在其内添加标签alpha（透明）、scale（缩放）、translate（位移）以及rotate（旋转）中的一种或者多者混合
- 利用AnimationUtils类的loadAnimation来获取动画
- 调用view的startAnimation方法运行动画
利用java代码来实现：
- 直接使用java类：AlphaAnimation、ScaleAnimation、TranslateAnimation 以及RotateAnimation，对其进行初始化以及设置。
- 调用view的startAnimation方法运行动画

AlphaAnimation 透明动画

xml实现方式

1. 在res/anim目录创建文件alpha文件如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:fillAfter="false"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:repeatCount="3"
        android:repeatMode="reverse" />
</set>

android:duration表示动画运行时长

android:fillAftertrue表示view保持动画结束时的状态，false表示动画结束时，view变回执行动画前的状态。

android:interpolator可以参考前面的Interpolator表格的res引用(@android:anim/)列

android:fromAlpha表示动画开始时控件的透明度

android:toAlpha表示动画结束时控件的透明度

android:repeatCount表示重复次数，注：只有配置在alpha标签内才有效，如果配置在set标签内则设置无效。

android:repeatMode表示动画重复的模式，分为reverse和restart两种。reverse表示动画结束状态反向执行到动画初始状态，restart表示重新从动画初始状态执行到动画结束状态。注：只有配置在alpha标签内才有效，如果配置在set标签内则设置无效。

注：在xml文件中，repeatCount和repeatMode属性需要设置alpha内才有效，而设置在set内是无效的

2. 在java文件中加载动画

public void runAlphaAnimation(View view){
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.alpha);
        animation.setInterpolator(new LinearInterpolator());
        //animation.setRepeatCount(1);
        //animation.setRepeatMode(Animation.REVERSE);
        animation.setFillAfter(false);
        animation.setDuration(2000);
        imageView.startAnimation(animation);
    }

我们可以看到xml的属性在java代码中也有相关的方法来进行设置。在这里有一点需要注意下，由于我们这里加载的资源是上面的res/anim/alpha.xml文件，其root element为set标签。因此当我们对返回的animation对象使用setRepeatCount和setRepeatMode方法的时候，其本质是为set设置相关属性，此时你就会发现setRepeatCount设置无效了。与之相对，如果我们加载下面的xml文件，setRepeatCount就可以正常使用了。

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:repeatCount="3"
    android:repeatMode="reverse">
</alpha>

java代码实现

直接初始化AlphaAnimation对象并设置，即可。

    public void runAlphaAnimation(View view){
        AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f,0.0f);
        alphaAnimation.setDuration(2000);
        alphaAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
        imageView.startAnimation(alphaAnimation);
    }

初始化对象方法public AlphaAnimation(float fromAlpha, float toAlpha)其参数和xml的属性相对应。animation的相关设置方法（如setDuration，setInterpolator，setRepeatCount，setRepeatMode等）都和xml中的属性相对应。

ScaleAnimation 缩放动画

xml实现方式

1. 在res/anim目录创建文件scale文件如下：

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

    <scale
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

android:fromXScale表示初始X轴缩放比例，1.0f为正常大小。

android:toXScale表示结束X轴缩放比例，1.0f为正常大小。

android:fromYScale表示初始Y轴缩放比例，1.0f为正常大小。

android:toYScale表示结束Y轴缩放比例，1.0f为正常大小。

android:pivotX表示view的缩放中心的横坐标，其值主要有以下三种：

Animation.ABSOLUTE："50"表示以当前View左上角坐标加50px为初始点
Animation.RELATIVE_TO_SELF：="50%"表示以当前View的左上角加上当前View宽高的50%做为初始点。
Animation.RELATIVE_TO_PARENT：="50%p"表示以当前View的左上角加上父控件宽高的50%做为初始点。

android:pivotY表示view的缩放中心的纵坐标，具体参数同android:pivotX。

2. 在java文件中加载动画

public void runAlphaAnimation(View view){
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.scale);
        animation.setInterpolator(new LinearInterpolator());
        animation.setFillAfter(false);
        animation.setDuration(2000);
        imageView.startAnimation(animation);
    }

java代码实现

    public void runScaleAnimation(View view){
        ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 1.4f,1.0f,0.6f,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setDuration(2000);
        imageView.startAnimation(scaleAnimation);
    }

初始化构造方法：public ScaleAnimation(float fromX, float toX, float fromY, float toY,int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) 其中 pivotXType和pivotYType的参数值有Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF和Animation.RELATIVE_TO_PARENT。

TranslateAnimation 位移动画

xml实现方式

在res/anim目录创建文件translate文件如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">

    <translate
        android:fromXDelta="0"
        android:toXDelta="300"
        android:fromYDelta="0"
        android:toYDelta="100"/>
</set>

android:fromXDelta表示起始点横坐标，具体参数如下：

Animation.ABSOLUTE："50"表示以当前View左上角坐标加50px为初始点
Animation.RELATIVE_TO_SELF："50%"表示以当前View的左上角加上当前View宽高的50%做为初始点。
Animation.RELATIVE_TO_PARENT："50%p"表示以当前View的左上角加上父控件宽高的50%做为初始点。

android:toXDelta表示结束点横坐标，同上。

android:fromYDelta表示起始点纵坐标，同上。

android:toYDelta表示结束点纵坐标，同上。

2. 在java文件中加载动画

public void runAlphaAnimation(View view){
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.translate);
        animation.setInterpolator(new LinearInterpolator());
        animation.setFillAfter(false);
        animation.setDuration(2000);
        imageView.startAnimation(animation);
    }

java代码实现

    public void runTranslateAnimation(View view){
        TranslateAnimation translateAnimation = new TranslateAnimation(0.0f,50.0f,0.0f,50.f);
        translateAnimation.setDuration(2000);
        imageView.startAnimation(translateAnimation);
    }

初始化构造方法：public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)

RotateAnimation 旋转动画

xml实现方式

1. 在res/anim目录创建文件rotate文件如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:interpolator="@android:anim/bounce_interpolator">

    <rotate
        android:fromDegrees="0"
        android:toDegrees="120"
        android:pivotX="50%"
        android:pivotY="50" />
</set>

android:fromDegrees表示旋转开始角度，正代表顺时针度数，负代表逆时针度数。

android:toDegrees表示旋转结束角度，正代表顺时针度数，负代表逆时针度数。

android:pivotX表示旋转中心X轴坐标。具体参数如下：

Animation.ABSOLUTE："50"表示以当前View左上角坐标加50px为初始点
Animation.RELATIVE_TO_SELF："50%"表示以当前View的左上角加上当前View宽高的50%做为初始点。
Animation.RELATIVE_TO_PARENT："50%p"表示以当前View的左上角加上父控件宽高的50%做为初始点。

android:pivotY表示旋转中心Y轴坐标。具体参数同上。

2. 在java文件中加载动画

public void runAlphaAnimation(View view){
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.rotate);
        animation.setInterpolator(new LinearInterpolator());
        animation.setFillAfter(false);
        animation.setDuration(2000);
        imageView.startAnimation(animation);
    }

java代码实现

    public void runRotationAnimation(View view){
        RotateAnimation rotateAnimation = new RotateAnimation(0.0f,60.0f,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(2000);
        imageView.startAnimation(rotateAnimation);
    }

初始化构造方法：public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)其中 pivotXType和pivotYType的参数值有Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF和Animation.RELATIVE_TO_PARENT。具体和前面说的xml对应。

四种动画混合实践

前面介绍了四种动画单一使用的情况。接下来简单说下四种动画混合使用的情况。其实现方式还有有两种：xml实现以及java代码实现。

xml代码实现

在res/anim目录创建mix.xml文件，如下：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:shareInterpolator="false">
    <translate
        android:fromXDelta="0"
        android:toXDelta="300"/>
    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

在java文件中加载动画

    public void runMixAnimation(View view){
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.mix);
        imageView.startAnimation(animation);
    }

java代码实现

    public void runMixAnimation(View view){
        AnimationSet set = new AnimationSet(false);
        TranslateAnimation translateAnimation = new TranslateAnimation(0,300,0,0);
        set.addAnimation(translateAnimation);
        RotateAnimation rotateAnimation = new RotateAnimation(0,360,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f);
        set.addAnimation(rotateAnimation);
        set.setDuration(5000);
        imageView.startAnimation(set);
    }

对比两种实现方式，我们会发现：

xml中的set标签对应着java代码中的AnimationSet
xml中的alpha，scale，translate，rotate，标签对应着java代码中的AlphaAnimation，ScaleAnimation，TranslateAnimation，RotateAnimation

易出错的地方

有些方法（如setRepeatCount，setRepeatMode等）只对AlphaAnimation（或者xml中alpha标签）有效，而对AnimationSet（或者xml中set标签）无效。因此建议，对于只有对于只有一种效果的动画，其xml的root element最好就设为alpha，scale之类的，而不要设为set。

上一篇：学习鸡汤：出色的学习能力，才是你唯一可持续的竞争优势

下一篇： PHP入门培训教程PHP程序员要掌握哪些技术

Android Animation——view animation

分类

Interpolator

四种动画实践

AlphaAnimation 透明动画

xml实现方式

java代码实现

ScaleAnimation 缩放动画

xml实现方式

java代码实现

TranslateAnimation 位移动画

xml实现方式

java代码实现

RotateAnimation 旋转动画

xml实现方式

java代码实现

四种动画混合实践

易出错的地方

Android View.onMeasure方法详解及实例

Android自定义View实现水波纹效果

CSS3 animation – steps 函数详解

Android自定义View验证码输入框

Android自定义View实现拼图小游戏

Android创建外部lib库及自定义View的图文教程

Android中将View的内容保存为图像的简单实例

Android自定义View展开菜单功能的实现

Android自定义可点击的ImageSpan并在TextView中内置View

android自定义view之实现日历界面实例