主頁 > 移動端開發 > 后羿:我射箭了快上—用MotionLayout實作王者榮耀團戰

后羿:我射箭了快上—用MotionLayout實作王者榮耀團戰

2020-10-19 10:41:23 移動端開發

前言

昨晚跟往常一樣,飯后開了一局王者榮耀,前中期基本焦灼,到了后期一波決定勝負的時候,我果斷射箭,射中對面,配合隊友直接秒殺,打贏團戰一波推完基地,那叫一個精彩,隊友都發出了666666的稱贊,我酷酷的點了一下抱拳:多謝!嘿嘿

賽后,手機上正在展示我的MVP影片,我不禁思考,這么精彩的團戰我怎么能不記錄下來?剛好最近了解到MotionLayout庫,就用它實作吧??,

影片效果

motionlayout-demo.gif

功能詳解

MotionLayout 是一種布局型別,可幫助您管理應用中的運動和微件影片,MotionLayout 是 ConstraintLayout 的子類,在其豐富的布局功能基礎之上構建而成,

如上述介紹,MotionLayoutConstraintLayout的子類,相當于加了影片功能的ConstraintLayout,MotionLayout作為一個影片控制元件的好處就在于基本不用寫java代碼,全部在xml檔案中搞定,而且我們只需要設定起始位置,結束位置以及一些中間狀態,就能自動生成影片,

先分析下我們的團戰,主要分為三個場景

  • 后羿果斷射大,射中在瘋狂走位的亞瑟,
  • 妲己和鐘無艷同時在草叢蹲伏,看到后羿的精彩射箭,從草叢走出,準備大戰,
  • 妲己2技能暈眩住對面的魯班七號,一套技能加上鐘無艷的大招,將對面兩個英雄KO,

場景一

包含控制元件:后羿,亞瑟,魯班,后羿的箭
影片描述:走位的亞瑟,后羿射箭

首先在布局檔案中,添加第一個MotionLayout,并添加上所有的控制元件,后羿和魯班由于是靜止狀態,所以要寫上位置約束,其他包含影片的控制元件可以暫時不用寫位置約束:

    <androidx.constraintlayout.motion.widget.MotionLayout
        android:id="@+id/motionLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/scene_01"
        app:showPaths="false"
        tools:showPaths="true">

        <ImageView
            android:id="@+id/houyi"
            android:layout_width="66dp"
            android:layout_height="66dp"
            android:layout_marginLeft="180dp"
            android:src="https://www.cnblogs.com/jimuzz/archive/2020/10/19/@drawable/houyi_model"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.8" />

        <ImageView
            android:id="@+id/houyi_arrow"
            android:layout_width="66dp"
            android:layout_height="66dp"
            android:src="https://www.cnblogs.com/jimuzz/archive/2020/10/19/@drawable/arrow" />

        <ImageView
            android:id="@+id/yase"
            android:layout_width="66dp"
            android:layout_height="66dp"
            android:src="https://www.cnblogs.com/jimuzz/archive/2020/10/19/@drawable/yase_model" />

        <ImageView
            android:id="@+id/luban"
            android:layout_width="66dp"
            android:layout_height="66dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.58"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.26"
            android:src="https://www.cnblogs.com/jimuzz/archive/2020/10/19/@drawable/luban_model" />

    </androidx.constraintlayout.motion.widget.MotionLayout>

由于MotionLayout繼承自ConstraintLayout,所以可以用ConstraintLayout的屬性,
這里可以看到有兩個新的屬性:

  • app:layoutDescription,這個屬性就是代表該MotionLayout對應的影片場景,參考的是一個MotionScene(XML資源檔案),其中就會包括相應布局的所有運動影片描述,
  • app:showPaths,這個屬性代表運動進行時是否顯示運動路徑,也就是所有影片的路徑是否顯示,默認是false,代碼中也是可以設定是否顯示影片路徑,setDebugMode方法傳入MotionLayout.DEBUG_SHOW_PATH屬性即可,
