[Android] android 实现加速小火箭动画效果 位移+透明渐变 动画

【需求分析】

最近要实现一个类似于加速火箭移动的动画，需要带有位置移动和透明度转变的动画。类似于从A到B发生位移动画，且加速小火箭主键显示。而从B到C发生位移动画，且加速小火箭逐渐变暗消失。实现效果如图所示：



【需求拆分】

接到这个需求后，首先将需求进行细分，分为位移动画和逐渐变量（变暗）两个部分。对应的Android的动画类分别是TranslateAnimation(位移动画)和AlphaAniamtion(透明度变化动画)。首先先熟悉一下这两种动画。

1. TranslateAnimation 位移动画

private void startTranslateAnimation() {
/**
* 进行位移动画，标准步骤
*      1. 创建位移动画对象
*            构造函数 TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
*            参数含义：相对于原图位置   fromXDelta X轴起点相对于原图偏移  toXDelta X轴终点相对于原图偏移
*                                    fromYDelta Y轴起点相对于原图偏移  toYDelta Y轴终点相对于原图偏移
*      2. 设置动画终点是否保持 setFillAfter ： true 动画结束后留在终点  false:动画结束后返回起点
*/
TranslateAnimation translateAnimation = new TranslateAnimation(0.0f, 0.0f, 0.0f, -200.0f);
translateAnimation.setFillAfter(true);
translateAnimation.setDuration(1000);

mIVRocket.startAnimation(translateAnimation);
}

这里需要注意的一个小点：设置FillAfter的值，为true代表动画后View停留在终点位置处（下面左图所示），false代表动画结束后返回起点（下面右图所示）。


                     

 
     

2. AlphaAnimation 透明度转变动画

private void startAlphaAnimation() {
/**
* 进行透明度变化动画，标准步骤
*      1. 创建AlphaAnimation动画
*          构造函数 AlphaAnimation fromAlphaVal  toAlphaVal
*/
AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
alphaAnimation.setFillAfter(true);
alphaAnimation.setDuration(1000);

mIVRocket.startAnimation(alphaAnimation);
}

透明度变化的动画效果如下



3. 同时完成位移和透明度动画需求

private void startAppearanceAnimation() {
/**
* 核心类 AnimationSet 顾名思义，可以简单理解为将多种动画放在一个set集合里面
*    产生渐渐显示+位移动画，将加速小火箭渐渐显示出来;
*
*/
TranslateAnimation translateAnimation = new TranslateAnimation(0.0f, 0.0f, 0.0f, -200.0f);
AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);

AnimationSet animationSet = new AnimationSet(true);
<strong><span style="color:#ff0000;">animationSet.setFillAfter(true);
animationSet.setDuration(1000);</span></strong>
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(alphaAnimation);

mIVRocket.startAnimation(animationSet);
}

 实现叠加的动画效果：这里一定要注意的是，对AnimationSet动画，fillAfter和duration需要在AniamtionSet对象中设置，不要设置单个动画对象上。



4. 完成的动画过程（位移+渐渐显示  停留  位移+渐渐隐藏）

package com.baidu.rocketanimation;

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.animation.AlphaAnimation;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

private ImageView mIVRocket = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

mIVRocket = (ImageView) findViewById(R.id.image_rocket);
Button btnTestTrans = (Button) findViewById(R.id.test_translate_animation);
btnTestTrans.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startTranslateAnimation();
}
});

Button btnTestAlpha = (Button) findViewById(R.id.test_alpha_animation);
btnTestAlpha.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startAlphaAnimation();
}
});

Button btnTestFixed = (Button) findViewById(R.id.test_fixed_animation);
btnTestFixed.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
displayWholeAnimation();
}
});

}

private void startTranslateAnimation() {
/**
* 进行位移动画，标准步骤
*      1. 创建位移动画对象
*            构造函数 TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
*            参数含义：相对于原图位置   fromXDelta X轴起点相对于原图偏移  toXDelta X轴终点相对于原图偏移
*                                    fromYDelta Y轴起点相对于原图偏移  toYDelta Y轴终点相对于原图偏移
*      2. 设置动画终点是否保持 setFillAfter ： true 动画结束后留在终点  false:动画结束后返回起点
*/
TranslateAnimation translateAnimation = new TranslateAnimation(0.0f, 0.0f, 0.0f, -200.0f);
translateAnimation.setFillAfter(true);
translateAnimation.setDuration(1000);

mIVRocket.startAnimation(translateAnimation);
}

private void startAlphaAnimation() {
/**
* 进行透明度变化动画，标准步骤
*      1. 创建AlphaAnimation动画
*          构造函数 AlphaAnimation fromAlphaVal  toAlphaVal
*/
AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
alphaAnimation.setFillAfter(true);
alphaAnimation.setDuration(1000);

mIVRocket.startAnimation(alphaAnimation);
}

private void startAppearanceAnimation() {
/**
* 核心类 AnimationSet 顾名思义，可以简单理解为将多种动画放在一个set集合里面
*    产生渐渐显示+位移动画，将加速小火箭渐渐显示出来;
*
*/
TranslateAnimation translateAnimation = new TranslateAnimation(0.0f, 0.0f, 0.0f, -200.0f);
AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);

AnimationSet animationSet = new AnimationSet(true);
animationSet.setFillAfter(true);
animationSet.setDuration(1000);
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(alphaAnimation);

mIVRocket.startAnimation(animationSet);
}

private void startDisappearanceAnimation() {
TranslateAnimation translateAnimation = new TranslateAnimation(0.0f, 0.0f, -200.0f, -400.0f);
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);

AnimationSet animationSet = new AnimationSet(true);
<span style="color:#ff0000;">animationSet.setFillAfter(true);
animationSet.setDuration(1000);</span>
animationSet.addAnimation(translateAnimation);
animationSet.addAnimation(alphaAnimation);

mIVRocket.startAnimation(animationSe
a59e
t);
}

private void displayWholeAnimation() {
startAppearanceAnimation();

new Handler().postDelayed(new Runnable() {
@Override
public void run() {
startDisappearanceAnimation();
}
}, 1000);
}
}

【总结】
1. 位移动画TranslateAnimation实现位移，SetFIllAfter=true可让View停留在动画终点处,false返回动画起点

        2.  透明度动画 AlphaAnimation实现透明度变化，可实现View的渐显或者渐隐效果

        3. 动画效果可以叠加展示，通过AnimationSet实现。整个动画的fillAfter和duration需要设置在AnimationSet对象上，而不是单个对象单独设置（单独设置不会有效果）