教你一個簡單炫酷的app程序的打開動畫（干貨）

文章同步我的csdn博客
app也是有顏值，動畫就是一種化妝術(shù)，他讓你的app更加炫酷，首先給你看下圖

這就是我們今天要做的東西

首先呢，先普及下總體的框架知識，有三種動畫
(1)Drawable Animation：逐幀動畫，就像電影一樣，一幀一幀，拼接在一起在人眼中就是連續(xù)的，可以簡單的理解為圖片切換，缺點就是圖片過多或過大會造成oom
(2)View Animation：視圖動畫，比較適合那種不用和用戶交互的東湖
(3)Property Animation：是android 3.0以后加入的，為了解決視圖動畫的缺點，就是組件移動化為實際的移動，現(xiàn)在大部分也用

首先先來講講視圖動畫，也就是這次我們實現(xiàn)上圖效果的方式，有四種動畫方式

這里寫圖片描述

，
你想一想我們動畫就是會動的畫面（view），總結(jié)下來不就是靠這四個行為：改變透明度（那些view逐漸帶化的），view的旋轉(zhuǎn)，view的移動，view的縮小放大，
有兩種表現(xiàn)方式，一種是java代碼，一種是xml文件，更推薦后一種，可讀性會更強一些，java代碼的 實現(xiàn)方式如下

AlPhaAnimation aa=new AlphaAnimation(0,1);//創(chuàng)建一個透明度動畫實例
aa.setDuration(100);
view.setAnimation(aa);

很簡單吧，其他三種動畫同理，就是構(gòu)造器不同而已，
現(xiàn)在我們來實現(xiàn)下開篇那個動圖效果，首先我們需要一個布局文件先貼代碼，也就是先把材料準備好

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/blue"
    android:orientation="vertical" >
    <LinearLayout
        android:id="@+id/text_lin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:orientation="vertical" >
        
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="醫(yī)立方"
            android:textColor="@color/text_white"
            android:textSize="40sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="好玩的醫(yī)立方"
            android:textColor="@color/text_white"
            android:textSize="14sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/text_hide_lin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="@color/blue"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="醫(yī)立方"
            android:textColor="@color/blue"
            android:textSize="40sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="好玩的醫(yī)立方"
            android:textColor="@color/blue"
            android:textSize="14sp" />
    </LinearLayout>

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/ic_white_cube" />
</RelativeLayout>

這個布局包括一個ImageView和兩個一模一樣的線性布局（除了字體顏色），用來顯示文字，然后把他們?nèi)烤又?div id="u0z1t8os" class="image-package">

這里寫圖片描述

此時或許你會有一個為什么那些字體不顯示，因為他被覆蓋掉了，后面添加布局覆蓋在前一層上面，所以最外層就是一個imageView而已，對于同一個位置的view，后添加的會把前面添加的給覆蓋下去，這對我們后來的字體逐漸出現(xiàn)這是用到這種覆蓋的效果，接下來我們要開始讓這個動畫動起來了，一開始我們先讓圖片先動起來先，首先我把這個動畫分解為4個部分吧，
第一步，自由落體，自然就是用的是位移動畫，并且在這個過程中那個圖片不斷的放大

     <scale
        android:duration="1200"
        android:fromXScale="25%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromYScale="25%"
        android:toXScale="125%"
        android:toYScale="125%"
        android:interpolator="@android:anim/linear_interpolator"/>

    <translate
        android:duration="1200"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="80%p"
        />

如果你之前沒有接觸過動畫，可能會對這幾個屬性很陌生，首先duration指的就是，這個動畫的持續(xù)時間，而fromX（Y）Scale和toX（Y）Scale，指的是圖形x軸y軸放大起始點和終點，在我這里就是將圖片充25%放大到125%，而interpolator這個屬性指的是差值器，也就是用來調(diào)整變化的速度，是加速的，減速呢還是變速，有這幾種值

