Please enable JavaScript.

Coggle requires JavaScript to display documents.

android 動畫, android java 數字儀表, ConstraintLayout, https://m3.material.io/ -…

- - - - 講到動畫，我們得來講一下怎麼繪圖。有時候，我們不會直接使用jpg、png這樣的圖片。在android為了支援不同螢幕解析度，必須制作多個不同大小的圖片，這會讓app的檔案大小變大。其實有些圖片我們是可以自已繪制出來的，繪制出來的檔案很小且支援各種螢幕大小。寫起來不難，我們就來看看這篇要介紹的ShapeDrawable。
        
        產生ShapeDrawable
        在drawable 新增 rectangle.xml，就可以把rectangle.xml當成圖片來使用
        
        <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <solid android:color="#a4b6fa" />
        </shape>
        
        使用ShapeDrawable
        在activity_main.xml直接把Layout的background設定為剛剛新增的rectangle.xml
        
        <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/rectangle" android:padding="10dp" android:text="Rectangle" android:textSize="24sp" />
        
        shape 形狀
        
        除了剛剛的矩形，還可以設定圓形、線、環形
        rectangle：矩形
        oval：圓形
        line：線
        ring：環形
        
        Shape 裡的其他屬性
        solid：設定shape填充的類色
        
        <shape android:shape="rectangle">
        <solid android:color="#a4b6fa" />
        </shape>
        
        corners：設定圓角
        
        2 more items...
    - - Canvas的意思就是畫布，而Paint 代表了Canvas上的畫筆
        以下範列記錄幾種Canvas繪製幾何圖向的方法
        canvas.drawArc （扇形）
        canvas.drawCircle（圓）
        canvas.drawOval（橢圓）
        canvas.drawPoint（點）
        canvas.drawRect（矩形）
        canvas.drawRoundRect（圓角矩形）
        canvas.drawLine（線）
        cnavas.drawPath（路徑）
        
        DrawCircle（圓）
        
        //新增一個畫筆
        val p = Paint()
        //寬度為3
        p.strokeWidth = 3f
        //顏色設定為紅色
        p.color = Color.RED
        //設定Style描邊
        p.style = Paint.Style.STROKE
        //新增bitmap
        val bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888)
        //新增一個畫布
        val canvas = Canvas(bitmap)
        //畫圓
        canvas.drawCircle(240f, 240f, 150f, p)
        
        DrawArc（扇形）
        小精靈
        
        val p = Paint()
        p.strokeWidth = 2f
        p.color = Color.RED
        p.style = Paint.Style.STROKE
        val bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(bitmap)
        val oval1 = RectF(100f, 100f, 400f, 400f)
        canvas.drawArc(oval1, 30f, 300f, true, p)
        
        DrawOval（橢圓）
        
        val p = Paint()
        p.strokeWidth = 10f
        p.color = Color.RED
        p.style = Paint.Style.STROKE
        val bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(bitmap)
        val oval = RectF()
        oval.left = 100f
        oval.top = 100f
        oval.right = 400f
        oval.bottom = 300f
        canvas.drawOval(oval, p)
        
        DrawLine（線）
        點到點
        
        val p = Paint()
        p.strokeWidth = 10f
        p.color = Color.RED
        p.style = Paint.Style.STROKE
        val bitmap = Bitmap.createBitmap(500, 500, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(bitmap)
        canvas.drawLine(60f, 40f, 200f, 400f, p)
        
        DrawPath（路徑）
        三角形
        
        2 more items...
    - - 進階Animation
        
        Layout Transtion
        
        LayoutTransition是Android 在API 11提供了一個能在當ViewGroup中有新增、刪除、隱藏View時，呈現的動畫。
        
        要做到這樣的效果，只要在Layout 裡設定android:animateLayoutChanges="true"，即可以在ViewGroup裡有新增、刪除View時使用動畫。
        
        <LinearLayout android:id="@+id/resultLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:animateLayoutChanges="true" android:orientation="vertical">
        </LinearLayout>
        
        除了預設的動畫，LayoutTransition提供4種子View變化的類型讓我們加入不同的動畫。
        APPEARING：元素在ViewGroup中新增時需要動畫顯示。
        DISAPPEARING：元素在ViewGroup中消失時需要動畫顯示。
        CHANGE_APPEARING：由於ViewGroup中要顯現一個新的元素，其它元素的變化需要動畫顯示。
        CHANGE_DISAPPEARING：由於ViewGroup中某個元素要消失，其它元素的變化需要動畫顯示。
        
        APPEARING
        元素在ViewGroup中新增時需要動畫顯示。
        
        2 more items...
        
        Activity Transtion
        
        Activity transition 透過共同元素之間的動畫效果讓不同頁面間的轉換提供視覺連續效果。
        
        在兩個Activity切換頁面時保持視覺連續性，透過共享元素(Share Element)讓畫面的切換更順暢。像這樣的轉場效果，在許多的app中都會看到
        
        可以看到第一頁的圖片、景點名稱，和第二頁是一樣的，設定一樣的Transition name，就可以達到上圖的效果。
        
        [2頁的比較圖，圖片、景點的對映]
        
        第一頁RecycleView 點下Item，開啟第二頁：
        
        步驟1：取得imageView、title
        步驟2：將imageView、title 設定Transition Name，這裡的Transition Name會與DetailActivity一樣
        步驟3：startActivity，並將activityOptions傳入
        
        override fun onItemClick(adapterView: AdapterView<*>?, view: View?, position: Int, id: Long) {
        val item = adapterView!!.getItemAtPosition(position) as Scenery
        val intent = Intent(this, DetailActivity::class.java)
        intent.putExtra(DetailActivity.ARG_SCENERY_ID, item.sceneryId)
        //步驟1：取得imageView、title
        val imageView = view!!.findViewById<View>(R.id.sceneryImageView)
        val title = view.findViewById<View>(R.id.sceneryTitle)
        //步驟2：將imageView、title 設定Transition Name，這裡的Transition Name會與DetailActivity一樣
        val activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(
        this,
        Pair(imageView, DetailActivity.TRANSITION_SCENERY_IMAGE_NAME),
        Pair(title, DetailActivity.TRANSITION_SCENERY_TITLE_NAME)
        )
        //步驟3：startActivity，並將activityOptions傳入
        startActivity(intent, activityOptions.toBundle())
        }
        
        第二頁
        將imageView與title與第一頁設定一樣的Transition name。
        
        2 more items...
        
        Transtion Manager
        
        Transition 最基本的概念就是讓你在一個Scene(起始佈局)到另一個Scene(結束佈局)之間產生動畫。
        而Scene是什麼呢？Scene基本是上指在螢幕上的View階層。
        
        像這樣，建立3個Scene，在Scene與Scene之間加入Transition，Transition Manager就會自動加上動畫。
        
        步驟一：新增3個Scene
        
        res/layout/scene1.xml
        
        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent">
        <ImageView android:id="@+id/transition_oval_blue" android:layout_width="30dp" android:layout_height="30dp" android:gravity="center" android:src="@drawable/oval_blue" />
        <ImageView android:id="@+id/transition_oval_green" android:layout_width="30dp" android:layout_height="30dp" android:layout_below="@id/transition_oval_blue" android:src="@drawable/oval_green" />
        <ImageView android:id="@+id/transition_oval_red" android:layout_width="30dp" android:layout_height="30dp" android:layout_below="@id/transition_oval_green" android:src="@drawable/oval_red" />
        </RelativeLayout>
        
        res/layout/scene2.xml
        
        2 more items...
        
        步驟二：在FrameLayout裡include第一個scene
        
        res/layout/activity_main.xml
        
        1 more item...
        
        步驟二： TransitionManager.go(scene1)指定要到哪個Scene
        
        2 more items...
        
        Material Design 相關動畫
        
        Reveal Effect
        
        Reveal Effect
        在App要顯示或隱藏 UI時，直接切換顯示的內容，可能會讓使用者覺得畫面突然變化太大。Reveal animation 動畫可提供使用者視覺上的連續性，減緩變化並引起使用者的注意。
        
        步驟：
        1.點下Fab時，取得Fab的x,y座標，開啟第二頁。
        2.第二頁從第一頁傳來的Fab座標開啟Reveal 動畫
        
        第一頁
        
        2 more items...
        
        Ripple Effect
        漣漪效果
        
        Ripple effect 是在Material design，點擊button的預設效果。
        也可以自訂Button的漣漪效果
        
        步驟1：新增一個Ripple效果
        res/drawable/ripple_effect.xml
        
        <ripple xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:color="#af0c0e" tools:targetApi="lollipop">
        <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
        <solid android:color="#af0c0e" />
        </shape>
        </item>
        </ripple>
        
        步驟2：新增ShapeDrawable，並指定drawable為剛剛新增的ripple_effect
        res/drawable/button.xml
        
        2 more items...
        
        物理Animation
        
        FlingAnimation
        
        真實世界裡，當你用力推動一個物品，這個物品的移動是會因為摩擦力而停止的。Android 就提供了FlignAnimation來達到基於物理反應的一種動畫。就像下面這個動畫，給動畫一個初始速度1500，摩擦力0.5f，最終View的移動會因為摩擦力而停止。
        
        fling.setOnClickListener {
        val flingAnimation = FlingAnimation(view, DynamicAnimation.X)
        //設定初始速度
        flingAnimation.setStartVelocity(1500f)
        //friction 摩擦力
        flingAnimation.friction = 0.5f
        //開始動畫
        flingAnimation.start()
        }
        
        1 more item...
        
        Spring Animation
        
        另一個基於物理的動畫是Spring Animation(彈簧動畫)
        
        Spring Animation(彈簧動畫)主要有2個屬性：
        DampingRatio
        設定彈性阻尼，值越大，動畫越快停止
        Stiffness
        設定彈性，彈性越大，動得越快
        
        spring.setOnClickListener {
        //彈簧動畫
        val springAnimation = SpringAnimation(view, DynamicAnimation.X)
        //設定初始速度
        springAnimation.setStartVelocity(3000f)
        val springForce = SpringForce()
        //設定彈性阻尼，值越大，動畫越快停止
        springForce.dampingRatio = SpringForce.DAMPING_RATIO_HIGH_BOUNCY
        //設定彈性，彈性越大，動得越快
        springForce.stiffness = SpringForce.STIFFNESS_MEDIUM
        //最後停止時的位置
        springForce.finalPosition = view.x
        springAnimation.spring = springForce //開始動畫 springAnimation.start()
        }
        
        1 more item...
        
        CoordinatorLayout
        
        CoordinatorLayout是用來協調子View之間動作的一個Layout，能依Layout裡一個View的位置變化，讓其他Layout也跟著移動。在不少的App都可以看到這樣的效果。
        
        這個例子 Head會隨著下方Scrollview 的滑動而隱藏和出現。
        
        CoordinatorLayout 裡包含
        
        CollapsingToolbarLayout
        CollapsingToolbarLayout 裡的Layout
        ScrollView
        
        1 more item...
        
        CollapsingToolbarLayout
        
        2 more items...
        
        VectorDrawable Animation
        
        Morphs
        
        上一篇講完畫向量圖VectorDrawable後，接來讓他動起來吧
        
        path_morph.xml 將路徑從一個形狀變形到另一個形狀。
        要達到這樣的動畫效果，我們要先繪出2個矩形，再將第1個矩形轉變為第2個矩形。
        
        第1個矩形：rect.xml
        
        2 more items...
        
        Path
        
        trimPathEnd/trimPathStart 軌跡動畫
        VectorDrawable 加上trimPathStart ，可以做到向下圖這樣，線由起點(0%)縮短至終點(100%)
        
        步驟1：新增藍色的線
        
        drawable/line.xml
        
        1 more item...
        
        步驟2：加上動畫 trimPathStart
        線由起點(0%)縮短至終點(100%)
        
        2 more items...
        
        Play-Pause
        
        前面花了3篇的篇輻來講VectorDrawable 及 VectorDrawable animation。
        我們就來做一個從Play變Pause的動畫，用慢動作來看如下圖：
        
        1.為了讓從暫停到撥放有旋轉90度的效果，所以我們將撥放的Icon做成朝上的三角形
        2.為了讓2個Icon可以變成動畫，我們知道pathData要是成對的，所以我們把三角形分為2半來處理，三角形的左右兩半會對映到Pause的左右兩塊
        
        PathData
        Play：M12,16 H5 L8.5,10.5 L12,5 M12,16 H19 L15.5,10.5 L12,5
        pause：M10,18 H6 L6,6 L10,6 M14,18 H18 L18,6 L14,6
        
        1 more item...
        
        匯入動畫
        
        一個一個畫圖是不是有點累，其實也有更方便的方式，從UI 設計師畫的接轉為VectorDrawable。
        1.匯入SVG至AndroidStudio
        2.利用Shapeshifter制作動畫
        
        匯入SVG
        New -> Vector asset -> Asset type 選擇Local file，即可匯入SVG
        
        匯入動畫
        Shapeshifter，這個網站可以讓我們在上面繪入SVG後制作動畫
        
        匯入SVG，Import -> SVG
        選擇pause與play(朝上的正三角形)
        匯入後可以看到畫面同時有正三角形與pause
        
        1 more item...
        
        向量圖
        
        SVG是指可縮放向量圖形（Scalable Vector Graphics，SVG）用XML描述二維向量圖形的圖形格式。
        而VectorDrawable 即是Android實現SVG向量圖的方式。VectorDrawable可以讓你用xml的方式來建立圖形資源。
        Android 預設有豐富的Vector資源，在res/drawable右鍵，New -> Vector asset
        
        自訂VectorDrawable
        
        在Gradle defaultConfig 加上 vectorDrawables.useSupportLibrary = true
        
        1 more item...
        
        從最簡單的畫矩形開始
        
        2 more items...
        
        Layout Animation
        
        LayoutAnimation 是用來控制ViewGroup中所有的child view顯示的動畫。例如Listview，Gridview，Recycleview。
        
        步驟1：在res/anim 新增一個 Fade in 的Animation
        
        fade.xml
        
        <?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000">
        <alpha android:fromAlpha="0" android:toAlpha="1" />
        </set>
        
        步驟2：在res/anim 新增一個layout animation
        
        layout_animation_fade_in.xml
        
        1 more item...
        
        步驟3：最後在RecycleView指定layoutAnimation即可
        
        2 more items...
        
        Scene
      - Frame Animation
        （逐格動畫）
        
        就是把很多張圖片串起來變成動畫
        步驟：
        1.設定動畫的圖片集合
        2.在Activity啟動動畫。
        
        1.設定動畫的圖片集合
        
        在res/drawable，新增frame_animation.xml
        裡的每個item代表一張圖片。待會我們就會將這些圖片串成一個動畫。
        
        <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/selected" android:oneshot="false">
        <item android:drawable="@drawable/circle" android:duration="500" />
        <item android:drawable="@drawable/circle2" android:duration="500" />
        <item android:drawable="@drawable/circle3" android:duration="500" />
        </animation-list>
        
        2.在Activity 啟動動畫。
        
        Frame Animation 是一個比較簡單的動畫。實際上逐格動畫只會用在較小的動畫效果，如果複雜的動畫或是圖片數較多的就不建議了。載入太多的圖片也可能會造成OOM。
        
        完整程式：https://github.com/evanchen76/FrameAnimation
        
        步驟1：將圖片背景轉為AnimationDrawable
        步驟2：AnimationDrawable.start()，開始動畫
        
        imageView.setBackgroundResource(R.drawable.frame_animation)
        start.setOnClickListener {
        //步驟1：將圖片背景轉為AnimationDrawable
        val frameAnimation = imageView.background as AnimationDrawable
        //步驟2：AnimationDrawable.start()，開始動畫
        frameAnimation.start()
        }
        stop.setOnClickListener {
        val frameAnimation = imageView.background as AnimationDrawable
        //結束動畫
        frameAnimation.stop()
        }
      - Property animation
        
        Property animation 依字面上的解釋就是透過動畫改變物件的屬性。Property animation 以XML定義的動畫，在動畫的期間修改目標對象的屬性，從而使對象展現出動畫效果。例如背景顏色或透明度。View animation 只能用在view，且改變的是View的繪制效果，View真正的屬性並沒有改變。而Property animation則是真的會改變物件的屬性。
        
        步驟1：在res/animator 新增 anim_alpha.xml
        使動畫期間1000毫秒修改物件的alpha屬性值至0.1
        
        <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000" android:propertyName="alpha" android:valueTo="0.1f" />
        
        步驟2：在textView使用anim_alpha動畫：在Activity 呼叫 AnimatorInflater.loadAnimator
        
        AnimatorInflater.loadAnimator(this, R.animator.anim_alpha)
        .apply {
        setTarget(textView)
        start()
        }
        
        objectAnimator 各個屬性
        
        duration 動畫持續的時間(毫秒)
        android:startOffset 動畫開始執行前的等待時間
        propertyName 動畫改變的屬性
        
        1 more item...
        
        Property animation 進階
        
        1 more item...
      - View animation
        
        是Android最簡單使用的一種動畫呈現方式了，可以在各種View 上做透明度、大小、位置、旋轉的動畫。
        
        透過xml定義動畫效果，xml置於res/anim目錄下
        
        alpha 透明度
        
        <?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android">
        <alpha android:duration="2000" android:fromAlpha="1.0" android:toAlpha="0" />
        </set>
        
        android:duration 動畫持續的時間(毫秒)
        android:fromAlpha 動畫開始的透明度。0為完全透明，1為不透明。
        android:toAlpha 動畫結束的透明度。0為完全透明，1為不透明。
        
        1 more item...
        
        scale 大小縮放
        
        <set xmlns:android="http://schemas.android.com/apk/res/android">
        <scale android:duration="2000" android:fromXScale="1.0" android:fromYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:toXScale="3.0" android:toYScale="3.0" />
        </set>
        
        android:duration 動畫持續的時間(毫秒)
        android:fromXScale 起始的X座標縮放倍數
        android:toXScale 結束的X座標縮放倍數
        android:fromYScale 起始的Y座標縮放倍數
        android:toYScale 結束的Y座標縮放倍數
        android:pivotX 縮放時不變的X坐標，用%表示)
        android:pivotY 縮放時不變的Y坐標，用%表示)
        例：將圖片放大3倍，pivotX="50%" 代表中心點在中間
        
        1 more item...
        
        translate 位置移動
        
        <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate android:duration="2000" android:fromXDelta="0" android:fromYDelta="0" android:toXDelta="100%" android:toYDelta="100%" />
        </set>
        
        android:duration 動畫持續的時間(毫秒)
        android:fromXDelta 起始X座標偏移量
        android:toXDelta 結束X座標偏移量
        android:fromYDelta 起始Y座標偏移量
        android:toYDelta 結束Y座標偏移量
        以上的值可使用%設定相對View的百分比位置
        
        1 more item...
        
        rotate 旋轉
        
        <set xmlns:android="http://schemas.android.com/apk/res/android">
        <rotate android:duration="2000" android:fromDegrees="0" android:toDegrees="720" android:pivotX="50%" android:pivotY="50%" />
        </set>
        
        android:duration 動畫持續的時間(毫秒)
        android:fromDegrees 旋轉開始的角度
        android:toDegrees 旋轉結束的角度
        android:pivotX 旋轉中心點的X座標
        android:pivotY 旋轉中心點的Y座標
        pivot 值可設定%設定相對View的百分比位置，或%P來設定相對Parent View的百分比位置
        例：旋轉720度，即2圈。pivotX="50%" 代表中心點在中間
        
        1 more item...
        
        啟動這些動畫的方式，在Activity呼叫View.startAnimation
        
        imageView.startAnimation(AnimationUtils.loadAnimation(this, R.anim.alpha))
      - Value Animation
    - - https://ithelp.ithome.com.tw/m/articles/10207614
  - - - Material design
    - - 不要讓動畫影響效能。製作動畫時不能低於 60 fps，低於60fps就會讓使用者感覺到斷斷續續或停頓，讓使用者覺得體驗差。
      - 速度
        
        動畫的速度應適中，太快會不清楚發生什麼事，太慢則會讓使用者等待。
        會影響速度的有：Duration持續時間與Easing(隨時間加速)。
        
        Duration 持續時間
        
        適當的轉換速度可幫助使用者追蹤UI的改變，而不會使任務複雜化
        在Material design 裡有介紹各種的動畫建議的持續時間。
        例如進入新頁面的動畫時間應比離開頁面的時間長。因為開新頁面需要讓使用者在新頁面能更被吸引到注意。
        例如一般來說越小範圍的動畫可以越快。
        參考：https://material.io/design/motion/speed.html#duration
        
        Easing(隨時間加速)
        
        除了持續時間，Easing也是影響動畫整體時間的。Easing是一種調整動畫變化率的方法，允許轉換元素加速和減速，而不是以恆定速率移動。例如animation.interpolator就是。
        在真實世界，事物不會立即開始或停止移動。他們需要時間來加速和減速就像受摩擦等自然力的影響。(例如上一篇的FlingAnimation)
        常見到的一種方式是在動畫開始很快的加速並逐漸減速來強調動畫的結束，這會讓動畫在結束時引起微妙的注意。
        參考：https://material.io/design/motion/speed.html#duration
        
        避免過度使用
        
        我們學會了怎麼寫出動畫，但要避免過度使用。永遠想到你的目的是什麼？動畫需要成為整個體驗的一部分。在大多數情況下，一個好的動畫的使用甚至不會讓使用者注意到有動畫。
        
        參考：
        https://blog.prototypr.io/6-animation-guidelines-for-ux-design-74c90eb5e47a
        https://medium.com/@stevenfabre/invisible-animation-ffa27d0b77e5

