黄片视频网站免费观看,青青操国产手机在线视频,欧洲激情第一页,男女抽插网网站,亚洲午夜视频在线观看,日本啊v在线,日本伊人,苍井空A连接

?BATcoder技術(shù)群，讓一部分人先進(jìn)大廠

大家好，我是劉望舒，騰訊最具價(jià)值專家，著有三本業(yè)內(nèi)知名暢銷書，三本書被中國國家圖書館、各大985名校圖書館收藏，連續(xù)五年蟬聯(lián)電子工業(yè)出版社年度優(yōu)秀作者。

前華為面試官、獨(dú)角獸公司技術(shù)總監(jiān)。

想要加入?BATcoder技術(shù)群，公號(hào)回復(fù)BAT?即可。

作者:android超級(jí)兵?
https://blog.csdn.net/weixin_44819566

前言

環(huán)境

system : macOS
android studio : 4.1.3
constraintLayout : 2.0.4
gradle : gradle-6.7.1-bin
kotlin : 1.4.23

你需要知道什么

MotionLayout是ConstraintLayout的子類，具有ConstraintLayout所有功能。

implementation?'androidx.constraintlayout:constraintlayout:2.0.4'

使用as預(yù)覽MotionLayout，as版本必須 >= 4.0。

正文

使用 MotionLayout 創(chuàng)建動(dòng)畫

將原ConstraintLayout轉(zhuǎn)換為MotionLayout布局。

轉(zhuǎn)換之后：

可以看出，這里定義了一個(gè)Button，如果說在ConstraintLayout，這樣寫會(huì)有警告，讓約束起來，但是這里并沒有。

沒有的原因是因?yàn)槎x了MotionLayout的layoutDescription屬性，需要在layoutDescription屬性中寫。

點(diǎn)擊動(dòng)畫OnClick

onClick#clickAction說明

motion:clickAction=“toggle”?

效果：

motion:clickAction=“transitionToEnd”

motion:clickAction=“jumpToEnd”

motion:clickAction=“jumpToStart”?

不添加動(dòng)畫到開始。

motion:clickAction=“transitionToStart”

添加動(dòng)畫到開始。

多個(gè)view一起聯(lián)動(dòng)

例如這樣：

效果圖：

手指拖動(dòng)OnSwipe

參數(shù)介紹：

motion:touchAnchorId 指的是您可以滑動(dòng)并拖動(dòng)的視圖。
motion:touchAnchorSide 表示我們從右側(cè)拖動(dòng)視圖。
motion:dragDirection 表示拖動(dòng)的進(jìn)度方向。

例如，motion:dragDirection=“dragRight”表示當(dāng)您向右拖動(dòng)時(shí)，進(jìn)度會(huì)增加。

效果圖：

輔助工具

motionLayout默認(rèn)會(huì)自帶調(diào)試工具。

官方說明圖：

圓圈代表一個(gè)視圖的開始或結(jié)束位置。
線條代表一個(gè)視圖的路徑。
菱形代表KeyPosition修改路徑。

還有一種使用視圖的方式來調(diào)試：

修改路徑(KeyPosition)

修改路徑可以通過右側(cè)可視化工具來進(jìn)行：

詳解圖

再來看看自動(dòng)生成的代碼：

KeyPosition參數(shù)詳解：

motion:motionTarget="@+id/button" 需要移動(dòng)軌跡的view
motion:framePosition="[0-100]" framePosition是一個(gè)介于 0 和 100 之間的數(shù)字。它定義了在動(dòng)畫KeyPosition中的應(yīng)用時(shí)間，1 表示 1% 的動(dòng)畫，99 表示 99% 的動(dòng)畫
motion:keyPositionType=“keyPositionType”這是如何KeyPosition修改路徑。它可以是parentRelative，pathRelative，或deltaRelative
percentX | percentY是修改路徑的量framePosition（值介于 0.0 和 1.0 之間，允許負(fù)值和值 >1）

這里motion:keyPositionType參數(shù)解釋一下：

parentRelative

這里設(shè)置了4個(gè)點(diǎn)，分別為：

假設(shè)現(xiàn)在移動(dòng)起始點(diǎn)1，deltaRelative會(huì)以開始點(diǎn)和起始點(diǎn)2來構(gòu)建一個(gè)“貝塞爾環(huán)境”來生成對(duì)應(yīng)的路徑，這里和pathRelative效果類似但也有不同之處！

pathRelative和deltaRelative的區(qū)別：