這里寫圖片描述

接下來就是位移動畫，同樣，你想要告訴系統(tǒng)怎么位移肯定也就得告訴他起始點和終點吧，顧名思義，也就是fromX(Y)Delta和toX(Y)Delta啦，這里重要是是講
80%和80%p是什么區(qū)別，這里p指的是父類，也就是說，對于位移來說，80%指的是位移自己長度的80%，而80%p指的是位移父類的長度80%，多說無益，上圖

這里寫圖片描述

這里寫圖片描述

第二部自然就是彈上來又掉下去啦

     <translate
        android:startOffset="1200"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:duration="200"
        android:toYDelta="-15%p"
        />
    <translate
        android:startOffset="1400"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:duration="200"
        android:toYDelta="15%p"
        />

基本和上面差不多，多了一個新東西，也就是startOffset，指的是動畫開始后多少秒執(zhí)行，這里是1400ms，也就是要在第一步完成之后執(zhí)行啦

接下來就是第三步啦，這個和第一步類似不過是相反，不是往下掉，二是往上彈，而且這個過程中縮小圖片

<set
        android:startOffset="1600"
        android:interpolator="@android:anim/linear_interpolator">
        <scale
            android:duration="1200"
            android:pivotX="50%"
            android:pivotY="50%"
            android:fromXScale="100%"
            android:fromYScale="100%"
            android:toXScale="80%"
            android:toYScale="80%" />

        <translate
            android:duration="1200"
            android:toXDelta="-20%p"
            android:toYDelta="-50%p"/>
    </set>

第四步啦，也就是字體逐漸顯示，這里你想一想我們現(xiàn)實中的用一塊布這是牌匾，然后將布從左往右啦，那么字體是不是就是從左往右逐漸顯示啦？而所謂的不不就是我在布局中重復(fù)定義了，卻把字體設(shè)置成和背景一樣顏色的線性布局嘛，先把我們要顯示字體移動到指定位置，這里是向x軸移動自身長度35%，y軸上移動，父類高度的15%，代碼如下

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <translate

        android:fromXDelta="35%"
        android:fromYDelta="15%p"
        android:toXDelta="35%"
        android:toYDelta="15%p"/>
</set>

接下來就是要移動所謂‘拉布’，在這600ms時間內(nèi)，他就會逐漸把遮住的字逐漸顯示出來啦

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:fillAfter="true"
    >
    <translate
        android:fromXDelta="35%"
        android:fromYDelta="15%p"
        android:toXDelta="135%"
        android:toYDelta="15%p"
        />
</set>

最后一步只需要用java代碼把動畫加載進去就可以了

final LinearLayout tv_lin= (LinearLayout) findViewById(R.id.text_lin);//要顯示的字體
        final LinearLayout tv_hide_lin= (LinearLayout) findViewById(R.id.text_hide_lin);//所謂的布
        ImageView logo= (ImageView) findViewById(R.id.image);//圖片
        Animation animation = AnimationUtils.loadAnimation(this,R.anim.splash);
        logo.startAnimation(animation);//開始執(zhí)行動畫
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //第一個動畫執(zhí)行完后執(zhí)行第二個動畫就是那個字體顯示那部分
                animation=AnimationUtils.loadAnimation(MainActivity.this,R.anim.text_splash_position);
                tv_lin.startAnimation(animation);
                animation=AnimationUtils.loadAnimation(MainActivity.this,R.anim.text_canvas);
                tv_hide_lin.startAnimation(animation);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

我知道看到這里你肯定還有不懂得地方，我就附上源碼源碼地址

ps：如果你覺得我的文章對你有幫助，那么就頂那里點一下或者github上star一下啦，也可以關(guān)注我的公眾號，左上角有二維碼，有什么問題都可以問我，文章會同步發(fā)布哦
ps：如果你覺得我文章哪里寫錯了或者哪里太糟糕了，歡迎指出，