android 辐射动画_android：一个绚丽的注册动画

1、前言

在网站上看到一个很绚丽的注册设计,先看下原设计效果：

image

下面是我实现的效果：

本文讲解如何通过属性动画实现该效果。

动画分析

整个动画流程分成下面三部分来单独实现：

注册按钮点击后的扩散动画

网络请求动画

主页面动画

扩散动画：当用户点击注册按钮后，整个按钮呈圆形扩散直至铺满整个屏幕。

网络请求动画可以分为以下几个部分：

signUp文字入场动画:文字从下往上平移，同时播放缩放动画，并且透明度逐渐加深。

白线延长动画，线条向右延伸，

success文字入场动画，同时伴随sign up文字的出场动画，由左往右移动与sign up碰撞后减速停止，sign up向右移动并消失，俩个文字透明度皆发生变化。

请求网络动画播放成功后跳转到主页面，主页的Tab栏由铺满整个屏幕逐渐变小到原始高度，并且Tab栏的俩个菜单按钮透明度也发生变化。

2、注册按钮后的扩散动画

点击注册按钮后，显示动画播放view，开始播放缩放动画。

整个缩放动画就是一个圆形的view的放大动画，将该view的背景设置为shape即可实现圆形效果。

圆形view的背景代码：

扩散动画代码：

public static void spreadAni(View target, float endScale, SimpleAnimatorListener endListener)

{

ObjectAnimator scaleXAnimator = ObjectAnimator.ofFloat(target, "ScaleX", endScale);

scaleXAnimator.setInterpolator(new AccelerateInterpolator());

ObjectAnimator scaleYAnimator = ObjectAnimator.ofFloat(target, "ScaleY", endScale);

scaleYAnimator.setInterpolator(new AccelerateInterpolator());

AnimatorSet animSet = new AnimatorSet();

animSet.play(scaleXAnimator).with(scaleYAnimator);

animSet.setDuration(500);

animSet.start();

animSet.addListener(endListener);

}

整个扩散(放大)动画分成俩个属性动画，分别播放view在x方向和y方向的缩放动画，该动画最重要的地方在于计算最终放大比例，因为我们在布局文件中，缩放view的位置并没有在整个动画的正中间，还是向上偏移了一点，所以最终缩放值在计算结果的基础上加1，否则动画结束后背景颜色无法铺满整个屏幕：

//计算扩散动画最终放大比例

private float getScale()

{

//原始扩散圆的直径

int orgWidth = v_spread.getMeasuredWidth();

int width = getMeasuredWidth();

int height = getMeasuredHeight();

//扩散圆最终扩散的圆的半径

float finalDiameter = (int) (Math.sqrt(width * width + height * height));

//因为圆未居中，所以加1

return finalDiameter / orgWidth + 1;

}

3、网络请求动画

扩散动画播放结束后开始播放网络请求动画。整个过程分成三部分，下面分别讲解实现方法。

3.1 signUp入场动画文字

扩散动画后结束后紧接着播放singUp的入场动画，给动画设置监听，在监听的onAnimationEnd(Animator animation)中开始入场动画。

入场动画代码：

/**

* sign up文字入场动画

*

* @param target 需要播放动画的view

* @param endListener 动画监听

*/

public static void signUpTextInAni(View target, SimpleAnimatorListener endListener)

{

target.setVisibility(View.VISIBLE);

int targetHeight = target.getMeasuredHeightAndState();

ObjectAnimator scaleX = ObjectAnimator.ofFloat(target, "ScaleX", 0.75f, 0.87f, 1f, 1.1f, 1.0f);

ObjectAnimator scaleY = ObjectAnimator.ofFloat(target, "ScaleY", 0.75f, 0.87f, 1f, 1.1f, 1.0f);

ObjectAnimator translationAni = ObjectAnimator.ofFloat(target, "TranslationY", targetHeight * 0.8f, -targetHeight * 0.2f, 0);

ObjectAnimator alphaAni = ObjectAnimator.ofFloat(target, "Alpha", 0.5f, 1.0f);

AnimatorSet animatorSet = new AnimatorSet();

animatorSet.playTogether(scaleX, scaleY, translationAni, alphaAni);

animatorSet.setDuration(2000);

animatorSet.start();

animatorSet.addListener(endListener);

}