pathRelative不需要依靠起始點(diǎn)和結(jié)束點(diǎn)就可以拖動(dòng)
deltaRelative 起始點(diǎn)和結(jié)束點(diǎn)在同一x軸上會(huì)導(dǎo)致動(dòng)畫路徑不按照貝塞爾路徑執(zhí)行
而是執(zhí)行一條直線

最終效果長這樣：

效果都一樣，就只放一個(gè)嘍，需要的請(qǐng)下載源碼觀看。

KeyPosition配合pathMotionArc進(jìn)階

pathMotionArc見名之意就知道是用來畫弧形的。先來看pathMotionArc簡單的例子：

可以看出，想要畫一條優(yōu)雅的弧線很簡單，只需要在開始點(diǎn)設(shè)置motion:pathMotionArc="startHorizontal"即可。

?? motion:pathMotionArc是需要2個(gè)點(diǎn)才生效的，默認(rèn)是開始點(diǎn)和結(jié)束點(diǎn)

如何設(shè)置多個(gè)點(diǎn)呢？例如這樣，也可以設(shè)置兩個(gè)弧形的比例大小等。

位置坐標(biāo)說明：

pathMotionArc類型介紹：

startVertical 向下的弧形
startHorizontal 向上的弧形
none 直線
flip 和上一個(gè)點(diǎn)如果上一個(gè)點(diǎn)是startVertical,，那么當(dāng)前就是startHorizontal，可以理解為反轉(zhuǎn)

類型說明效果圖

開始點(diǎn)：motion:pathMotionArc="startVertical"

起始點(diǎn)1：motion:pathMotionArc="startVertical"

起始點(diǎn)2：motion:pathMotionArc=“flip”

效果代碼：

"1.0"?encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
????xmlns:motion="http://schemas.android.com/apk/res-auto">
????????????motion:constraintSetEnd="@+id/end"
????????motion:constraintSetStart="@id/start"
????????motion:duration="1000">
????????
????????????????????motion:clickAction="toggle"
????????????motion:targetId="@id/button6"?/>
????????
????????????
????????????????????????????motion:framePosition="40"
????????????????motion:keyPositionType="deltaRelative"
????????????????motion:motionTarget="@+id/button6"
????????????????motion:pathMotionArc="startVertical"
????????????????motion:percentX="0.358"
????????????????motion:percentY="0.17"?/>
????????????
????????????????????????????motion:framePosition="79"
????????????????motion:keyPositionType="deltaRelative"
????????????????motion:motionTarget="@+id/button6"
????????????????motion:pathMotionArc="flip"
????????????????motion:percentX="0.675"
????????????????motion:percentY="0.568"?/>
????????
????

????
????"@+id/start">
????????
????????????????????android:id="@+id/button6"
????????????android:layout_width="80dp"
????????????android:layout_height="80dp"
????????????motion:layout_constraintBottom_toBottomOf="parent"
????????????motion:layout_constraintLeft_toLeftOf="parent"
????????????motion:layout_constraintTop_toTopOf="parent"
????????????motion:pathMotionArc="startVertical"?/>
????

????
????
????"@+id/end">
????????????????????android:id="@+id/button6"
????????????android:layout_width="64dp"
????????????android:layout_height="64dp"
????????????motion:layout_constraintBottom_toBottomOf="parent"
????????????motion:layout_constraintRight_toRightOf="parent"?/>
????

這里比例也是能改變的，例如這樣：

這里還是比較簡單的，自己動(dòng)手試試就懂啦！

改變屬性狀態(tài)(KeyAttribute)

看一眼代碼：

"1.0"?encoding="utf-8"?>
"1.0"?encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
????xmlns:motion="http://schemas.android.com/apk/res-auto">

????????????motion:constraintSetEnd="@+id/結(jié)束了"
????????motion:constraintSetStart="@id/開始了"
????????motion:duration="1000">
????????

????????????
????????????????????????????motion:motionTarget="@+id/button7"
????????????????motion:framePosition="22"
????????????????android:alpha="0.2"?/>
????????

????????????????????motion:clickAction="toggle"
????????????motion:targetId="@id/button7"?/>
????

????
????"@+id/開始了">
????????????????????android:id="@+id/button7"
????????????android:layout_width="60dp"
????????????android:layout_height="60dp"
????????????motion:layout_constraintBottom_toBottomOf="parent"
????????????motion:layout_constraintLeft_toLeftOf="parent"
????????????motion:layout_constraintTop_toTopOf="parent"?/>
????

????
????"@+id/結(jié)束了">
????????????????????android:id="@+id/button7"
????????????android:layout_width="60dp"
????????????android:layout_height="60dp"
????????????motion:layout_constraintBottom_toBottomOf="parent"
????????????motion:layout_constraintRight_toRightOf="parent"
????????????motion:layout_constraintTop_toTopOf="parent"?/>
????

