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 full-size slide

  2. Marin Todorov
    Underplot Apps www.raywenderlich.com

    View full-size slide

  3. Today’s Loot

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Animations
    Auto Layout

    View full-size slide

  8. 1. Find & Replace constraints

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 0.34
    0.34
    0.34
    0.55
    0.23
    0.23
    Auto Layout

    View full-size slide

  12. 2.Modify existing constraint

    View full-size slide

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

    View full-size slide

  14. 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 full-size slide

  15. 3. IB Outlets

    View full-size slide

  16. Interface
    Builder

    View full-size slide

  17. Giveaway rules
    #mdevcon

    View full-size slide

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

    View full-size slide

  19. [Homework]. Create new
    constraints
    #mdevcon

    View full-size slide

  20. Giveaway
    #mdevcon

    View full-size slide

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

    View full-size slide