后羿射箭

接下來就可以寫影片場景(MotionScene)了,新建res-xml-scene_01.xml,

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Transition
        app:constraintSetEnd="@+id/end"
        app:constraintSetStart="@+id/start"
        app:duration="2000">

    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/houyi_arrow"
            android:layout_width="66dp"
            android:layout_height="66dp"
            android:layout_marginLeft="190dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.8">

        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/houyi_arrow"
            android:layout_width="66dp"
            android:layout_height="66dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.65"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.35">
        </Constraint>
    </ConstraintSet>

</MotionScene>

可以看到,MotionScene有兩個主要的標簽TransitionConstraintSet

  • Transition,包括運動的基本定義,其中motion:constraintSetStartmotion:constraintSetEnd 指的是運動的起始狀態和結束狀態,分別就對應下面ConstraintSet所配置的,app:duration代表完成運動所需的時間,
  • ConstraintSet,多個控制元件的端點約束集合,比如這里就有兩個ConstraintSet,分別代表起始約束集和結束約束集,

其中Constraint屬性指定了端點位置中某一個元素的位置和屬性:

  • 支持所有ConstraintLayout 屬性,
  • 支持alpha,rotation,visibility,translationX,scaleX等view基本屬性,
  • 支持自定義屬性,用子標簽CustomAttribute表示,舉個小栗子:
    <Constraint
        android:id="@+id/button" ...>
        <CustomAttribute
            motion:attributeName="backgroundColor"
            motion:customColorValue="https://www.cnblogs.com/jimuzz/archive/2020/10/19/#D81B60"/>
    </Constraint>
   

attributeName屬性就是與具有gettersetter方法的物件匹配,比如這里的backgroundColor就對應了view本身的基本方法getBackgroundColor()setBackgroundColor()

好了,回到后裔這邊,由于后羿的箭是從后羿位置到亞瑟位置,所以我們設定好后羿箭的兩個端點狀態,配置好后,MotionLayout就會自動幫我們生成從起始狀態到結束狀態的影片了,后羿箭從后羿位置飛到了亞瑟位置,
等等,運行怎么沒反應呢?影片怎么觸發啊?

Motion提供了三影片觸發方法:
1)onClick標簽,表示點擊場景中的某個控制元件來觸發影片效果,其中有兩個屬性,

  • app:targetId,表示要觸發影片的視圖
  • app:clickAction,表示點擊的效果,例如,toggle(回圈影片),transitionToStart(過渡到開始狀態)

2)OnSwipe標簽,表示通過用戶輕觸控制影片,有點手勢滑動的感覺

  • app:touchAnchorId,表示可以滑動并拖動的視圖,
  • app:touchAnchorSide 表示從哪邊開始拖動,
  • app:dragDirection 表示拖動的進度方向,例如,dragRight表示當向右拖動(滑動),
  • app:onTouchUp 表示手勢抬起的時候動作,例如,stop表示手勢抬起的時候view影片停止,

3)java代碼控制.

  • motionLayout.transitionToEnd(),過渡影片到結束位置,
  • motionLayout.setTransitionListener,監聽影片,

這里我們就設定點擊后羿觸發影片:

        <OnClick
            app:clickAction="toggle"
            app:targetId="@id/houyi" />

好了,運行,點擊后羿,后羿的箭成功射出去了,

但是這還不夠,后羿箭到亞瑟位置肯定就會消失了,怎么表示這個消失呢?用透明度,直接設定結束位置的透明度為0就會消失了,

      android:alpha="0"

看看效果:

houyi_arrow_alhpa.gif

好像還是有點不對,箭在空中的時候就消失了,我們要的效果是射到亞瑟才消失
這是因為生成影片的時候是按照起始點到結束點過渡的流程平均分配到每個時間點,所以他就會從一開始就慢慢線性變化透明度,直到完全消失,

怎么辦呢?就要用到關鍵幀KeyFrameSet了,

