Animations with Auto Layout

My presentation on mdevcon 2015 :)

Transcript

1. iOS Animations
   with Auto Layout
   

   View Slide

2. Marin Todorov
   Underplot Apps www.raywenderlich.com
   

   View Slide

3. Books
   

   View Slide

4. Today’s Loot
   

   View Slide

5. Animation in UIKit
   Animating UIViews
   Property animations
   Easy, one-liners
   Built-in & free! alpha = 1.0 alpha = 0.0
   2 seconds duration
   

   View Slide

6. Animations in Auto Layout
   100pt
   10pt
   160pt
   90pt
   (10.0, 100.0) -> (90.0, 160.0)
   

   View Slide

7. NSLayoutConstraint
   bottom = parent.centerY * 1/4 + 50
   firstItem
   firstAttribute
   secondItem
   secondAttribute
   multiplier
   constant
   

   View Slide

8. Animations
   Auto Layout
   

   View Slide

9. 1. Find & Replace constraints
   

   View Slide

10. Constraints
    .Top
    .Bottom
    .Trailing
    .Leading
    .Height
    .Width
    

    View Slide

11. = superview.height * 0.34 + 0.0
    mutable
    read only
    

    View Slide

12. 0.34
    0.34
    0.34
    0.55
    0.23
    0.23
    Auto Layout
    

    View Slide

13. 2.Modify existing constraint
    

    View Slide

14. Details Text
    Details Text
    0.0
    Details Text
    Details Text
    -160
    Auto Layout
    

    View Slide

15. label.Leading = superview.Leading * 0.1 + 0.0
    label.Leading = superview.Leading * 0.1 + 0.0
    label.Leading = superview.Leading * 0.1 - 160.0
    

    View Slide

16. View Slide

17. 3. IB Outlets
    

    View Slide

18. Interface
    Builder
    

    View Slide

19. Giveaway rules
    #mdevcon
    

    View Slide

20. 1. find & replace
    2. modify existing
    3. contstraint outlets
    #mdevcon
    

    View Slide

21. [Homework]. Create new
    constraints
    #mdevcon
    

    View Slide

22. Giveaway
    #mdevcon
    

    View Slide

23. Thank you!
    : @icanzilb
    : icanzilb
    www.ios-animations-by-tutorials.com
    www.ios-animations-by-emails.com
    

    View Slide