mlns:android="http://schemas.android.com/apk/res/android"
????xmlns:motion="http://schemas.android.com/apk/res-auto">
????????????motion:constraintSetEnd="@+id/end"
????????motion:constraintSetStart="@id/start"
????????motion:duration="1000">
????????
????????????????????motion:clickAction="toggle"
????????????motion:targetId="@id/button6"?/>
????????
????????????
????????????????????????????motion:framePosition="40"
????????????????motion:keyPositionType="deltaRelative"
????????????????motion:motionTarget="@+id/button6"
????????????????motion:pathMotionArc="startVertical"
????????????????motion:percentX="0.358"
????????????????motion:percentY="0.17"?/>
????????????
????????????????????????????motion:framePosition="79"
????????????????motion:keyPositionType="deltaRelative"
????????????????motion:motionTarget="@+id/button6"
????????????????motion:pathMotionArc="flip"
????????????????motion:percentX="0.675"
????????????????motion:percentY="0.568"?/>
????????
????

????
????"@+id/start">
????????
????????????????????android:id="@+id/button6"
????????????android:layout_width="80dp"
????????????android:layout_height="80dp"
????????????motion:layout_constraintBottom_toBottomOf="parent"
????????????motion:layout_constraintLeft_toLeftOf="parent"
????????????motion:layout_constraintTop_toTopOf="parent"
????????????motion:pathMotionArc="startVertical"?/>
????

????
????
????"@+id/end">
????????????????????android:id="@+id/button6"
????????????android:layout_width="64dp"
????????????android:layout_height="64dp"
????????????motion:layout_constraintBottom_toBottomOf="parent"
????????????motion:layout_constraintRight_toRightOf="parent"?/>
????

改變alpha值：

當(dāng)然也可以設(shè)置多個(gè)屬性，例如這樣：

自行探索

android:visibility
android:alpha
android:elevation
android:rotation
android:rotationX
android:rotationY
android:scaleX
android:scaleY
android:translationX
android:translationY
android:translationZ

KeyAttribute配合CustomAttribute設(shè)置顏色

CustomAttribute常用來設(shè)置view顏色的，是KeyAttribute的屬性。來看看代碼：

"1.0"?encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
????xmlns:motion="http://schemas.android.com/apk/res-auto">

????????????motion:constraintSetEnd="@+id/end"
????????motion:constraintSetStart="@id/start"
????????motion:duration="1000">
????????
????????????????????motion:clickAction="toggle"
????????????motion:targetId="@id/imageView8"?/>

????????

????????????
????????????????????????????android:rotation="-720"
????????????????motion:framePosition="100"
????????????????motion:motionTarget="@id/imageView8"?/>

????????????
????????????????????????????motion:framePosition="0"
????????????????motion:motionTarget="@id/imageView8">
????????????????????????????????????motion:attributeName="colorFilter"
????????????????????motion:customColorValue="#000000"?/>
????????????

????????????
????????????????????????????motion:framePosition="50"
????????????????motion:motionTarget="@id/imageView8">
????????????????????????????????????motion:attributeName="colorFilter"
????????????????????motion:customColorValue="#E91E63"?/>
????????????

????????????
????????????????????????????motion:framePosition="100"
????????????????motion:motionTarget="@id/imageView8">
????????????????????????????????????motion:attributeName="colorFilter"
????????????????????motion:customColorValue="#000000"?/>
????????????
????????
????

????"@+id/start"?...?/>

????"@+id/end"?...?/>

在里面CustomAttribute你必須指定一個(gè)attributeName和一個(gè)值來設(shè)置。

motion:attributeName是此自定義屬性將調(diào)用的setter的名稱。在這個(gè)例子中， setColorFilteronDrawable將被調(diào)用。

motion:customColorValue是名稱中注明的類型的自定義值，在此示例中，自定義值是指定的顏色。

自定義值可以具有以下任何類型：

Color
Integer
Float
String
Dimension
Boolean

來看效果圖就懂了。

設(shè)置抖動(dòng)[KeyCycle]

如何創(chuàng)建

關(guān)鍵代碼

????????motion:constraintSetEnd="@+id/end"
????????motion:constraintSetStart="@id/start"
????????motion:duration="1000">
????????
????????

????????
????????????
??????????????????????????????android:alpha="0.5"
????????????????android:scaleY="1.2"
????????????????android:scaleX="1.2"
????????????????motion:framePosition="51"
????????????????motion:motionTarget="@+id/imageView8"
????????????????motion:waveOffset="2"
????????????????motion:wavePeriod="1"
????????????????motion:waveShape="sin"?/>
????????
????