KeyFrameSet關鍵幀,可以設定影片程序中的某個關鍵位置或屬性,設定關鍵幀后,MotionLayout會平滑地將視圖從起點移至每個中間點,然后移至最終目標位置,
所以這里,我們需要設定兩個關鍵屬性
1)快射到亞瑟的時候,箭的透明度還是1,
2)射到亞瑟的時候,透明度改成0,

        <KeyFrameSet>
            <KeyAttribute
                app:framePosition="98"
                app:motionTarget="@id/houyi_arrow"
                android:alpha="1" />
            <KeyAttribute
                app:framePosition="100"
                app:motionTarget="@id/houyi_arrow"
                android:alpha="0" />
        </KeyFrameSet>

KeyAttribute就是設定關鍵屬性的標簽,其中

  • app:framePosition 表示該關鍵幀的位置,相當于百分比,
  • app:motionTarget 表示作用于那個視圖

這樣設定好,后羿箭的影片也就完成了,

瘋狂走位的亞瑟

到亞瑟了,亞瑟的影片效果是走位走位被射中,所以先設定好亞瑟的位置,從遠處走到被射中的位置,

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/houyi_arrow"
            android:layout_width="66dp"
            android:layout_height="66dp"
            android:layout_marginLeft="190dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.8">

        </Constraint>

        <Constraint
            android:id="@+id/yase"
            android:layout_width="66dp"
            android:layout_height="66dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.8"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.2">

        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/houyi_arrow"
            android:layout_width="66dp"
            android:layout_height="66dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.65"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.35">

        </Constraint>

        <Constraint
            android:id="@+id/yase"
            android:layout_width="66dp"
            android:layout_height="66dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.65"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.35">

        </Constraint>
    </ConstraintSet>

可以看到,一個端點狀態,可以放置多個控制元件屬性,

放好亞瑟的起始和結束狀態后,再設定瘋狂走位,怎么弄?——KeyCycle

KeyCycle,回圈關鍵幀,可以給影片添加振動,其實就是波形圖,比如sin,cos
這里我們就設定一個sin曲線給亞瑟,作為走位的路徑,也是放到關鍵幀KeyFrameSet標簽下,

    <KeyCycle
        android:translationY="50dp"
        app:framePosition="70"
        app:motionTarget="@id/yase"
        app:wavePeriod="0.5"
        app:waveShape="sin" />
  • app:waveShape 表示波動型別,比如sin,cos
  • app:wavePeriod表示波動周期,比如0.5就表示半個sin周期,可以理解為震動0.5次,

好了,第一個場景搞定,看看效果:
arrow-yase.gif

場景二

包含控制元件:妲己,鐘無艷
影片描述:從草叢走出來的妲己和鐘無艷

這一個場景主要是描述在草叢蹲伏的妲己和鐘無艷,看到后羿射箭后,走出草叢準備接技能
直接上代碼:

    <androidx.constraintlayout.motion.widget.MotionLayout
        android:id="@+id/motionLayout2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/scene_02"
        tools:showPaths="true">


        <ImageView
            android:id="@+id/daji"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="https://www.cnblogs.com/jimuzz/archive/2020/10/19/@drawable/daji_model" />

        <ImageView
            android:id="@+id/zhongwuyan"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:src="https://www.cnblogs.com/jimuzz/archive/2020/10/19/@drawable/zhongwuyan_model" />

    </androidx.constraintlayout.motion.widget.MotionLayout>


//scene_02.xml
    <?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Transition
        app:constraintSetEnd="@+id/end"
        app:constraintSetStart="@+id/start"
        app:duration="2000">

        <OnClick
            app:clickAction="toggle"
            app:targetId="@id/daji" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/daji"
            android:layout_width="80dp"
            android:layout_height="80dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.75"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.85">

        </Constraint>

        <Constraint
            android:id="@+id/zhongwuyan"
            android:layout_width="70dp"
            android:layout_height="70dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.25"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.1">

        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/daji"
            android:layout_width="80dp"
            android:layout_height="80dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.65"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.65">

        </Constraint>

        <Constraint
            android:id="@+id/zhongwuyan"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:alpha="0"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0.42"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.2">

        </Constraint>
    </ConstraintSet>

