教你一個(gè)簡(jiǎn)單炫酷的app程序的打開(kāi)動(dòng)畫(huà)（干貨）

文章同步我的csdn博客
app也是有顏值万伤，動(dòng)畫(huà)就是一種化妝術(shù)嗤锉，他讓你的app更加炫酷邮屁，首先給你看下圖

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

首先呢募逞，先普及下總體的框架知識(shí)，有三種動(dòng)畫(huà)
(1)Drawable Animation：逐幀動(dòng)畫(huà)卜范，就像電影一樣嘀粱，一幀一幀奠骄，拼接在一起在人眼中就是連續(xù)的迁匠，可以簡(jiǎn)單的理解為圖片切換剩瓶，缺點(diǎn)就是圖片過(guò)多或過(guò)大會(huì)造成oom
(2)View Animation：視圖動(dòng)畫(huà)，比較適合那種不用和用戶(hù)交互的東湖
(3)Property Animation：是android 3.0以后加入的城丧，為了解決視圖動(dòng)畫(huà)的缺點(diǎn)延曙，就是組件移動(dòng)化為實(shí)際的移動(dòng)，現(xiàn)在大部分也用

首先先來(lái)講講視圖動(dòng)畫(huà)亡哄，也就是這次我們實(shí)現(xiàn)上圖效果的方式枝缔，有四種動(dòng)畫(huà)方式

這里寫(xiě)圖片描述

，
你想一想我們動(dòng)畫(huà)就是會(huì)動(dòng)的畫(huà)面（view）蚊惯，總結(jié)下來(lái)不就是靠這四個(gè)行為：改變透明度（那些view逐漸帶化的）愿卸，view的旋轉(zhuǎn)，view的移動(dòng)拣挪，view的縮小放大擦酌，
有兩種表現(xiàn)方式俱诸，一種是java代碼菠劝，一種是xml文件，更推薦后一種睁搭，可讀性會(huì)更強(qiáng)一些赶诊，java代碼的 實(shí)現(xiàn)方式如下

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

很簡(jiǎn)單吧，其他三種動(dòng)畫(huà)同理园骆，就是構(gòu)造器不同而已舔痪，
現(xiàn)在我們來(lái)實(shí)現(xiàn)下開(kāi)篇那個(gè)動(dòng)圖效果，首先我們需要一個(gè)布局文件先貼代碼锌唾，也就是先把材料準(zhǔ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>

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

這里寫(xiě)圖片描述

此時(shí)或許你會(huì)有一個(gè)為什么那些字體不顯示晌涕，因?yàn)樗桓采w掉了滋捶，后面添加布局覆蓋在前一層上面，所以最外層就是一個(gè)imageView而已余黎，對(duì)于同一個(gè)位置的view重窟，后添加的會(huì)把前面添加的給覆蓋下去，這對(duì)我們后來(lái)的字體逐漸出現(xiàn)這是用到這種覆蓋的效果惧财，接下來(lái)我們要開(kāi)始讓這個(gè)動(dòng)畫(huà)動(dòng)起來(lái)了巡扇，一開(kāi)始我們先讓圖片先動(dòng)起來(lái)先扭仁，首先我把這個(gè)動(dòng)畫(huà)分解為4個(gè)部分吧，
第一步厅翔，自由落體乖坠，自然就是用的是位移動(dòng)畫(huà)，并且在這個(gè)過(guò)程中那個(gè)圖片不斷的放大

     <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"
        />

如果你之前沒(méi)有接觸過(guò)動(dòng)畫(huà)知给，可能會(huì)對(duì)這幾個(gè)屬性很陌生瓤帚，首先duration指的就是，這個(gè)動(dòng)畫(huà)的持續(xù)時(shí)間涩赢，而fromX（Y）Scale和toX（Y）Scale戈次，指的是圖形x軸y軸放大起始點(diǎn)和終點(diǎn)，在我這里就是將圖片充25%放大到125%筒扒，而interpolator這個(gè)屬性指的是差值器怯邪，也就是用來(lái)調(diào)整變化的速度，是加速的花墩，減速呢還是變速悬秉，有這幾種值

這里寫(xiě)圖片描述

接下來(lái)就是位移動(dòng)畫(huà)，同樣冰蘑，你想要告訴系統(tǒng)怎么位移肯定也就得告訴他起始點(diǎn)和終點(diǎn)吧和泌，顧名思義，也就是fromX(Y)Delta和toX(Y)Delta啦祠肥，這里重要是是講
80%和80%p是什么區(qū)別武氓，這里p指的是父類(lèi)，也就是說(shuō)仇箱，對(duì)于位移來(lái)說(shuō)县恕，80%指的是位移自己長(zhǎng)度的80%，而80%p指的是位移父類(lèi)的長(zhǎng)度80%剂桥，多說(shuō)無(wú)益忠烛，上圖

這里寫(xiě)圖片描述

這里寫(xiě)圖片描述

第二部自然就是彈上來(lái)又掉下去啦

     <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"
        />

基本和上面差不多权逗，多了一個(gè)新東西美尸，也就是startOffset，指的是動(dòng)畫(huà)開(kāi)始后多少秒執(zhí)行斟薇，這里是1400ms师坎，也就是要在第一步完成之后執(zhí)行啦

接下來(lái)就是第三步啦，這個(gè)和第一步類(lèi)似不過(guò)是相反奔垦，不是往下掉屹耐，二是往上彈，而且這個(gè)過(guò)程中縮小圖片

<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)實(shí)中的用一塊布這是牌匾寿弱，然后將布從左往右啦，那么字體是不是就是從左往右逐漸顯示啦按灶？而所謂的不不就是我在布局中重復(fù)定義了症革，卻把字體設(shè)置成和背景一樣顏色的線性布局嘛，先把我們要顯示字體移動(dòng)到指定位置鸯旁，這里是向x軸移動(dòng)自身長(zhǎng)度35%噪矛，y軸上移動(dòng)，父類(lèi)高度的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>

接下來(lái)就是要移動(dòng)所謂‘拉布’艇挨，在這600ms時(shí)間內(nèi)，他就會(huì)逐漸把遮住的字逐漸顯示出來(lá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代碼把動(dòng)畫(huà)加載進(jìn)去就可以了

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);//開(kāi)始執(zhí)行動(dòng)畫(huà)
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //第一個(gè)動(dòng)畫(huà)執(zhí)行完后執(zhí)行第二個(gè)動(dòng)畫(huà)就是那個(gè)字體顯示那部分
                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：如果你覺(jué)得我的文章對(duì)你有幫助缩滨，那么就頂那里點(diǎn)一下或者github上star一下啦，也可以關(guān)注我的公眾號(hào)泉瞻，左上角有二維碼脉漏，有什么問(wèn)題都可以問(wèn)我，文章會(huì)同步發(fā)布哦
ps：如果你覺(jué)得我文章哪里寫(xiě)錯(cuò)了或者哪里太糟糕了袖牙，歡迎指出侧巨，