iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Mobile Development

android studio 30天學習筆記系列 第 27

30天學習筆記 -day 27-Motion Editor(下篇)

昨天製作了按鈕由下往上的動畫,今天要加上變化,讓昨天的動畫看起來不那麼單調。

加入< KeyFrameSet >

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

        <!-- 動畫樣式 -->
        <OnSwipe motion:dragDirection="dragUp"
            motion:touchAnchorId="@id/button"
            motion:touchAnchorSide="top"/>
        <KeyFrameSet>
            <KeyPosition
                motion:motionTarget="@+id/button"
                motion:framePosition="75"
                motion:keyPositionType="pathRelative"
                motion:percentY="-0.25" />
            <KeyPosition
                motion:motionTarget="@+id/button"
                motion:framePosition="25"
                motion:keyPositionType="pathRelative"
                motion:percentY="0.25" />
            <KeyAttribute
                motion:motionTarget="@+id/button"
                motion:framePosition="50"
                android:alpha="0.1" />
        </KeyFrameSet>
    </Transition>

    ...下面都一樣 故省略..
</MotionScene>

KeyPosition: 位置的變化
KeyAttribute: 屬性的變化

  • motion:framePosition="75"表示從動畫開始到動畫結束的的進度到75%的部分
  • motion:keyPositionType=""使用的座標種類
  1. parentRelative:父類別的左上角為原點,原點往右為x軸,原點往下為y軸。
  2. deltaRelative: constraintSetStart至constraintSetEnd,constraintSetStart為原點,往右為x軸,往上為y軸。
  3. pathRelative: constraintSetStart為原點,constraintSetStart至constraintSetEnd所連成的線為x軸,垂直的方向為y軸。

還是不知道差別的可以到此了解

成果:

CustomAttribute

自訂義屬性

<?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">
    ...上面的設定跟剛剛一樣 故省略...

    <ConstraintSet android:id="@+id/start">
        <Constraint
            motion:layout_constraintVertical_bias="0.877"
            android:layout_height="wrap_content"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            android:layout_width="wrap_content"
            android:id="@+id/button" >
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#00FF99" />
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="#555555" />
        </Constraint>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            motion:layout_constraintVertical_bias="0.109"
            android:layout_height="wrap_content"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            android:layout_width="wrap_content"
            android:id="@+id/button" >
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#C59EFB" />
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="#0000FF" />
        </Constraint>
    </ConstraintSet>
</MotionScene>

我將開啟的button跟button text改了顏色,當動畫結束時會做顏色的變化

成果:


上一篇
30天學習筆記 -day 26-Motion Editor(上篇)
下一篇
30天學習筆記 -day 28-ExpandableListView
系列文
android studio 30天學習筆記30

1 則留言

0
juck30808
iT邦新手 2 級 ‧ 2021-10-12 18:32:48

恭喜即將完賽!!!

我要留言

立即登入留言