FloatingActionButton의 애니메이션을 만드는 MotionSpec은 무엇입니까?

Ateam Lifestyle Advent Calendar 2019 의 3일째는
주식회사 에이팀 라이프 스타일 나고야 개발부 의 @charden 가 담당합니다!

라이프 스타일로 몇 안되는 앱 엔지니어이므로 이번에도 앱의 기사로 가겠습니다!

자사 앱에서 FloatingActionButton을 추가했을 때 애니메이션을 제어하고 싶어서 조사한 내용을 기사로 합니다.

MotionSpec이란?

material-components-android에 포함된 View의 애니메이션을 결정하는 것

FloatingActionButton 에서는 디폴트에서는, 표시 애니메이션으로서 이하와 같은 XML 가 설정되어 있습니다.

design_fab_show_motion_spec.xml

<?xml version="1.0" encoding="utf-8"?>
<!--
    Copyright 2017 The Android Open Source Project

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:propertyName="opacity"
      android:startOffset="0"
      android:duration="200"
      android:interpolator="@interpolator/mtrl_linear_out_slow_in"/>
  <objectAnimator
      android:propertyName="scale"
      android:startOffset="0"
      android:duration="200"
      android:interpolator="@interpolator/mtrl_linear_out_slow_in"/>
  <objectAnimator
      android:propertyName="iconScale"
      android:startOffset="0"
      android:duration="0"
      android:interpolator="@interpolator/mtrl_fast_out_slow_in"/>
</set>

숨겨지면 design_fab_hide_motion_spec.xml이 사용됩니다.

기본적으로 다음과 같은 애니메이션으로 작동합니다.

MotionSpec에 대응한 MaterialDesignComponent(2019년 12월 시점)

FloatingActionButton

Chip

설정할 수 있는 항목

FloatingActionButton의 경우

Property

opacity

불투명도

scale

View 크기 조정

iconScale

아이콘 크기 조정

각 설정

startOffset

시작점 위치

duration

지속 시간

interpolator

동작 보간

interpolator(동작 보간)이란?

다음 동영상을 시청하는 것이 이해하기 쉽습니다.

점점 빨리, 점점 늦게 등 애니메이션의 동작 방식을 변경할 수 있다

실제로 설정값을 바꾸어 보면

보통 (duration = 200ms)
duration = 1s
bounce

직접 interpolator를 만들 수 있습니다.

동작 보간을 sin4x 로서 CustomInterpolator.java 를 작성했습니다.

실제 동작은 이런 형태



파형으로 표현하면 이런 느낌



실제 코드

CustomInterpolator.kotlin

import android.view.animation.Interpolator
import kotlin.math.sin

class CustomInterpolator : Interpolator {
    override fun getInterpolation(v: Float): Float {
        return sin(4 * v)
    }
}

XML에서는 잘 지정할 수 없으므로 코드에서 지정

val motionSpec = MotionSpec.createFromResource(this, R.animator.show)
motionSpec?.setTiming("scale", MotionTiming(0, 1000, CustomInterpolator()))
fab.showMotionSpec = motionSpec

요약

material-components-android에서는 일부 Component에서 MotionSpec에서 애니메이션을 설정할 수 있습니다.
앞으로는 애니메이션을 잘 사용하여 보다 기분 좋은 사용자 체험을 할 수 있도록 해 가고 싶습니다!

Ateam Lifestyle Advent Calendar 2019 의 4일째는 @ 다야 마구치 1 가 보내 드립니다! ! 인프라 엔지니어가 어떤 기사를 작성할지 기대됩니다!

"도전"을 소중히 여기는 에이팀 그룹에서는 함께 일할 수 있는 도전 정신 왕성한 동료를 모집하고 있습니다. 흥미를 가진 분은 꼭 에이팀 그룹 채용 사이트를 봐 주세요.
htps //w w. 아-tm. 이. jp / Rec 루이 t /