Android UI - Animation (Button)

1. AnimatedStatusListDrawable 

   - View 상태에 따라 Drawable을 보여줄때,

      각 상태 사이에 Animation 을 보여줄수 있다.

 

    ex) BottomNavigationView, TabLayout 처럼 selected 상태를 지원하거나 좋아요 버튼 눌렀을때 사용 가능

(1) 여러개의 사진을 이어 붙여서 하나의 애니메이션으로 만든다. (drawable 제작)

<animation-list android:oneshot="true">
	<item android:drawable="@drawable/ic_battery_0"
    	android:duration="32"/>
    <item android:drawable="@drawable/ic_battery_20"
    	android:duration="32"/>
    ...
    <item android:drawable="@drawable/ic_battery_100"
    	android:duration="32"/>
</animation-list>

(2) 해당 내용 적용

<animated-selector>
	<transition android:drawable="@drawable/ad_battery_select"
    	android:fromId="@id/unselected"
        android:toId="@id/selected"/>
</animated-selector>

(3) 적용

<ImageView android:src="@drawable/asId_battery" />

---

2. AnimatedVertorDrawable

- Frame Animation을 사용하는 대신

VertorDrawable에 Animation을 구현 할 수 도 있다.

 

-처음에 스킬 다운를 한후 작은 크기로 설정했다가 일정 각도로 회전후 다시 스케일을 크게 하는것.

(1) 해당 drawable 파일 생성

<animated-vector>
	<aapt:attr name:android:drawable">
    	<vector android:width = "24dp"
        	android:height = "24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
          <group android:name="gear"
              android:pivotX="12"
              android:pivotY="12">
          <path android:fillColor = "00F2B2"
              android:pathData="M19.43,12.98c0.04,..." />
          </group>
        </vector>
  </aapt:attr>
</animated-vector>

(2) 셋팅 2

<animation-vector>
	<aapt:attr name="android:drawable" />
    <target android:name:gear">
    	<aapt:attr name:android:animation">
        	<set>
            	<objectAnimator
                	android:duration="300"
                    android:propertyName="scaleX"
                    android:valueFrom="1"
                    android:valueTo="0.8"
                    android:valueType="floatType" />
                 <objectAnimator
                	android:duration="300"
                    android:propertyName="scaleY"
                    android:valueFrom="1"
                    android:valueTo="0.8"
                    android:valueType="floatType" />
                 <objectAnimator
                	android:duration="300"
                    android:propertyName="scaleX"
                    android:startOffset="600"
                    android:valueFrom="0.8"
                    android:valueTo="1"
                    android:valueType="floatType" />
                 <objectAnimator
                	android:duration="300"
                    android:propertyName="scaleY"
                    android:startOffset="600"
                    android:valueFrom="0.8"
                    android:valueTo="1"
                    android:valueType="floatType" />
            </set>
         </aapt:attr>
      </target>
</animated-vector>

3.적용 (selected 를 true로 바꾸면 동작함)

<ImageView android:src="@drawable/asId_settings" />

imageView.setOnClickListener {
	it.isSelected = true
}

---

3. Ripple

   - 일반적인 아이템 백그라운드에 애니메이션을 주는 방식

   - Meterial Design 에서 제공

 

(1) 해당 drawable 파일 생성

<!-- res/drawable/ripple.xml -->
<ripple android:color=?colorControlHighlight">
	<item android:drawable="@drawable/ripple_mask" />
    <item android:id="@android:id/mask"
    	  android:drawable="@drawable/ripple_mask" />
</ripple>

<!-- res/drawable/ripple_mask.xml -->
<shape android:shape="rectangle">
	<corners android:radius="8dp" />
    <solid android:color="@color/colorAccent" />
</shape>

 

(2) 적용 -> 해당 오브젝트에 background로 지정해서 사용 가능