參數(shù)介紹：

motion:waveOffset 添加到屬性的偏移值
motion:wavePeriod 要在此區(qū)域附近循環(huán)的循環(huán)數(shù)
motion:waveShape=“cos”
sin|square|triangle|sawtooth|reverseSawtooth|cos|bounce

各大類型效果圖：

（具體效果可以去原文進(jìn)行查看）

設(shè)置抖動(dòng)(KeyTimeCycle)

KeyTimeCycle和KeyCycle使用起來是一樣的，參數(shù)也是一樣的。

有一點(diǎn)不同的是，一般KeyTimeCycle是三個(gè)一起使用，通過3個(gè)KeyTimeCycle定義一個(gè)準(zhǔn)確的循環(huán)關(guān)鍵幀。

可以看出，只有在第50幀的時(shí)候，會(huì)發(fā)生改變，因?yàn)榈?0幀的時(shí)候設(shè)置motion:wavePeriod為1。

motion:wavePeriod:要在此區(qū)域附近循環(huán)的循環(huán)數(shù)

改變控件屬性(KeyTrigger)

什么叫改控件屬性？如何控制？

首先自定義ImageView，里面就2個(gè)方法，show和hide。

class?KeyTriggerImageView?@JvmOverloads?constructor(
????context:?Context,?attrs:?AttributeSet??=?null,?defStyleAttr:?Int?=?0
)?:
????AppCompatImageView(context,?attrs,?defStyleAttr)?{

????//?顯示?view
????fun?show()?{
????????visibility?=?View.VISIBLE
????}
????//?隱藏當(dāng)前?view
????fun?hide()?{
????????visibility?=?View.GONE
????}
}

如何使用：

"1.0"?encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
????xmlns:motion="http://schemas.android.com/apk/res-auto">

????????????motion:constraintSetEnd="@+id/end"
????????motion:constraintSetStart="@id/start"
????????motion:duration="2000">
????????
????????????????????motion:clickAction="toggle"
????????????motion:targetId="@id/imageView11"?/>
????????
????????????????????????????motion:framePosition="0"
????????????????motion:motionTarget="@+id/imageView11"
????????????????motion:onCross="show"?/>
????????????????????????????motion:framePosition="20"
????????????????motion:motionTarget="@+id/imageView11"
????????????????motion:onCross="hide"?/>
????????????????????????????motion:framePosition="60"
????????????????motion:motionTarget="@+id/imageView11"
????????????????motion:onCross="show"?/>
????????????????????????????motion:framePosition="79"
????????????????motion:motionTarget="@+id/imageView11"
????????????????motion:onCross="hide"?/>
????????????????????????????motion:framePosition="100"
????????????????motion:motionTarget="@+id/imageView11"
????????????????motion:onCross="show"?/>
????????
????

????"@+id/start"?.../>
????"@+id/end"?.../>

KeyTrigger參數(shù)介紹：

motion:onCross 調(diào)用的方法名字
motion:framePosition 當(dāng)前是第幾幀 (0-100)
motion:motionTarget 設(shè)置的控件id

來看一眼效果：

根據(jù)這個(gè)思路，是不是就可以在滑動(dòng)的過程中替換圖標(biāo)顯示，例如這樣：

再來一張輔助圖，現(xiàn)在應(yīng)該是非常清晰了！！

加速與減速(Easing)

也是一個(gè)參數(shù)的效果，使用很簡單，直接看代碼：

"1.0"?encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
????xmlns:motion="http://schemas.android.com/apk/res-auto">

????????????motion:constraintSetEnd="@+id/end"
????????motion:constraintSetStart="@id/start"
????????motion:duration="1000">
????????
????????????????????motion:clickAction="toggle"
????????????motion:targetId="@id/imageView13"?/>
????????

????????
????
????
????"@+id/start">
??????????
????????????????????android:id="@+id/imageView13"
????????????android:layout_width="100dp"
????????????android:layout_height="100dp"
????????????motion:layout_constraintBottom_toBottomOf="parent"
????????????motion:layout_constraintLeft_toLeftOf="parent"
????????????motion:transitionEasing="acclerate"?/>
????
????
????"@+id/end">
????????????????????android:id="@+id/imageView13"
????????????android:layout_width="100dp"
????????????android:layout_height="100dp"
????????????motion:layout_constraintRight_toRightOf="parent"
????????????motion:layout_constraintTop_toTopOf="parent"?/>
????

