你看到的沒(méi)有你想的那么復(fù)雜!案例效果分析

作為大三結(jié)束,暑期沒(méi)事干的準(zhǔn)畢業(yè)僧 前些時(shí)間找實(shí)習(xí),有家公司郵件發(fā)來(lái)一個(gè)demo視頻演示,讓我覺(jué)得可以就過(guò)去。
當(dāng)時(shí)已經(jīng)找到合適的了就沒(méi)有去,但是demo演示看了覺(jué)得還不錯(cuò),詳細(xì)不展示了,商城類(lèi)App。其中有個(gè)轉(zhuǎn)場(chǎng)動(dòng)畫(huà),效果如下:


demo演示

我當(dāng)時(shí)第一眼覺(jué)得 這個(gè)可能有點(diǎn)麻煩, 動(dòng)態(tài)模糊且只保留一個(gè)ImageView - -,后來(lái)再看的時(shí)候發(fā)現(xiàn),居然只是轉(zhuǎn)場(chǎng)動(dòng)畫(huà)加上兩個(gè)View交替顯示。
這個(gè)和 【 湫水長(zhǎng)天 】 的 教你一分鐘實(shí)現(xiàn)模糊效果 思路一樣
很簡(jiǎn)單,拆分來(lái)看:

這個(gè)只是一張模糊圖+ImageView

這個(gè)只是用一張布局和后面差不多的圖片模糊掉 來(lái)做的,然后來(lái)個(gè)屬性動(dòng)畫(huà)將后面清晰的布局顯示出來(lái)。

這個(gè)和上面保持風(fēng)格相同頭像位置一致

比較可知 頭像位置相同,其他的大致一樣就行。所以很容易就實(shí)現(xiàn)了~~~
仿做demo:

模仿demo

是不是差不多~~~
這demo本身沒(méi)什么好說(shuō)的,技術(shù)難點(diǎn)沒(méi)有。
布局就是 Framelayout 放置兩個(gè)布局差不多的LinearLayout,第一個(gè)背景是模糊的圖片,
第二個(gè)是自己的布局,但是頭像位置和第一個(gè)保持一致,并整體設(shè)置透明度為0.0;
啟動(dòng)Activity之后 播放屬性動(dòng)畫(huà) 將第二個(gè)布局顯示出來(lái)即可。
代碼:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/front_back"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/front"
        android:gravity="center_horizontal">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:transitionName="head_image"
            android:layout_marginTop="130dp"
            android:background="@drawable/head" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/back_back"
        android:layout_marginTop="1dp"
        android:alpha="0.0"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/back"
        android:gravity="center_horizontal">

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="130dp"
            android:background="@drawable/head" />
    </RelativeLayout>

</FrameLayout>

轉(zhuǎn)場(chǎng)動(dòng)畫(huà):

  head_image.setTransitionName("head_image");
                TransitionSet transitionSet = new TransitionSet();
                transitionSet.addTransition(new ChangeTransform());
                transitionSet.addTransition(new ChangeBounds());
                transitionSet.addTarget("head_image");
                transitionSet.setDuration(1000);
                Intent intent = new Intent(this, MainActivity.class);
                ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, head_image, "head_image");
                startActivity(intent, options.toBundle());

第二個(gè)Activity進(jìn)入后開(kāi)始設(shè)置透明度:

 Observable.timer(700, TimeUnit.MILLISECONDS)
                .compose(this.<Long>bindToLifecycle())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Action1<Long>() {
                    @Override
                    public void call(Long aLong) {
                        ObjectAnimator
                                .ofFloat(back_back, "alpha", 0.0F, 1.0F)
                                .setDuration(700)
                                .start();
                    }
                });

大功告成~第一次寫(xiě)簡(jiǎn)書(shū),有錯(cuò)誤大家指正,輕噴。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 今天不像秋天,燦爛的陽(yáng)光照得大地暖洋洋的,很舒服。 上班路上,看到許多中學(xué)生三五成群的去學(xué)校,她們臉上的笑容,比陽(yáng)...
    微涼的露珠閱讀 208評(píng)論 0 0

友情鏈接更多精彩內(nèi)容