</MotionScene>
        

這里,我想給鐘無艷一個異形走位,就是先在草叢里走,再出來,這時候就要用到另一個關鍵幀標簽——KeyPosition

KeyPosition,表示關鍵幀的位置,也就是影片必經的一個點,該屬性用于調整默認的運動路徑,

1) motion:percentX、motion:percentY指定視圖應到達的位置,keyPositionType 屬性指定如何解釋這些值,

2) keyPositionType有三種設定

  • parentRelative,相對于父視圖的位置,x為橫軸(0左-1右),y為縱軸(0頂-1底)比如要設定位置到右端中部位置,就設定app:percentY="0.5" app:percentX="1"即可,
  • deltaRelative,相對于視圖在整個運動序列程序中移動的距離,(0,0)為視圖起始位置,(1,1)為結束位置,x為橫軸,y為縱軸
  • pathRelative,x軸方向為視圖在路徑范圍內移動的方向,0位視圖起始位置,1為結束位置(即x軸為起點和終點的連接線),y軸垂直于x軸,正值為路徑左側,負值為右側,所以,這個和deltaRelative相比,就是x軸和Y軸的不同,相同的是都是按照起始位置到結束位置為參考,

這里我們給鐘無艷一個parentRelative,

    <KeyPosition
        app:motionTarget="@id/zhongwuyan"
        app:framePosition="30"
        app:keyPositionType="parentRelative"
        app:percentY="0"
        app:percentX="0.4"
        />

最后加上兩個英雄從草叢走出來,由半透明到不透明的程序:

            <KeyAttribute
                app:framePosition="0"
                app:motionTarget="@id/daji"
                android:alpha="0.7" />
            <KeyAttribute
                app:framePosition="70"
                app:motionTarget="@id/daji"
                android:alpha="1" />

            <KeyAttribute
                app:framePosition="0"
                app:motionTarget="@id/zhongwuyan"
                android:alpha="0.7" />
            <KeyAttribute
                app:framePosition="60"
                app:motionTarget="@id/zhongwuyan"
                android:alpha="1" />

場景三

包含控制元件:妲己的一技能,妲己的二技能,鐘無艷
影片描述:鐘無艷閃現到人群中使用大招轉轉轉,妲己二技能暈眩住魯班,一技能跟上,

鐘無艷閃現,我用的是消失再出現的方式,也就是改變alpha
鐘無艷的大招,用到的是android:rotationY,設定繞y軸旋轉,

妲己的一技能和二技能都是用的普通位置移動,注意控制透明度也就是出現和消失即可,
上代碼:

//scene_03.xml
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Transition
        app:constraintSetEnd="@+id/end"
        app:constraintSetStart="@+id/start"
        app:duration="4000">

        <KeyFrameSet>

            <!-- 鐘無艷-->
            <KeyAttribute
                app:framePosition="20"
                app:motionTarget="@id/zhongwuyan2"
                android:rotationY="0" />

            <KeyAttribute
                app:framePosition="1"
                app:motionTarget="@id/zhongwuyan"
                android:alpha="1" />

            <!-- 妲己2技能-->

            <KeyPosition
                app:motionTarget="@id/daji_2"
                app:framePosition="20"
                app:keyPositionType="deltaRelative"
                app:percentY="0"
                app:percentX="0"
                />

            <KeyAttribute
                app:framePosition="20"
                app:motionTarget="@id/daji_2"
                android:alpha="1" />

            <KeyPosition
                app:motionTarget="@id/daji_2"
                app:framePosition="60"
                app:keyPositionType="deltaRelative"
                app:percentY="1"
                app:percentX="1"
                />

            <KeyAttribute
                app:framePosition="40"
                app:motionTarget="@id/daji_2"
                android:alpha="1" />

            <KeyAttribute
                app:framePosition="61"
                app:motionTarget="@id/daji_2"
                android:alpha="0" />


            <!-- 妲己1技能-->

            <KeyAttribute
                app:framePosition="55"
                app:motionTarget="@id/daji_1"
                android:alpha="1" />

            <KeyPosition
                app:motionTarget="@id/daji_1"
                app:framePosition="55"
                app:keyPositionType="deltaRelative"
                app:percentY="0"
                app:percentX="0"
                />

            <KeyAttribute
                app:framePosition="85"
                app:motionTarget="@id/daji_1"
                android:alpha="1" />

        </KeyFrameSet>

        <OnClick
            app:clickAction="toggle"
            app:targetId="@id/zhongwuyan2" />
    </Transition>

    	//,,,
