Animations https://university.noveogroup.ru

1. Animations
Android
Константин Золотов

2. План
Animation Frameworks (Drawable Animations, View Animations, Propertry Animations)
Layout Transitions (Layout Animations, Transitions Framework)
Window Transitions (Custom Animations, Shared Elements)
Moar (Ripples, Reveals, Links)

3. Animation Frameworks
Drawable Animations - покадровая анимация
View Animations - анимация отображения view
Property Animations - изменение свойств

4. Drawable Animations
Разметка:
1 <animation-list xmlns:android="http://schemas.android.com/apk/res/android">
2 <item android:drawable="@drawable/smile1" android:duration="200"/>
3 <item android:drawable="@drawable/smile2" android:duration="200"/>
4 <item android:drawable="@drawable/smile3" android:duration="200"/>
5 </animation-list>
Код:
1 AnimationDrawable mAnimation = new AnimationDrawable();
2 // устанавливаем циклическое повторение анимации
3 mAnimation.setOneShot(false);
4 mAnimation.addFrame(smile1, 250);
5 mAnimation.addFrame(smile1, 250);
6
7 AnimationDrawable animation = (AnimationDrawable)image.getBackground();
8 animation.start()

5. +/- Drawable Animations
сложные анимации
сложно создавать и поддерживать
много ресурсов -> долгие билды, больший вес выходного файла

6. View Animations
1 <?xml version="1.0" encoding="utf-8"?>
2 <set xmlns:android="http://schemas.android.com/apk/res/android"
3 android:fillAfter="true" >
4 <alpha
5 android:duration="1000"
6 android:fromAlpha="1.0"
7 android:interpolator="@android:anim/accelerate_interpolator"
8 android:toAlpha="0.0" />
9 </set>
Animation anim = AnimationUtils.loadAnimation(this, R.anim.test);
view.startAnimation(anim);

7. Чем плоха система
анимировать можно только Views
только простейшие преобразования (alpha, translate, scale, rotate)
объект анимации остается неизменным

8. Property Animations
1 ValueAnimator animation = ValueAnimator.ofFloat(0f, 1f);
2 animation.setDuration(1000);
3 animation.start();
4
5 ObjectAnimator anim = ObjectAnimator.ofFloat(shape, "translationX",300);
6 anim.start();

9. Интерполяторы

10. Change Fragment animation
ft.setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out);
1 <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
2 android:interpolator="@android:interpolator/accelerate_quad"
3 android:valueFrom="0"
4 android:valueTo="1"
5 android:propertyName="alpha"
6 android:duration="@android:integer/config_mediumAnimTime" />

11. Animating Layout Changes
1 <LinearLayout android:id="@+id/container"
2 android:animateLayoutChanges="true"
3 ...
4 />

12. Transitions Framework

13. Создание сцен
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 android:id="@+id/master_layout">
3 <TextView
4 android:id="@+id/title"
5 ...
6 android:text="Title"/>
7 <FrameLayout
8 android:id="@+id/scene_root">
9 <include layout="@layout/a_scene" />
10 </FrameLayout>
11 </LinearLayout>
mSceneRoot = (ViewGroup) ndViewById(R.id.scene_root);

14. Создание сцен
сцена 1
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 android:id="@+id/scene_container"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent" >
5 <View
6 android:width="10dp"
7 android:height="10dp"
8 android:id="@+id/view1 />
9 </RelativeLayout>
сцена 2
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 android:id="@+id/scene_container"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent" >
5 android:width="100dp"
6 android:height="100dp"
7 android:id="@+id/view1 />

15. Создание сцены из Layout
1 Scene mAScene;
2 Scene mAnotherScene;
3
4 // Create the scenes
5 mAScene = Scene.getSceneForLayout(mSceneRoot, R.layout.a_scene, this);
6 mAnotherScene =
7 Scene.getSceneForLayout(mSceneRoot, R.layout.another_scene, this);

16. Создание Transition
1. Добавить директорию res/transition/
2. Добавить xml файл (res/transition/fade_transition.xml)
<fade xmlns:android="http://schemas.android.com/apk/res/android" />
Transition mFadeTransition = TransitionInflater.from(this).
inflateTransition(R.transition.fade_transition);
3. Создать из кода Transition mFadeTransition = new Fade();

17. Использование Transition
1. Сцены
TransitionManager.go(mEndingScene, mFadeTransition);
1. Вне сцен
TransitionManager.beginDelayedTransition(mRootView, mFade); mRootView.addView(mLabelText);

18. Shared element
1 final View imgContainerView = findViewById(R.id.img_container);
2
3 // get the common element for the transition in this activity
4 final View androidRobotView = findViewById(R.id.image_small);
5
6 // define a click listener
7 imgContainerView.setOnClickListener(new View.OnClickListener() {
8 @Override
9 public void onClick(View view) {
10 Intent intent = new Intent(this, Activity2.class);
11 // create the transition animation - the images in the layouts
12 // of both activities are defined with android:transitionName="robot"
13 ActivityOptions options = ActivityOptions
14 .makeSceneTransitionAnimation(this, androidRobotView, "robot");
15 // start the new activity
16 startActivity(intent, options.toBundle());
17 }
18 });

19. Animate View State Changes
1 <selector xmlns:android="http://schemas.android.com/apk/res/android">
2 <item android:state_pressed="true">
3 <set>
4 <objectAnimator android:propertyName="translationZ"
5 android:duration="@android:integer/config_shortAnimTime"
6 android:valueTo="2dp"
7 android:valueType="floatType"/>
8 </set>
9 </item>
10 <item android:state_enabled="true"
11 android:state_pressed="false"
12 android:state_focused="true">
13 <set>
14 <objectAnimator android:propertyName="translationZ"
15 android:duration="100"
16 android:valueTo="0"
17 android:valueType="floatType"/>
18 </set>
19 </item>
20 </selector>

20. Ripples
1 <selector xmlns:android="http://schemas.android.com/apk/res/android">
2 <item android:state_selected="true"
android:drawable="@drawable/circular_button_selected"/>
3 <item android:drawable="@drawable/circular_button"/>
4 </selector>
5
6 <ripple android:color="#ffff0000">
7 </ripple>

21. Circular Reveal
1 int finalRadius = Math.hypot(myView.getWidth(), myView.getHeight());
2
3 // create the animator for this view (the start radius is zero)
4 Animator anim =
5 ViewAnimationUtils.createCircularReveal(myView, 0, 0, 0, finalRadius);
6 anim.start();

22. Полезные ссылки
View animation
View animation examples
Material animations
Shared Element Activity Transition
Transitions
Android arsenal