MotionLayout和ConstraintLayout的Demo（AndroidX&Java版本）

時間  2019-12-12
標籤 motionlayout constraintlayout demo androidx&java androidx java 版本 欄目 Java 简体版
原文   原文鏈接

  • 歡迎關注個人公衆號 android

    公衆號

  • App完成的效果圖 git

    QQ視頻20190425102024.gif

QQ視頻20190425102021.gif

QQ視頻20190425102004.gif

QQ視頻20190425101839.gif

MotionLayout是什麼？

image.png

  • MotionLayout 繼承ConstraintLayout 實現 NestedScrollingParent2 ，是谷歌的一個新的Layout！能實現上面有趣的效果app

  • 一、基本示例1/2 左右移動 ，而後慢慢的滾回到遠點佈局

    • 使用引用的ConstraintLayout文件的基本運動示 設置MotionLayout的app:layoutDescription="@xml/scene_01" 左右移動 ，而後慢慢的滾回到遠點
      image.png

  • 二、基本示例2/2 左右移動，另外的一種的實現的方式 ，能夠改變小球的大小性能

    • 使用在MotionScene文件中定義的約束集的基本運動示例 tools:layout_editor_absoluteX="147dp" 表示此控件在佈局中X軸的絕對座標點。 tools:layout_editor_absoluteY="230dp" 表示此控件在佈局中X軸的絕對座標點。
      image.png

  • 三、自定義屬性 * 左右移動，顏色漸變，大小漸變，在中間，我我的感受是兩個顏色的重疊，注意在佈局中的顏色其實設置沒有什麼做用 字體

    image.png

image.png

image.png

  • 四、ImageFilterView1/2
    • 使用IamgeFilterView 兩張圖片的重合，左右滑動，能夠不斷的切換圖片 在兩張圖片之間作的淡入淡出 (cross-fade) 效果
      image.png

image.png

image.png

  • 五、ImageFilterView2/2動畫

    • 顯示圖像飽和度轉換（使用ml的imagefilterview+自定義屬性）
      image.png
      image.png

  • Saturation 飽和度的意思 圖片在上下位移的時候 ，動態改變飽和度 motion:attributeName="Saturation" 從1變爲0google

  • 什麼是圖像的飽和度？飽和度指的是圖像的顏色的濃度，飽和度越高，顏色越飽滿，飽和度越低，顏色就會顯示的陳舊和慘淡，飽和度爲0，圖像就是灰色的圖像

  • 六、關鍵幀位置（1/3）

    • 使用簡單的關鍵幀更改插值運動
      image.png
      image.png

  • 七、關鍵幀插值（2/3）

    • 更復雜的關鍵幀，添加旋轉插值,加上了自身的旋轉

image.png
image.png

image.png

  • 八、關鍵幀週期（3/3）

    • 關鍵幀 使用了拋物線的軌跡
      image.png
      image.png

  • 九、CoordinatorLayout示例（1/3）

    • 使用motionlayout+appbarlayout的基本示例
      image.png
    • CollapsibleToolbar 是把位移的監聽 直接放到本身的類來了，能夠很方便的節約性能，這種方式定義自定義控件有很好的效果
      image.png

  • 十、CoordinatorLayout示例示例（2/3

    • 用多個元素和視差背景替換appbarlayout的稍複雜的motionlayout示例
    • app:fontFamily="cursive" 字體的設置 layout_constraintBaseline_toBaselineOf 我我的理解就是這個文字要和 label 這一行在同一行: layout_constraint（本組件的部位）_to（創建鏈接的組件部位）Of：（創建鏈接的id）
      image.png

  • 十一、CoordinatorLayout示例3/3

    • 另外一個 AppBarLayout 替換示例
      image.png
      image.png

  • 十二、drawerlayout示例（1/2）

    • 抽屜佈局 記得往右拉動，一個很複雜的佈局動畫 牛逼
      image.png
      image.png

  • 1三、drawerlayout示例（2/2）

    • 這個動畫作的不太同樣，從旋轉的方向看不同
      image.png

  • 1四、側面板示例

    • 側面板，與motionlayout一塊兒實現,側板的信息欄，這裏是能夠展現側邊的抽屜框。可是不知道有什麼用處 MockView MockView(新特性的佈局)

image.png
image.png

  • 1五、視差示例
    • 就是使用 新的特性控制下，拖拽的效果，背景有個變大的效果

image.png
image.png

  • 1六、ViewPagerActivit和Viewpager使用的實例
    image.png
    image.png

image.png

  • 1七、ViewPager Lottie Example
    • lottie是一個面向Android和iOS的移動庫，它解析導出爲帶有bodymovin的json格式的Adobe After Effects動畫，並在移動設備上進行本地渲染！
    • 第一次，設計師能夠創造和發送美麗的動畫，而無需一個工程師刻意用手從新創造。他們說一張圖片值1000個字，因此這裏有13000個：

image.png

image.png

  • 1八、複雜運動示例（1/4）

    • 其實就是給一個圖形花了一個對角線的東西
      image.png

  • 1九、複雜運動示例（2/4）

    • 配合着 FloatingActionButton 使用 這個控件的動畫是由誰來控制的呢？是由secen_18 控制的

image.png

  • 20、複雜運動示例（3/4）

    • 高級協調佈局相似行爲（添加FAB），視圖調整了大小
    • 配合着 FloatingActionButton 使用 視圖發生了放大的效果

  • 2一、複雜運動示例（4/4）"

    • 高級同步reval運動+助手（反彈），這個動畫比較炫酷哦

image.png

  • 2二、Fragment轉換示例（1/2）
    • 這種新的特性我必定要利用起來啊

image.png

image.png

  • 2三、Fragment轉換示例（2/2）

    • 使用動畫，開啓一個fragment 而後這個fragment中有一個list條目，點擊這item，開啓itemfragment，而後呢，中間這個listFragment就自動關閉了，慢慢的拖動，也能夠返回到上一個fragment，下一個使用這個效果，頗有意思哦 谷歌的Demo有兩處的錯誤 ，我提了 issues github.com/googlesampl… github.com/googlesampl…

  • 2四、YouTube類運動示例

    • 顯示像YouTube同樣的過渡示例
    • BottomNavigationView 這個導航欄的使用，複雜的動畫效果

image.png

感謝Google官方的Demo給與個人幫助，再次感謝

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程