본 포스팅은 用途に合わせたアニメーションの実装方法 을 기본으로 번역하여 작성했습니다
제 일본어 실력으로 인하여 오역이나 오타가 발생할 수 있습니다.
실제 슬라이드의 일본어 부분을 번역했다는 점 양해바랍니다.
용도에 맞는 애니메이션 구현 방법
Takao Sumitomo
@cattaka_net
자기소개
어플에 움직임을 적용하고 있습니까?
필요할 때 구글링하면 된다고 생각하고 있지 않습니까?
실은 애니메이션의 구조는 Android의 FW에 많이 있습니다
한마디로 애니메이션이라고 해도 대상은 뭔가 있을 것이지요
현재 Android 프레임워크 현 상황
이번에는 그것을 정리하고싶다라는 이야기입니다
View 의 내부를 움직임
View의 내부를 움직임
Animation Drawable
Animation Drawable
drawable/roll_cat.xml
<?xml version="1.0" encoding="utf-8"?>
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item
android:drawable="@drawable/roll_cat_1"
adnroid:duration="200"/>
<item
android:drawable="@drawable/roll_cat_2"
adnroid:duration="200"/>
<item
android:drawable="@drawable/roll_cat_1"
adnroid:duration="200"/>
<item
android:drawable="@drawable/roll_cat_3"
adnroid:duration="200"/>
</animation-list>
Animation Drawable
애니메이션을 시작시키는 코드
ImageView logoImage
= (ImageView) findViewById(R.id.image_logo);
logoImage.setBackgroundResoure(R.drawable.roll_cat);
AnimationDrawable rollCatDrawable
= (AnimationDrawable) logoImage.getDrawable();
rollCatDrawable.start();
Animated Vector Drawable
Animated Vector Drawable
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600">
<group android:name="characterGroup">
<path
android:name="character"
android:fillColor="#000000"
android:pathData="M 80,0 24,24 0,80 l 24,56 56, -생략-" />
</group>
<group android:name="feedGroup"
android:translateX="80">
<path
android:fillColor="#000000"
android:pathData="M 72,64 l -8,8 0,16, 8,8 16,0 8 -생략-" />
</group
</vector>
이것은 움직임이 없는 단순한 SVG
Animated Vector Drawable
<?xml version="1.0" encoding="utf-8"?>
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vector_drawable">
<target
android:name="feedGroup"
android:animation="@anim/av_translation" />
<target
android:name="character"
android:animation="@anim/av_path_morph" />
</animated-vector>
android:animation으로 움직임을 넣는다
View 자체를 움직임
View Animation
View Animation
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000"
android:fromXDelta="0%"
android:fromYDelta="0%"
android:interpolator="@android:anim/bounce_interpolator"
android:toXDelta="100%"
android:toYDelta="100%" />
xml에서 애니메이션을 정의
Animation anim = AnimationUtils.loadAnimation(this, R.anim.va_move);
mTargetButton.startAnimation(anim);
코드로부터 애니메이션을 실행
View Animation
코드에서 애니메이션을 정의
TranslateAnimation anim
= new TranslateAnimation(0, mTargetView.getWidth(),
0, mTargetView.getHeight());
anim.setDuration(3000);
mTargetView.startAnimation(anim);
코드에서 애니메이션을 실행
Property Animation
ObjectAnimator
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000"
android:interpolator="@android:anim/bounce_interpolator"
android:propertyName="translationX"
android:valueFrom="0"
android:valueTo="300"
android:valueType="floatType"/>
이 translationX는 어디를 가리키고 있는가?
xml에서 애니메이션을 정의
Animator anim
= AnimatorInflater.loadAnimator(this, R.animator.pa_move);
anim.setTarget(mTargetButton);
anim.start();
코드에서 애니메이션을 실행
ObjectAnimator
public void setTranslationX (float translationX)
View Class의 메소드를 가리키고 있다. 즉 Reflection으로 접근한다
ObjectAnimator
코드에서 애니메이션을 정의
ObjectAnimator animator
= ObjectAnimator.ofFloat(mTargetButton, "translationX",
0F, mTargetButton.getWidth());
animator.setDuration(3000);
animator.start();
코드에서 애니메이션을 실행
이외에도 ofInt이나 ofObject이나 ofMultiFloat 등이 있다
ViewPropertyAnimator
X 방향으로 평행이동
mTargetView.animate()
.translationX(mTargetView.getWidth())
.setDuration(3000)
.start();
360도 회전
mTargetView.animate()
.rotation(360f)
.setDuration(3000)
.start();
이동이나 회전 이외에 확대축소이나 투명도 동일하게 작성할 수 있습니다.
복수 View를 포함한 레이아웃
이름 정리
Fragment Animation
각각 다른 움직임을 합니다.(정식 명칭으로 정해지지 않은 것은 가칭 이름입니다)
Activity/Fragment Animation
Activity Animation
Intent intent = new Intent(this, At2Activity.class);
startActivity(intent);
overridePendingTransition(R.anim.aa_slide_in, R.anim.aa_slide_out);
Fragment Animation
Fragment Animation
Fragment fragment = Fa1Fragment.newInstance();
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.setCustomAnimations(R.anim.aa_slide_in, R.anim.aa_slide_out);
ft.replae(R.id.layout_fragment, fragment);
ft.commit();
BackKey로 돌아올 때의 애니메이션을 지정하는 매개변수가 4개인 것도 존재합니다
Transition
3가지 Transition 공통의 생각
3가지 Transition 공통의 생각
Transition
Transition
Transition
Scene scene = Scene.getSceneForLayout(mContainerLayout,
R.layout.activity_ta_child_rb, this);
Transition transition
= TransitionInflater.from(this).inflateTransition(R.transition.ta);
TransitionManager.go(scene, transition);
Transition
<?xml version="1.0" encoding="utf-8"?>
<transitionSet
xmlns:android="http://schemas.android.com/apk/res/android">
<fade/>
<changeBounds>
<targets>
<target android:excludeId="@id/buttion_excluded"/>
</targets>
</changeBounds>
</transitionSet>
지정할 수 있는 움직임 종류
| Class | Tag | 움직임 |
|---|---|---|
| AutoTransition | autoTransition | 자동 |
| Fade | fade | Fade In/Out (옵션으로 지정) |
| ChangeBounds | changeBounds | 이동과 사이즈 |
Javadoc을 보면, 이외에 ChangeClipBound, ChangeImageTransform, ChangeScroll, ChangeTransform, TransitionSet, Visibility, Explode, Slide가 있다
Activity Transition
Activity Transition
이동 전후에 공통 요소를 지정
ActivityOptions options
= ActivityOptions.makeSceneTransitionAnimation(
this,
new Pair<>(view.findViewById(R.id.image_logo),
"transition:image_logo")
);
getWindow().setSharedElementEnterTransition(new ChangeBounds());
getWindow().setSharedElementReturnTransition(new ChangeBounds());
getWindow().setEnterTransition(new Fade());
getWindow().setExitTransition(new Explode());
Intent intent = new Intent(this, At2Activity.class);
startActivity(intent, options.toBoundle());
각각 움직임을 지정한다
Activity Transition
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/image_logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="@drawable/logo"
android:transitionName="transition:image_logo"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:text="Button 3"/>
</RelativeLayout>
Fragment Transition
Fragment Transition
각각 움직임을 지정한다
Fragment fragment = Ft2Fragment.newInstance();
fragment.setEnterTransition(new Fade(Fade.IN));
fragment.setExitTransition(new Fade(Fade.OUT));
fragment.setSharedElementEnterTransition(new ChangeBounds());
fragment.setSharedElementReturnTransition(new ChangeBounds());
FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.replae(R.id.layout_fragment, fragment);
Fragment currentFragment
= getFragmentManager().findFragmentById(R.id.layout_fragment);
ft.addSharedElement(currentFragment.getView().findViewById(R.id.image_logo)
"transition:image_logo");
ft.addSharedElement(currentFragment.getView().findViewById(R.id.button_a),
"transition:button_a");
ft.addToBackStack(null);
ft.commit();
이동 전후에서 공통 요소를 지정
Fragment Transition
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- 생략 -->
<ImageView
android:id="@+id/image_logo"
~~~~~~
android:transitionName="transition:image_logo"/>
<FrameLayout
~~~~~~
>
<Button
android:id="@+id/button_a"
android:text="Button A"
android:transitionName="transition:button_a"/>
</FrameLayout>
<!-- 생략 -->
</RelativeLayout>
API 레벨에 대해서
| Name | API Level |
|---|---|
| Drawable Animation | 1 (Android 1.0) |
| Animated Vector Drawable | 21 (Android 5.0) |
| View Animation | 1 (Android 1.0) |
| Property Animation | 11 (Android 3.0.x) |
| Transition | 19 (Android 4.4) |
| Activity Transition | 21 (Android 5.0) |
| Fragment Transition | 21 (Android 5.0) |
API 레벨에 대해서
정리
Sample 어플
https://github.com/cattaka/LearnAnimation
대부분 코드의 Snipper가 들어있다
comments powered by Disqus
Subscribe to this blog via RSS.