动画的组合

在浏览网站或者应用时，会发现一些比较好看的动画。写这篇文章主要是记录下一个思想，炫酷的动画需要组合实现，时机和动画的配合。上个示例：

  

布局：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:background="@color/material_blue_500"
             tools:context=".mvp.ui.activities.SplashActivity">

    <ImageView
        android:id="@+id/logo_outer_iv"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher_outer"/>

    <ImageView
        android:id="@+id/logo_inner_iv"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher_inner"
        tools:alpha="1"/>

    <TextView
        android:id="@+id/app_name_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="80dp"
        android:alpha="0"
        android:text="@string/app_name"
        android:textColor="@color/white"
        android:textSize="@dimen/medium"
        tools:alpha="1"/>
</FrameLayout>

这个Splash呈现的动画分为三个部分，

   (1) NEW字样图 

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

    <translate
        android:fromYDelta="-100%p"
        android:toYDelta="0%"/>
    <scale
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0"/>
    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1"/>

</set>

　调用：

Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_top_in);
mLogoInnerIv.startAnimation(animation);

    说明：

pivotX 属性为动画相对于物件的X坐标的开始位置,可以设置为数字
pivotY 属性为动画相对于物件的Y坐标的开始位置

这里的pivotX和pivotY,可以设置为数字，百分比，或者百分比p，例如分别都把两个参数

- 设置为50时，旋转点为View的左上角的原点在x方向和y方向加上50px的点。在Java代码里面设置这个参数的对应参数是Animation.ABSOLUTE。

- 设置为50%时，旋转点为View的左上角的原点在x方向加上自身宽度50%和y方向自身高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_SELF。

- 设置为50%p时，旋转点为View的左上角的原点在x方向加上父控件宽度50%和y方向父控件高度50%的点。在Java代码里面设置这个参数的对应参数是Animation.RELATIVE_TO_PARENT。

   (2) 绿色方块

   (3) AppName - 淡入

　　这个两个动画是使用了一个库来实现的，选择你想要的效果去组合实现：

compile 'com.nineoldandroids:library:2.4.0'
compile 'com.daimajia.easing:library:1.0.1@aar'
compile 'com.daimajia.androidanimations:library:1.1.3@aar'

实现示例动画的完整代码：

private void initAnimation() {
        startLogoInner1();
        startLogoOuterAndAppName();
    }

    private void startLogoInner1() {
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_top_in);
        mLogoInnerIv.startAnimation(animation);
    }

    private void startLogoOuterAndAppName() {
        final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
        valueAnimator.setDuration(1000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float fraction = animation.getAnimatedFraction();
                KLog.d("fraction: " + fraction);
                if (fraction >= 0.8 && !isShowingRubberEffect) {
                    isShowingRubberEffect = true;
                    startLogoOuter();
                    startShowAppName();
                    finishActivity();
                } else if (fraction >= 0.95) {
                    valueAnimator.cancel();
                    startLogoInner2();
                }

            }
        });
        valueAnimator.start();
    }

    private void startLogoOuter() {
        YoYo.with(Techniques.RubberBand).duration(1000).playOn(mLogoOuterIv);
    }

    private void startShowAppName() {
        YoYo.with(Techniques.FadeIn).duration(1000).playOn(mAppNameTv);
    }

    private void startLogoInner2() {
        YoYo.with(Techniques.Bounce).duration(1000).playOn(mLogoInnerIv);
    }