Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Animations with Auto Layout

Animations with Auto Layout

My presentation on mdevcon 2015 :)

Marin Todorov

March 06, 2015
Tweet

More Decks by Marin Todorov

Other Decks in Technology

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