android java 數字儀表

Java

public class MainActivity extends AppCompatActivity {

    ActivityMainBinding binding;

View pointer;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    binding=ActivityMainBinding.inflate(getLayoutInflater());
    setContentView(binding.getRoot());
    startAnimationCounter(0,50);
    View decorView = getWindow().getDecorView();
    float speedRotation = -120.5f ;
    pointer = findViewById(R.id.pointer);
    pointer.setRotation(speedRotation);

    int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_FULLSCREEN;
    decorView.setSystemUiVisibility(uiOptions);
}

public void startAnimationCounter(int start_no,int end_no){
    ValueAnimator animator=ValueAnimator.ofInt(start_no,end_no);
    animator.setDuration(10000);
    animator.addUpdateListener(animation -> {
        binding.speed.setText(animation.getAnimatedValue().toString());

binding.centerCircle.setProgress(Integer.parseInt(animation.getAnimatedValue().toString()));
});
animator.start();
}

@Override
protected void onDestroy() {
    super.onDestroy();
    binding=null;
}

}

activity_main.xml

    <ProgressBar
        android:id="@+id/center_circle"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="1067dp"
        android:layout_height="602dp"
        android:indeterminate="false"
        android:max="75"
        android:progress="0"
        android:progressDrawable="@drawable/center_circle" />

