效果.gif

近年來,越來越多的類似博客主頁頁面 頂部背景圖搭配文字出現(xiàn)各種各樣的效果,例如頂部懸浮,背景色變換 文字移動(dòng),控件移動(dòng)等效果,原先 使用CoordinatorLayout 控件監(jiān)聽 移動(dòng)變化然后再給各個(gè)控件設(shè)置動(dòng)畫以及屬性,來完成實(shí)現(xiàn)效果

效果:

1. 側(cè)滑菜單實(shí)現(xiàn)+子View動(dòng)畫效果實(shí)現(xiàn)
2. 博客頁面聯(lián)動(dòng)動(dòng)畫實(shí)現(xiàn)

實(shí)現(xiàn)方案

DrawerLayout+MotionLayout +MotionScene

思路:

1. DrawerLayout+ MotionLayout 實(shí)現(xiàn)側(cè)滑效果
2. CoordinatorLayout +MotionLayout 實(shí)現(xiàn)博客頁面效果(參考上篇文章)
3. MotionScene動(dòng)畫配置,聯(lián)動(dòng)動(dòng)畫實(shí)現(xiàn)

1. MotionScene文件 scene_drawer_layout_menu.xml (放在xml文件夾下)

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">
    <!-- 控制動(dòng)畫屬性  duration時(shí)間  motionInterpolator 動(dòng)畫插值器  constraintSetStart和constraintSetEnd  開始和技術(shù)的的ConstraintSet -->
    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="250"
        motion:motionInterpolator="linear" />

    <!--    配置開始時(shí)控件的位置  控件通過id 屬性關(guān)聯(lián)布局中的屬性-->
    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:rotation="-90"
            android:scaleX="0.8"
            android:scaleY="0.8"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />

    </ConstraintSet>
    <!--    配置結(jié)束時(shí)控件的位置  控件通過id 屬性關(guān)聯(lián)布局中的屬性-->
    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleX="1.0"
            android:scaleY="1.0"
            android:translationY="200dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />

    </ConstraintSet>
</MotionScene>

2.主頁面xml activity_drawer_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimaryDark"
    android:fitsSystemWindows="false">
    <!--  background 背景顏色 -->
    <!-- 展示內(nèi)容  -->
    <include layout="@layout/layout_drawer_content" />
    <!-- 菜單內(nèi)容  -->
    <include layout="@layout/layout_drawer_menu" />


</androidx.drawerlayout.widget.DrawerLayout>

3. activity代碼

package com.wu.material

import android.annotation.SuppressLint
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.motion.widget.MotionLayout
import com.google.android.material.appbar.AppBarLayout

/**
 * @author wkq
 *
 * @date 2022年01月24日 13:56
 *
 *@des  側(cè)滑效果
 *
 */

class SidePanelActivity : AppCompatActivity() {

    @SuppressLint("RestrictedApi")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_side_panel)
    }


}

總結(jié)

實(shí)現(xiàn)了側(cè)滑菜單的效果,其中包含了側(cè)滑效果,centent頁面縮放效果 menu頁面子控件縮放旋轉(zhuǎn)效果.又復(fù)雜的效果可以根據(jù)業(yè)務(wù)需求動(dòng)態(tài)配置自己想要的動(dòng)畫效果

注意!!!
部分代碼未貼出 詳細(xì)代碼參見源碼,部分功能參考博客頁面效果

參考文獻(xiàn)

1.Google的MotionLayout介紹說明

2.MotionLayout的文檔簡介

3.MotionLayout 源碼地址

4. 源碼地址