Animations (Lecture 17 – animations)

AnimationsAndroid

Константин Золотов

План

Animation Frameworks (Drawable Animations, View Animations, Propertry Animations)Layout Transitions (Layout Animations, Transitions Framework)Window Transitions (Custom Animations, Shared Elements)Moar (Ripples, Reveals, Links)

Animation Frameworks

Drawable Animations - покадровая анимацияView Animations - анимация отображения viewProperty Animations - изменение свойств

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()

+/- Drawable Animations

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

View Animations1 <?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);

Чем плоха система

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

Property Animations1 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();

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

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

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

Transitions Framework

Создание сцен 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);

Создание сцен

сцена 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 />

Создание сцены из Layout1 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);

Создание 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();

Использование Transition

1. Сцены

TransitionManager.go(mEndingScene, mFadeTransition);

1. Вне сцен

TransitionManager.beginDelayedTransition(mRootView, mFade); mRootView.addView(mLabelText);

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 });

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>

Ripples1 <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>

Circular Reveal1 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();

Полезные ссылки

View animationView animation examplesMaterial animationsShared Element Activity TransitionTransitionsAndroid arsenal