</MotionScene>
        

想看完整源代碼的可以文末附件??自取,

實際應用場景

其實做下來可以發現,Motionlayout實作影片真的很簡便,大大提高了開發效率,這也是jetpack組件開發的初心,
但是,Motionlayout還是有缺點的,比如直接通過xml代碼的情況下,無法設定影片的銜接,設定影片的先后順序,
所以到底motionlayout應用場景是什么呢?

motionlayout作為一個過渡影片,應該適用于一些控制元件切換,界面變化之類的影片,比如DrawerLayout,viewpager切換的時候,可以設定一些view過渡的影片,
官網有一個類似youtube中運動影片的案例,我這邊搬過來簡單說下,先看看效果

youtube-motion2.gif

效果不錯吧,特別是手勢滑動的那個絲滑感,太爽了,以前做這種影片效果少說也要半個小時吧,想想就頭疼,現在,MotionLayout:so easy

來一起分析下:

包含控制元件:頂部布局控制元件topLayout(包含頂部圖片topImage,播放按鈕topPlay,關閉按鈕topClose),中部布局midlayout(包含文字部分midView),下部選單控制元件bottomView

影片描述(某些具體數值由代碼中得知):

  • topLayout從上方依附parent位置,變化到下方bottomView的上方,高度由320dp變成54dp,
  • topImage從滿鋪父布局,到最后長度不滿鋪(長度設定為高度2.5倍),高度距離父布局上下2dp,關鍵幀:到90%進度的時候,還是滿鋪,再慢慢縮小長度,
  • topPlay,topClose從不顯示(alhpa為0)到最后顯示完全(alhpa為1),關鍵幀:到90%進度的時候,不透明還是為10%(alpha0.1),再慢慢變不透明,
  • midlayout,白色布局,從底部依附父布局到bottomView的上方,這個layout是為了讓toplayout下來的時候更加自然,因為recycleview會變完全透明,就需要這個白色布局過渡,讓影片更完整,
  • midView,從toplayout下方位置到最后和toplayout重合,透明度從不透明到完全透明,關鍵幀:到75%進度的時候,就完全透明,
  • bottomView,從父布局視圖下面(看不到)到父布局底部(看得見)

就這么多,分析好每個布局的起始位置,結束位置,再調整一下關鍵幀,一個跟隨手勢滑動的過渡影片布局就完成了,
貼下MotionScene關鍵代碼,想看完整源代碼可以去文末附件自取,官網案例和我的demo都包含,


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

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="1000"
        motion:motionInterpolator="linear">

        <OnSwipe
            motion:dragDirection="dragUp"
            motion:touchAnchorId="@+id/top_image_container"
            motion:touchAnchorSide="bottom" />

        <KeyFrameSet>
            <KeyPosition
                motion:curveFit="linear"
                motion:framePosition="90"
                motion:motionTarget="@id/top_image"
                motion:percentWidth="0"
                motion:percentX="0" />
            <KeyPosition
                motion:curveFit="linear"
                motion:framePosition="90"
                motion:motionTarget="@id/top_image_container"
                motion:percentWidth="0" />

            <KeyPosition
                motion:curveFit="linear"
                motion:framePosition="90"
                motion:motionTarget="@id/recyclerview_container"
                motion:percentWidth="0" />

            <KeyAttribute
                android:alpha="0"
                motion:framePosition="75"
                motion:motionTarget="@id/recyclerview_front" />

            <KeyAttribute
                android:alpha="0.10"
                motion:framePosition="90"
                motion:motionTarget="@id/image_clear" />

            <KeyAttribute
                android:alpha="0.10"
                motion:framePosition="90"
                motion:motionTarget="@id/image_play" />
        </KeyFrameSet>
    </Transition>

