【需求分析】
最近要实现一个类似于加速火箭移动的动画,需要带有位置移动和透明度转变的动画。类似于从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;@Overrideprotected 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() {@Overridepublic void onClick(View v) {startTranslateAnimation();}});Button btnTestAlpha = (Button) findViewById(R.id.test_alpha_animation);btnTestAlpha.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {startAlphaAnimation();}});Button btnTestFixed = (Button) findViewById(R.id.test_fixed_animation);btnTestFixed.setOnClickListener(new View.OnClickListener() {@Overridepublic 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(animationSet);}private void displayWholeAnimation() {startAppearanceAnimation();new Handler().postDelayed(new Runnable() {@Overridepublic void run() {startDisappearanceAnimation();}}, 1000);}}
【总结】
1. 位移动画TranslateAnimation实现位移,SetFIllAfter=true可让View停留在动画终点处,false返回动画起点
2. 透明度动画 AlphaAnimation实现透明度变化,可实现View的渐显或者渐隐效果
3. 动画效果可以叠加展示,通过AnimationSet实现。整个动画的fillAfter和duration需要设置在AnimationSet对象上,而不是单个对象单独设置(单独设置不会有效果)