Самвел Меджлумян – Выходные с Лотти

Transcript

1. vk/telegram/github: @smejl Выходные с Лотти
2. План доклада ❖ Про жизнь ❖ Инструменты в iOS ❖ Про Лотти ❖ Мой кейс и проблемы ❖ Альтернативы и выводы 2
3. Анимация 3
4. – Неизвестный автор “Красивая цитата про то, что движение – это жизнь”
6. Motion Design 6 medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc
7. Зачем ❖ Привлечь внимание к объекту ❖ Показать сценарий ❖ Показать переходы ❖ Продемонстрировать завершённость 7
8. Анимация как часть UX ❖ Имеют конкретную цель ❖ Являются частью вашего UI ❖ Не выбиваются и не раздражают 8
9. Анимационные инструменты в iOS 9
10. OpenGL ❖ Добавить OpenGLES и QuartzCore ❖ Установить LayerClass для вашего view как CAEAGLLayer ❖ Создать OpenGL context ❖ Создать буфер для рендеринга ❖ Создать буфер кадра ❖ Определить метод render ❖ … 10
12. Анимационные инструменты в iOS 12
13. Александр Зимин – Анимация как средство самовыражения 13
14. CABasicAnimation 14
16. 16 func positionAnimation(from: CGPoint, to: CGPoint) -> CABasicAnimation { let animation = CABasicAnimation(keyPath: "position") animation.fromValue = from animation.toValue = to animation.repeatCount = .infinity animation.autoreverses = true animation.duration = 0.5 return animation }
17. CAKeyFrameAnimation 17 func shake() { let shake: CAKeyframeAnimation = CAKeyframeAnimation(keyPath: "transform") shake.values = [NSValue(caTransform3D: CATransform3DMakeTranslation(-6.0, 0.0, 0.0)), NSValue(caTransform3D: CATransform3DMakeTranslation(6.0, 0.0, 0.0))] shake.autoreverses = true shake.repeatCount = 2.0 shake.duration = 0.07 self.layer.add(shake, forKey: "shake") }
18. CATransition 18 if animated { let animation = CATransition() animation.type = kCATransitionFade animation.duration = AnimationDuration.normal layer.add(animation, forKey: nil) }
19. CAAnimationGroup 19 let positionAnimation = propertyAnimation(path: “position", duration: duration, toValue: position) let opacityAnimation = propertyAnimation(path: "opacity", duration: duration, toValue: opacity) let animationGroup = CAAnimationGroup() animationGroup.animations = [positionAnimation, opacityAnimation] animationGroup.duration = duration layer.add(animationGroup, forKey: nil)
20. Hello, Lottie! 20
21. Adobe After Effects 21
22. www.lottiefiles.com 22
23. Просмотра на девайсе 23 https://itunes.apple.com/us/app/lottie-preview/id1231821260?mt=8
27. Зачем ❖ Размер анимации ❖ Мутация на лету ❖ Ресайз ❖ Интеграция с backend ❖ Меньше рутины при разработке 27
30. Мы так не хотим ❖ Долго ❖ Больно ❖ Неоправданно 30
32. С чем мы столкнулись ❖ Нужно доработать напильником ❖ Неподдерживаемые эффекты ❖ Большой JSON - зло 32
33. Альтернативы ❖ Делать всё ручками ❖ Facebook Keyframes ❖ Gifs ❖ Извращение 33
34. –iOS разработчик “Цитата о правильности выбора в жизни iOS разработчика” vk/telegram/github: @smejl