动画开始播放时，将signUp文字(简称注册文字，下同)显示，通过AnimatorSet的playTogether()方法同上开启四格动画，即注册文字的缩放动画(x、y方向)、Y方向的平移动画，透明度提升动画。其中，缩放动画从0.75倍放大到1.1倍大小后再缩放回原始大小(1.0倍)，这样实现一个放大膨胀然后再轻微反弹缩小到原始大小的效果。平移动画类似，上升后再反弹下沉一定高度。具体变化值详见代码。

3.2 白线延长动画

注册文字入场动画播放动画结束后开始白色线条的延长动画。这个动画就是线条在X方向的缩放：

public static void lineExpendAni(View target, SimpleAnimatorListener endListener)

{

target.setVisibility(View.VISIBLE);

ObjectAnimator animator = ObjectAnimator.ofFloat(target, "ScaleX", 0, 0.6f, 0.9f, 1.0f);

animator.setDuration(1500);

animator.setInterpolator(new DecelerateInterpolator());

target.setPivotX(0);

animator.start();

animator.addListener(endListener);

}

利用setPivotX(0)方法把线条X方向的中心点(可理解为缩放的起始点，动画将以该坐标为中线开始辐射，默认为view的中线点)设置0，这样扩大动画只会向一个方向发生，即可实现线条延长效果。动画播放数值"0, 0.6f, 0.9f, 1.0f"并不是等差排列，还是越来越小,这样即可实现减速效果(根据差值的缩小梯度绝对减速度的变化值)。

3.3 success文字入场动画

public static void successInAni(View success, View signUpView, SimpleAnimatorListener endListener)

{

success.setVisibility(View.VISIBLE);

int durationTime = 1000;

int width = success.getMeasuredWidth();

ObjectAnimator successTranslationAni = ObjectAnimator.ofFloat(success, "TranslationX", width * -1.2f, width * -0.2f, 0);

ObjectAnimator successAlphaAni = ObjectAnimator.ofFloat(success, "Alpha", 0.1f, 1.0f, 1.0f);

ObjectAnimator signUpTranslationAni = ObjectAnimator.ofFloat(signUpView, "TranslationX", 0, width * 0.75f, width * 1.5f);

signUpTranslationAni.setInterpolator(new AccelerateInterpolator());

ObjectAnimator signUpAlphaAni = ObjectAnimator.ofFloat(signUpView, "Alpha", 1.0f, 1.0f, 0.4f, 0.0f);

AnimatorSet animatorSet = new AnimatorSet();

animatorSet.playTogether(successTranslationAni, successAlphaAni, signUpTranslationAni, signUpAlphaAni);

animatorSet.setDuration(durationTime);

animatorSet.start();

animatorSet.addListener(endListener);

}

success文字(成功文字)的入场动画包含俩组动画：

成功文字入场

注册文字出场

俩组动画相互对应，即X方向的平移和透明度的增减。动画的播放值代码写得很清楚，这里就不在累赘复述了。

4、主页动画

我们可动画播放view设置一个自定义监听事件，当成功文字播放完成后，回调给activity。当动画结束后，跳转到主页面。

主页显示后，播放动画，动画包含俩个动画，先看代码：

{

ValueAnimator valueAnimator = ValueAnimator.ofInt(rl_title.getHeight(), DensityUtils.dp2px(this, 50));

valueAnimator.setInterpolator(new AccelerateInterpolator());

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()

{

@Override

public void onAnimationUpdate(ValueAnimator animation)

{

rl_title.getLayoutParams().height = (int) animation.getAnimatedValue();

rl_title.requestLayout();

}

});

AnimatorSet animatorSet = new AnimatorSet();

animatorSet.playTogether(valueAnimator,

ObjectAnimator.ofFloat(iv_me, "Alpha", 0.1f, 1.0f),

ObjectAnimator.ofFloat(iv_menu, "Alpha", 0.1f, 1.0f));

animatorSet.setDuration(1200);

animatorSet.start();

}

代码中：我们利用一个ValueAnimator实现tabView(rl_title)的高度收缩动画，rl_title的起始高度铺满整个屏幕，最后高度变为50dp收缩到屏幕顶部，同时俩个按钮 iv_me 、iv_menu透明度加深。

给ValueAnimator通过addUpdateListener设置一个数值变化监听，根据动画计算的当前值通过布局参数动态设置rl_title的高度。

5、结束