Top Banner
Motion Design for Developers UIKit Dynamics
27

Motion Design For Developers

Apr 15, 2017

Download

Mobile

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Motion Design For Developers

Motion Design for Developers

UIKit Dynamics

Page 2: Motion Design For Developers

План

• Понятие Motion Design

• UIKit Dynamics

• Core Animations

• Сторонние инструменты

Page 3: Motion Design For Developers

Основы Motion Design

• Фичическе свойства (масса, сила трения, гравитация)

• Импульсное движение (easy in/easy out)

• Траектории

• Тайминг

Page 4: Motion Design For Developers

Gravity

Page 5: Motion Design For Developers

Collision detection

Page 6: Motion Design For Developers

Motion Behaviours

Page 7: Motion Design For Developers

Инструменты разработчика• UIView Animations и Core Animations

• UIKit Dynamics

• Сторонние инструменты и библиотеки

Page 8: Motion Design For Developers

UIKit Dynamics

Page 9: Motion Design For Developers

UIKit Dynamics

• 2d система анимациия с физическим движком

• Декларативная и совместимая

• Не заменяет Core Animation или UIView Animations

Page 10: Motion Design For Developers

КомпонентыUIDynamicAnimator

Page 11: Motion Design For Developers

КомпонентыUIDynamicAnimator

UIGravityBehaviour UIAttachmentBehaviour

UICollisionBehaviour

UISnapBehaviour

UIFieldBehaviourUIPushBehaviour

Page 12: Motion Design For Developers

КомпонентыUIDynamicAnimator

UIGravityBehaviour UIAttachmentBehaviour

UICollisionBehaviour

UIDynamicGroupUIDynamicItem

UISnapBehaviour

UIFieldBehaviour

UIDynamicItemBehaviour

UIPushBehaviour

Page 13: Motion Design For Developers

Collision Behaviour

• Bounds Types: Rectangle, Ellipse, Custom Path

• Только выпуклые фигуры

• Сложные коллизии через UIDynamicItemGroup

Page 14: Motion Design For Developers

Forces

• Силы моделируются как вектор: длинна и направление

• UIPushBehaviour реализует силы

• Конечные и бесконечные

Page 15: Motion Design For Developers

Физические поля

• Гравитация - это линейное физическое поле которое связывает вектор движения с каждой точкой объекта

Page 16: Motion Design For Developers

UIFieldBehaviour• UIFieldBehaviour может быть добавлен к региону вашей вьюхи

• UIGravityBehaviour это UIFieldBehaviour

• Хорошо настраиваемая физическая среда

Page 17: Motion Design For Developers

Виды полей

Page 18: Motion Design For Developers

Бесполезный пример

Page 19: Motion Design For Developers

Полезный пример

Page 20: Motion Design For Developers

UIAttachmentBehaviour• Расстояние

• Настраиваемые затухание и частота

Page 21: Motion Design For Developers

UIAttachmentBehaviour• LimitAttachment

• Ведет себя похоже на веревку между объектами

• Точка прикрепления относительно каждого объекта

Page 22: Motion Design For Developers

UIAttachmentBehaviour• FixedAttachment

• Точка прикрепления относительно reference view

• Нет движения между объектами

• Применяется для объектов, которые потом распадаются на части

Page 23: Motion Design For Developers

UIAttachmentBehaviour• PinAttachment

• Точка прикрепления относительно reference view

• Могут вращаться вокруг этой точки

• Радиус вращения регулируется

Page 24: Motion Design For Developers

UISnapBehaviour

• Настройка затухания

• Настройка точки

Page 25: Motion Design For Developers

Комбинирование

Page 26: Motion Design For Developers

Demo

Page 27: Motion Design For Developers

UIKit Dynamics и AutoLayout