[Android] android 实现加速小火箭动画效果 位移+透明渐变 动画
16lz
2021-01-26
【需求分析】
最近要实现一个类似于加速火箭移动的动画，需要带有位置移动和透明度转变的动画。类似于从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); }透明度变化的动画效果如下
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); }
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); animationSet.setFillAfter(true); animationSet.setDuration(1000); animationSet.addAnimation(translateAnimation); animationSet.addAnimation(alphaAnimation); mIVRocket.startAnimation(animationSet); } 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对象上，而不是单个对象单独设置（单独设置不会有效果）
更多相关文章
- android 开发之动画Activity
- Android(安卓)动画之AlphaAnimation、ScaleAnimation应用详解
- Android(安卓)吸入动画效果详解
- Android(安卓)4.0为Launcher主界面所有应用程序图标添加统一背景
- Android(安卓)Animation 高手必读 之一 Tweened Animations 代码
- Android(安卓)Animation学习（五） ApiDemos解析：容器布局动画 Layout
- Android(安卓)Animation学习（六） View Animation介绍
- Android动画效果translate、scale、alpha、rotate的 xml文件写法
- Android(安卓)开源动画框架 NineOldAndroids