</MotionScene>

這里有幾個新屬性說下:

  • motion:curveFit,表示用哪種線條軌跡經過該關鍵幀,默認是曲線(spline),更加圓滑,這是設定的linear為直線過渡,因為本身就是直線,所以沒什么影響,
  • motion:percentWidth,表示視圖相對大小,取值為0-1,0代表初始位置寬度,1代表結束位置寬度,這里為0就代表寬度到該位置還是和初始寬度一致,
  • motion:motionInterpolator,表示影片的插值器,這里的linear就是線性運動,還可以設定bounce彈簧運動等等,

關于過渡影片

關于過渡影片,其實之前也是存在的——TransitionManager
TransitionManager可以提供不同場景之間的過渡轉換影片,需要設定兩個場景(布局檔案),然后兩個場景中對應的控制元件id要對應上,最后通過java代碼執行過渡影片,

上個代碼:

//兩個場景的布局
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/scene_root">

        <include layout="@layout/a_scene" />
    </FrameLayout>
    
//場景一
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="26sp"
        android:id="@+id/text_view1"
        android:text="Text Line 1" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="26sp"
        android:id="@+id/text_view2"
        android:text="Text Line 2" />
</LinearLayout>

//場景二
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scene_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text_view2"
        android:textSize="22sp"
        android:text="Text Line 2" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:id="@+id/text_view1"
        android:text="Text Line 1" />
</LinearLayout>

//獲取場景,開始場景間的影片,從場景一變化為場景二

        val sceneRoot: ViewGroup = findViewById(R.id.scene_root)
        val aScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.a_scene, this)
        val anotherScene: Scene = Scene.getSceneForLayout(sceneRoot, R.layout.another_scene, this)

        titletv.setOnClickListener {
            TransitionManager.go(anotherScene)
        }

咦,跟MotionLayout還是蠻像的,思路也差不多,都是通過不同場景的控制元件完成過渡影片,那么問題來了,既然有為什么還要出個MotionLayout呢?

  • 前者(TransitionManager)無法設定關鍵幀,影片只有兩個狀態,MotionLayout就可以隨意設定關鍵幀,設定不同的位置,屬性等等,
  • 前者不能跟隨手勢滑動,MotionLayout就絲滑的多,
  • MotionLayout全部用xml代碼就可以完成整個影片,不需要呼叫一句java代碼,
  • 前者布局控制元件重復太多,需要不同的xml檔案,寫重復的控制元件

所以MotionLayout還是很優秀的,快用起來吧!

附件

官網MotionLayout案例
文章相關源代碼


我的公眾號:碼上積木,每天三問面試題,詳細剖析,助你成為offer收割機,

謝謝你的閱讀,如果你覺得寫的還行,就點個贊支持下吧!感謝!
你的一個??,就是我分享的動力??,

轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/179788.html

標籤:其他

上一篇:數學模型作業(3)