實(shí)戰(zhàn)

先來看看實(shí)戰(zhàn)效果：

布局長這樣：

需求分析：

類似皮皮蝦點(diǎn)擊評(píng)論功能
點(diǎn)擊評(píng)論按鈕時(shí)候，圖片縮小，底下彈出一個(gè)recyclerview來顯示評(píng)論
recyclerview顯示的時(shí)候，評(píng)論按鈕不顯示
recyclerview不顯示的時(shí)候，評(píng)論按鈕顯示

activity_motion_layout_9_scene.xml

"1.0"?encoding="utf-8"?>
"http://schemas.android.com/apk/res/android"
????xmlns:motion="http://schemas.android.com/apk/res-auto">

????????????motion:constraintSetEnd="@+id/end"
????????motion:constraintSetStart="@id/start"
????????motion:duration="400">

????????????????????motion:clickAction="toggle"
????????????motion:targetId="@id/imageComment"?/>

????????????????????motion:dragDirection="dragUp"
????????????motion:touchAnchorId="@id/recyclerView"?/>
????

????
????"@+id/start">
????????????????????android:id="@+id/image"
????????????android:layout_width="match_parent"
????????????android:layout_height="match_parent"
????????????motion:layout_constraintBottom_toBottomOf="parent"
????????????motion:layout_constraintLeft_toLeftOf="parent"
????????????motion:layout_constraintRight_toRightOf="parent"
????????????motion:layout_constraintTop_toTopOf="parent"?/>

????????????????????android:id="@+id/imageComment"
????????????android:layout_width="40dp"
????????????android:layout_height="40dp"
????????????android:layout_marginRight="@dimen/dp_10"
????????????android:alpha="1"
????????????motion:layout_constraintBottom_toBottomOf="parent"
????????????motion:layout_constraintRight_toRightOf="parent"
????????????motion:layout_constraintTop_toTopOf="parent"
????????????motion:layout_constraintVertical_bias="0.7"?/>
????????????????????android:id="@+id/recyclerView"
????????????android:layout_width="match_parent"
????????????android:layout_height="0dp"
????????????motion:layout_constraintTop_toBottomOf="@id/image"?/>
????

????
????"@+id/end">
????????????????????android:id="@+id/image"
????????????android:layout_width="match_parent"
????????????android:layout_height="0dp"
????????????motion:layout_constraintBottom_toTopOf="@id/recyclerView"
????????????motion:layout_constraintLeft_toLeftOf="parent"
????????????motion:layout_constraintRight_toRightOf="parent"
????????????motion:layout_constraintTop_toTopOf="parent"?/>
????????????????????android:id="@+id/recyclerView"
????????????android:layout_width="match_parent"
????????????android:layout_height="500dp"
????????????motion:layout_constraintBottom_toBottomOf="parent"
????????????motion:layout_constraintTop_toBottomOf="@id/image"?/>

????????????????????android:id="@+id/imageComment"
????????????android:layout_width="40dp"
????????????android:layout_height="40dp"
????????????android:layout_marginRight="@dimen/dp_10"
????????????android:alpha="0"
????????????motion:layout_constraintBottom_toBottomOf="parent"
????????????motion:layout_constraintRight_toRightOf="parent"
????????????motion:layout_constraintTop_toTopOf="parent"
????????????motion:layout_constraintVertical_bias="0.7"?/>
????

走到這里基本上就完事了。

/? ?總結(jié)? ?/

大致結(jié)構(gòu)：

????app:constraintSetStart="@+id/start"
????app:constraintSetEnd="@+id/end"
????app:duration="1000">
????
????

????
????
????

????????????
????????????????????
????????????

????????????

????????????

????????????
????

????????
???????"@id/viewId">
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????????????????
????

????
????"@+id/end"../>

完整代碼地址：

https://gitee.com/lanyangyangzzz/android_ui/tree/master

? 耗時(shí)2年，Android進(jìn)階三部曲第三部《Android進(jìn)階指北》出版！
? 『BATcoder』做了多年安卓還沒編譯過源碼？一個(gè)視頻帶你玩轉(zhuǎn)！
? 『BATcoder』我去！安裝Ubuntu還有坑？
? 重生！進(jìn)階三部曲第一部《Android進(jìn)階之光》第2版 出版！

為了防止失聯(lián)，歡迎關(guān)注我的小號(hào)

??微信改了推送機(jī)制，真愛請(qǐng)星標(biāo)本公號(hào)??

最新的動(dòng)畫布局來了，一文帶你了解！

前言

正文

為了防止失聯(lián)，歡迎關(guān)注我的小號(hào)