- - - - 我們在講Property animation有講過keyFrame，這裡也可以使用keyFrameSet。
        
        KeyFrameSet 裡可以設定
        KeyPosition 位置的變化
        KeyCycle 振盪效果
        KeyAttribute 屬性的變化
        KeyPosition
        設定動畫在50%時，Y的位置往上移動25%
        
        <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000">
        <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight"/>
        <KeyFrameSet>
        <KeyPosition motion:keyPositionType="pathRelative" motion:percentY="-0.25" motion:framePosition="50" motion:target="@id/button"/>
        </KeyFrameSet>
        </Transition>
        
        再加3個keyPosition
        
        <KeyFrameSet>
        <KeyPosition motion:keyPositionType="pathRelative" motion:percentY="-0.25" motion:framePosition="25" motion:target="@id/button"/>
        <KeyPosition motion:keyPositionType="pathRelative" motion:percentY="0.25" motion:framePosition="50" motion:target="@id/button"/>
        <KeyPosition motion:keyPositionType="pathRelative" motion:percentY="-0.25" motion:framePosition="75" motion:target="@id/button"/>
        </KeyFrameSet>
        
        加上KeyCycle 產生振盪
        
        <KeyFrameSet>
        <KeyCycle android:rotation="25" motion:framePosition="50" motion:target="@+id/button" motion:wavePeriod="1" motion:waveShape="sin" />
        </KeyFrameSet>
        
        KeyCycle加上KeyAttribute放大2倍
        
        <KeyFrameSet>
        <KeyCycle android:rotation="25" motion:framePosition="25" motion:target="@+id/button" motion:wavePeriod="1" motion:waveShape="sin" />
        <KeyAttribute motion:target="@id/button" android:scaleX="2" android:scaleY="2" motion:framePosition="50" />
        </KeyFrameSet>
        
        KeyAttribute 支援的屬性
        android:visibility
        android:alpha
        android:elevation
        android:rotation
        android:rotationX
        android:rotationY
        android:scaleX
        android:scaleY
        android:translationX
        android:translationY
        android:translationZ
        
        MotionLayout 仍有非常多可以應用的。可以看看Google的範例：https://github.com/googlesamples/android-ConstraintLayoutExamples
        裡面有MotionLayout結合CoordinatorLayout、viewPager、reveal、fragment等的應用。
    - - 使用方式：
        Gradle
        implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'
        
        MotionLayout
        在activity_main.xml加上MotionLayout，加上屬性app:layoutDescription="@xml/scene”。這個MotionLayout裡的子View就可以透過scene.xml的設定當使用者與UI互動時產生動畫。
        
        activity_main.xml
        
        <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene" tools:showPaths="true">
        <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" />
        </android.support.constraint.motion.MotionLayout>
        
        MotionScene
        在這裡設定當使用者與UI做什麼樣的互動(例：OnSwipe)時，要使用什麼動畫。
        
        xml/scene.xml
        
        1 more item...
        
        touchAnchorId：物件的Id
        touchAnchorSide: 物件移動的方向 (top / left / right / bottom )
        dragDirection：物件拉至哪個方向 (dragRight / dragLeft / dragUp / dragDown )
        所以這個例子可以解釋為，當把id/button往右拉時，button會往右移動，動畫將從id/start的ConstraintSet到id/end的ConstraintSet，動畫期間為1秒。
        除了透過ConstraintSet的開始Layout、結束Layout不同的Constraint產生的動畫，還可以加上CustomAttribute，改變背景顏色
        
        在start加上CustomAttribute 設定 attributeName 改變BackgroundColor
        
        <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent">
        <CustomAttribute motion:attributeName="BackgroundColor" motion:customColorValue="#1b54d8" />
        </Constraint>
        </ConstraintSet>
        
        在end加上CustomAttribute 設定 attributeName 改變BackgroundColor
        
        1 more item...
        
        CustomAttribute 還有其他可以設定
        
        <CustomAttribute motion:attributeName="alpha" motion:customFloatValue="0" />
        
        1 more item...
        
        完整程式：
        https://github.com/evanchen76/MotionLayout
  - - - layout1.xml
        還沒有標題與下方的描述
        
        layout2.xml
        出現了標題、下方的標題
        
        我們先來看上方的標題是怎麼達到動畫效果的
        Layout1與Layout2的差異
        app:layout_constraintBottom_toTopOf="+id/imageView"
        app:layout_constraintTop_toTopOf="parent"
        所以動畫的呈現會由上往下展開
        
        下方的描述出現也是同樣的方式，透過layout1與layout2的constraintLayout的差異來達到動畫的效果。
        Layout1
        圖片是填滿整個螢幕
        
        Layout2
        
        圖片的底部為下方desc的頂部，app:layout_constraintBottom_toTopOf="+id/desc"
        
        1 more item...
        
        Activity 開始動畫，顯示標題、下方的描述
        
        2 more items...
        
        <ImageView android:id="@+id/imageView" android:layout_width="0dp" android:layout_height="0dp" android:layout_marginTop="0dp" android:scaleType="centerCrop" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@mipmap/scenery" />
        
        下方的描述 app:layout_constraintTop_toBottomOf="parent"，所以是看不到的
        
        1 more item...
- - - - 1.設定長寬比
        2.刪除條件約束
        3.Fixed
        Wrap Content
        Match Constraints
        4.設定Margin
        5.設定Constraint Bias
        
        Parent position，父元件約束
        
        步驟：
        新增一個TextView，
        在4個邊加上Wrap Content的Constraint
        設定Bias為50,50，(預設為50)，表示置中
        
        相對定位
        Order position，與其他View約束
        
        Alignment，對齊
        
        Baseline alignment
        
        1 more item...