下一篇:利用計算機尋找樹(python實作)

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 【從零開始擼一個App】Dagger2

    Dagger2是一個IOC框架,一般用于Android平臺,第一次接觸的朋友,一定會被搞得暈頭轉向。它延續了Java平臺Spring框架代碼碎片化,注解滿天飛的傳統。嘗試將各處代碼片段串聯起來,理清思緒,真不是件容易的事。更不用說還有各版本細微的差別。 與Spring不同的是,Spring是通過反射 ......

    uj5u.com 2020-09-10 06:57:59 more
  • Flutter Weekly Issue 66

    新聞 Flutter 季度調研結果分享 教程 Flutter+FaaS一體化任務編排的思考與設計 詳解Dart中如何通過注解生成代碼 GitHub 用對了嗎?Flutter 團隊分享如何管理大型開源專案 插件 flutter-bubble-tab-indicator A Flutter librar ......

    uj5u.com 2020-09-10 06:58:52 more
  • Proguard 常用規則

    介紹 Proguard 入口,如何查看輸出,如何使用 keep 設定入口以及使用實體,如何配置壓縮,混淆,校驗等規則。

    ......

    uj5u.com 2020-09-10 06:59:00 more
  • Android 開發技術周報 Issue#292

    新聞 Android即將獲得類AirDrop功能:可向附近設備快速分享檔案 谷歌為安卓檔案管理應用引入可安全隱藏資料的Safe Folder功能 Android TV新主界面將顯示電影、電視節目和應用推薦內容 泄露的Android檔案暗示了傳說中的谷歌Pixel 5a與折疊屏新機 谷歌發布Andro ......

    uj5u.com 2020-09-10 07:00:37 more
  • AutoFitTextureView Error inflating class

    報錯: Binary XML file line #0: Binary XML file line #0: Error inflating class xxx.AutoFitTextureView 解決: <com.example.testy2.AutoFitTextureView android: ......

    uj5u.com 2020-09-10 07:00:41 more
  • 根據Uri,Cursor沒有獲取到對應的屬性

    Android: 背景:呼叫攝像頭,拍攝視頻,指定保存的地址,但是回傳的Cursor檔案,只有名稱和大小的屬性,沒有其他諸如時長,連ID屬性都沒有 使用 cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DURATIO ......

    uj5u.com 2020-09-10 07:00:44 more
  • Android連載29-持久化技術

    一、持久化技術 我們平時所使用的APP產生的資料,在記憶體中都是瞬時的,會隨著斷電、關機等丟失資料,因此android系統采用了持久化技術,用于存盤這些“瞬時”資料 持久化技術包括:檔案存盤、SharedPreference存盤以及資料庫存盤,還有更復雜的SD卡記憶體儲。 二、檔案存盤 最基本存盤方式, ......

    uj5u.com 2020-09-10 07:00:47 more
  • Android Camera2Video整合到自己專案里

    背景: Android專案里呼叫攝像頭拍攝視頻,原本使用的 MediaStore.ACTION_VIDEO_CAPTURE, 后來因專案需要,改成了camera2 1.Camera2Video 官方demo有點問題,下載后,不能直接整合到專案 問題1.多次拍攝視頻崩潰 問題2.雙擊record按鈕, ......

    uj5u.com 2020-09-10 07:00:50 more
  • Android 開發技術周報 Issue#293

    新聞 谷歌為Android TV開發者提供多種新功能 Android 11將自動填表功能整合到鍵盤輸入建議中 谷歌宣布Android Auto即將支持更多的導航和數字停車應用 谷歌Pixel 5只有XL版本 搭載驍龍765G且將比Pixel 4更便宜 [圖]Wear OS將迎來重磅更新:應用啟動時間 ......

    uj5u.com 2020-09-10 07:01:38 more
  • 海豚星空掃碼投屏 Android 接收端 SDK 集成 六步驟

    掃碼投屏,開放網路,獨占設備,不需要額外下載軟體,微信掃碼,發現設備。支持標準DLNA協議,支持倍速播放。視頻,音頻,圖片投屏。好點意思。還支持自定義基于 DLNA 擴展的操作動作。好像要收費,沒體驗。 這里簡單記錄一下集成程序。 一 跟目錄的build.gradle添加私有mevan倉庫 mave ......

    uj5u.com 2020-09-10 07:01:43 more
