2016 06-11 Данил Перевалов. Создание простых анимаций на...
TRANSCRIPT
![Page 1: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/1.jpg)
Как создавать анимациидля Android...и делать это просто
Данил ПереваловAndroid разработчик
в компании LiveTyping
![Page 2: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/2.jpg)
LayoutTransition Honeycomb
android:animateLayoutChanges="true"
![Page 3: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/3.jpg)
![Page 4: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/4.jpg)
Хочу свою анимацию… Можно!
![Page 5: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/5.jpg)
Флаги
● APPEARING — указывает анимацию для тех объектов, которые появляются.● DISAPPEARING — указывает анимацию для тех объектов, которые удаляются.● CHANGE_APPEARING — указывает анимацию для тех элементов, которые
меняются из-за нового элемента.● CHANGE_DISAPPEARING — указывает анимацию для тех элементов, которые
меняются из-за удаленного элемента.● CHANGING - чуть попозже расскажу...
![Page 6: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/6.jpg)
Свой аниматор
LayoutTransition layoutTransition = new LayoutTransition();linearLayout.setLayoutTransition(layoutTransition);layoutTransition.setAnimator(LayoutTransition.DISAPPEARING, ObjectAnimator.ofFloat(view, View.TRANSLATION_X, 0f, width));layoutTransition.setAnimator(LayoutTransition.APPEARING, ObjectAnimator.ofFloat(view, View.TRANSLATION_X, width,0f));
![Page 7: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/7.jpg)
![Page 8: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/8.jpg)
LayoutTransition JB (API 16)появилась возможность анимировать изменения
![Page 9: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/9.jpg)
Как же именно?LayoutTransition layoutTransition = new LayoutTransition();linearLayout.setLayoutTransition (layoutTransition);if (Build.VERSION.SDK_INT >= Build.VERSION_CODES. JELLY_BEAN) { layoutTransition.enableTransitionType(LayoutTransition. CHANGING);}//на кликLinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) view.getLayoutParams();layoutParams.height = isBig ? normSize : bigSize;view.setLayoutParams(layoutParams);isBig = !isBig;
![Page 10: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/10.jpg)
![Page 11: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/11.jpg)
Минусы:● не очень гибок;● нет полного контроля;● нельзя прервать;● для AnimatorSet нужно
выставить точное времяИ как следствие...
![Page 12: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/12.jpg)
TransitionFrameworkПоявился в Kitkat (4.4)
![Page 13: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/13.jpg)
Изменение объектаTransitionManager. beginDelayedTransition(root, transition);
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) view.getLayoutParams();
layoutParams.height = isBig ? normSize : bigSize;
layoutParams.width = isBig ? normSize : bigSize;
view.setLayoutParams(layoutParams);
![Page 14: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/14.jpg)
![Page 15: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/15.jpg)
Основные Transition
● СhangeBounds. Это Transition, который отвечает за изменение координат View внутри layout и его размеров;
● Fade. Известные анимации fade in и fade out;
● AutoTransition. Является свзякой FadeIn,ChangeBound, FadeOut
![Page 16: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/16.jpg)
А можно всех посмотреть?
![Page 17: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/17.jpg)
SlideНовый Transition, который является наследником Visibility, как и Fade. C помощью него появляющаяся в сцене View может «прибегать» из выбранного края. Пример с new Slide(Gravity.LEFT)):
![Page 18: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/18.jpg)
TransitionParagonОписывает задержку начала анимации. Например, при установке CircularPropagation чем View ближе к установленному эпицентру, тем раньше она начинает анимироваться. Задается для Transition через параметр setPropagation.
Пример удаления всех View из FrameLayout с Explode Transition и установленным CircularPropagation (эпицентром ставится точка тапа на экран):
![Page 19: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/19.jpg)
ExplodeВо многом похож на Slide, но View будет выбегать или из некоторого направления, который задается с помощью так называемого эпицентра Transition/
![Page 20: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/20.jpg)
ChangeImageTransform
Transition, который анимирует матричный переход изображения внутри ImageView. С помощью него можно плавно изменять размеры и scaleType изображений. Разберем на примере. Барышню слева мы подвергли операциям ChangeBounds и ChangeImageTransform, тогда как девушке справа достался только ChangeBounds. Невооруженным взглядом заметно, как правая «дергается» в начале анимации.
![Page 21: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/21.jpg)
ChangeClipBounds
Transition, который как бы расширяет границы изображения
![Page 22: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/22.jpg)
Интерполяторы
![Page 23: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/23.jpg)
![Page 24: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/24.jpg)
С интерполяторомTransition transition = new ChangeBounds();
transition.setInterpolator( new BounceInterpolator());
TransitionManager. beginDelayedTransition(root, transition);
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) view.getLayoutParams();
layoutParams.height = isBig ? normSize : bigSize;
layoutParams.width = isBig ? normSize : bigSize;
view.setLayoutParams(layoutParams);
![Page 25: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/25.jpg)
Bounce
![Page 26: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/26.jpg)
Overshoot
![Page 27: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/27.jpg)
Cycle
![Page 28: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/28.jpg)
Еще какой-то
![Page 29: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/29.jpg)
Что я считаю крутым!
![Page 31: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/31.jpg)
MultiStateAnimation
![Page 32: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/32.jpg)
Transitions-Everywhere
![Page 33: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/33.jpg)
FragmentAnimations
![Page 34: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/34.jpg)
EasingInterpolator
![Page 36: 2016 06-11 Данил Перевалов. Создание простых анимаций на андроид](https://reader031.vdocuments.mx/reader031/viewer/2022030306/58cf562b1a28aba17e8b60a9/html5/thumbnails/36.jpg)
Все!!!!!!!!!