最新发布
  • 歡迎頁輪播影片

    如圖,引導開始,球從上落下,同時淡入文字,然后文字開始輪播,最后一頁時停止,點擊進入首頁。 在來看看效果圖。 重力球先不講,主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView,用于影片展示 文本是類似的,最后會有個圖片箭頭影片,布局很簡單,就是一個 TextVi ......

    uj5u.com 2023-04-20 08:40:31 more
  • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

    一. 問題描述 使用華為推送服務下發IM訊息時,下發訊息請求成功且code碼為80000000,但是手機總是收不到訊息; 在華為推送自助分析(Beta)平臺查看發現,訊息發送觸發了頻控。 二. 問題原因及背景 2023年1月05日起,華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理,具體 ......

    uj5u.com 2023-04-20 08:40:11 more
  • 歡迎頁輪播影片

    如圖,引導開始,球從上落下,同時淡入文字,然后文字開始輪播,最后一頁時停止,點擊進入首頁。 在來看看效果圖。 重力球先不講,主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView,用于影片展示 文本是類似的,最后會有個圖片箭頭影片,布局很簡單,就是一個 TextVi ......

    uj5u.com 2023-04-20 08:39:36 more
  • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

    一. 問題描述 使用華為推送服務下發IM訊息時,下發訊息請求成功且code碼為80000000,但是手機總是收不到訊息; 在華為推送自助分析(Beta)平臺查看發現,訊息發送觸發了頻控。 二. 問題原因及背景 2023年1月05日起,華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理,具體 ......

    uj5u.com 2023-04-20 08:39:13 more
  • iOS從UI記憶體地址到讀取成員變數(oc/swift)

    開發除錯時,我們發現bug時常首先是從UI顯示發現例外,下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具,但是很多人可能還沒有形成一套穩定的除錯流程,因此本文嘗試解決這個問題,順便提出一個暴論:UI顯示例外問題只需要兩個步驟就能完成定位作業的80%: 定位例外 UI 組 ......

    uj5u.com 2023-04-19 09:16:23 more
  • FIDE重磅更新!性能飛躍!體驗有禮!

    FIDE 開發者工具重構升級啦!實作500%性能提升,誠邀體驗! 一直以來不少開發者朋友在社區反饋,在使用 FIDE 工具的程序中,時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況,十分影響開發體驗。 作為技術團隊,我們深知一件趁手的開發工具對開發者的重要性,因此,在2023年開年,FinC ......

    uj5u.com 2023-04-19 09:16:15 more
  • 游戲內嵌社區服務開放,助力開發者提升玩家互動與留存

    華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力,支持玩家直接在游戲內瀏覽帖子和交流互動,助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區? 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口,為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

    uj5u.com 2023-04-19 09:15:46 more
  • iOS從UI記憶體地址到讀取成員變數(oc/swift)

    開發除錯時,我們發現bug時常首先是從UI顯示發現例外,下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具,但是很多人可能還沒有形成一套穩定的除錯流程,因此本文嘗試解決這個問題,順便提出一個暴論:UI顯示例外問題只需要兩個步驟就能完成定位作業的80%: 定位例外 UI 組 ......

    uj5u.com 2023-04-19 09:14:53 more
  • FIDE重磅更新!性能飛躍!體驗有禮!

    FIDE 開發者工具重構升級啦!實作500%性能提升,誠邀體驗! 一直以來不少開發者朋友在社區反饋,在使用 FIDE 工具的程序中,時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況,十分影響開發體驗。 作為技術團隊,我們深知一件趁手的開發工具對開發者的重要性,因此,在2023年開年,FinC ......

    uj5u.com 2023-04-19 09:14:08 more
  • 游戲內嵌社區服務開放,助力開發者提升玩家互動與留存

    華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力,支持玩家直接在游戲內瀏覽帖子和交流互動,助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區? 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口,為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

    uj5u.com 2023-04-19 09:08:34 more