iOS Animations By Tutorials

395 Pages·2016·13.06 MB·English

by  Marin Todorov

iOS Animations by Tutorials
iOS Animations by Tutorials Third Edition
Marin Todorov
Copyright ©2016 Razeware LLC.
Notice of Rights
All rights reserved. No part of this book or corresponding materials (such as text,
images, or source code) may be reproduced or distributed by any means without
prior written permission of the copyright owner.
Notice of Liability
This book and all corresponding materials (such as source code) are provided on an
"as is" basis, without warranty of any kind, express of implied, including but not
limited to the warranties of merchantability, fitness for a particular purpose, and
noninfringement. In no event shall the authors or copyright holders be liable for any
claim, damages or other liability, whether in action of contract, tort or otherwise,
arising from, out of or in connection with the software or the use of other dealing in
the software.
Trademarks
All trademarks and registered trademarks appearing in this book are the property of
their own respective owners.
raywenderlich.com 2
iOS Animations by Tutorials
Dedications
"To my father."
— Marin Todorov
raywenderlich.com 3
iOS Animations by Tutorials
About the team
Marin Todorov is the author of this book. Marin is one of the
founding members of the raywenderlich.com tutorial team. He is
an independent iOS consultant and publisher, and also has a
background in web and desktop development. Besides crafting
code, Marin also enjoys blogging, writing books and speaking at
conferences. He happily open sources code.
Erik Kerber is the tech editor of this book. Erik is a software
developer in Minneapolis, MN, and the lead iOS developer for the
Target app. He does his best to balance a life behind the keyboard
with cycling, hiking, scuba diving, and traveling.
Rich Turton is an iOS developer for MartianCraft, prolific Stack
Overflow participant and author of a development blog, Command
Shift. When he's not in front of a computer he is usually building
Lego horse powered spaceships (don't ask!) with his daughter.
Chris Belanger is the editor of this book. Chris is the Book Team
Lead and Lead Editor for raywenderlich.com. If there are words to
wrangle or a paragraph to ponder, he‘s on the case. When he kicks
back, you can usually find Chris with guitar in hand, looking for the
nearest beach, or exploring the lakes and rivers in his part of the
world in a canoe.
Vicki Wenderlich created many of the illustrations in this book.
Vicki discovered a love of digital art many years ago, and has been
making app art and digital illustrations ever since. She is
passionate about helping people pursue their dreams, and makes
app art for developers on her website http://
www.gameartguppy.com.
raywenderlich.com 4
iOS Animations by Tutorials
Table of Contents: Overview
Introduction................................................................................ 13
Section I: View Animations.......................................... 19
Chapter 1: Getting Started with View Animations... 22
Chapter 2: Springs.......................................................... 35
Chapter 3: Transitions..................................................... 44
Chapter 4: View Animations in Practice...................... 57
Chapter 5: Keyframe animations................................. 69
Section II: Auto Layout................................................. 78
Chapter 6: Introduction to Auto Layout....................... 80
Chapter 7: Animating Constraints ................................ 99
Section III: Layer Animations..................................... 118
Chapter 8: Getting Started with Layer
Animations ...................................................................... 121
Chapter 9: Animation Keys and Delegates ............. 142
Chapter 10: Groups and Advanced Timing ............ 153
Chapter 11: Layer Springs ......................................... 162
Chapter 12: Layer Keyframe Animations and
Struct Properties............................................................ 174
Chapter 13: Shapes and Masks ................................ 180
Chapter 14: Gradient Animations............................. 193
Chapter 15: Stroke and path animations................. 201
Chapter 16: Replicating Animations.......................... 210
raywenderlich.com 5
iOS Animations by Tutorials
Section IV: View Controller Transition Animations.... 227
Chapter 17: Presentation Controller &
Orientation Animations ................................................ 229
Chapter 18: UINavigationController Custom
Transition Animations.................................................... 249
Chapter 19: Interactive UINavigationController
Transitions ....................................................................... 263
Section V: Animations with
UIViewPropertyAnimator .......................................... 273
Chapter 20: Getting Started with
UIViewPropertyAnimator............................................. 275
Chapter 21: Intermediate Animations with
UIViewPropertyAnimator............................................. 290
Chapter 22: Interactive Animations with
UIViewPropertyAnimator............................................. 306
Chapter 23: UIViewPropertyAnimator View
Controller Transitions .................................................... 323
Section VI: 3D Animations......................................... 339
Chapter 24: Simple 3D Animations........................... 343
Chapter 25: Intermediate 3D animations ................ 353
Section VII: Further Types of Animations .................. 366
Chapter 26: Particle Emitters...................................... 368
Chapter 27: Frame Animations with UIImageView. 385
Conclusion ............................................................................... 395
raywenderlich.com 6
iOS Animations by Tutorials
Table of Contents: Extended
Introduction................................................................................ 13
What you need.................................................................................................................. 14
Who this book is for.......................................................................................................... 14
How to use this book......................................................................................................... 15
What’s in store................................................................................................................... 15
Source code and forums................................................................................................... 16
Book updates...................................................................................................................... 17
License.................................................................................................................................. 17
About the cover.................................................................................................................. 18
Section I: View Animations.......................................... 19
Chapter 1: Getting Started with View Animations ........... 22
Your first animation............................................................................................................ 23
Animatable properties...................................................................................................... 27
Animation options.............................................................................................................. 29
Challenges........................................................................................................................... 33
Chapter 2: Springs.................................................................. 35
Spring animations.............................................................................................................. 36
Animating user interactions.............................................................................................. 39
Challenges........................................................................................................................... 42
Chapter 3: Transitions............................................................. 44
Example transitions............................................................................................................ 44
Mixing in transitions........................................................................................................... 48
Challenges........................................................................................................................... 52
Chapter 4: View Animations in Practice.............................. 57
Crossfading animations.................................................................................................... 58
Cube transitions.................................................................................................................. 61
Fade and bounce transitions............................................................................................ 65
Challenges........................................................................................................................... 67
Chapter 5: Keyframe animations ......................................... 69
Keyframe animations........................................................................................................ 70
raywenderlich.com 7
iOS Animations by Tutorials
Challenges........................................................................................................................... 76
Section II: Auto Layout................................................. 78
Chapter 6: Introduction to Auto Layout ............................... 80
Auto Layout to the rescue................................................................................................. 82
Auto Layout Constraints.................................................................................................... 83
Finalizing the UI.................................................................................................................. 95
Challenges........................................................................................................................... 98
Chapter 7: Animating Constraints......................................... 99
Animating Interface Builder constraints....................................................................... 100
Inspecting and animating constraints........................................................................... 105
Animating by replacing constraints.............................................................................. 108
Adding menu content...................................................................................................... 112
Animating dynamically created views........................................................................ 113
Challenges........................................................................................................................ 117
Section III: Layer Animations..................................... 118
Chapter 8: Getting Started with Layer Animations........ 121
Animatable properties................................................................................................... 121
Your first layer animation.............................................................................................. 124
More elaborate layer animations................................................................................ 127
Debugging basic animations......................................................................................... 131
Animations vs. real content............................................................................................ 134
Best practices................................................................................................................... 137
Challenges........................................................................................................................ 138
Chapter 9: Animation Keys and Delegates...................... 142
Introducing animation delegates.................................................................................. 142
Key-value coding compliance....................................................................................... 143
Animation Keys................................................................................................................ 146
Challenge.......................................................................................................................... 150
Chapter 10: Groups and Advanced Timing..................... 153
CAAnimationGroup......................................................................................................... 153
Animation easing............................................................................................................. 155
More timing options........................................................................................................ 157
raywenderlich.com 8
iOS Animations by Tutorials
Challenges........................................................................................................................ 160
Chapter 11: Layer Springs.................................................. 162
Damped harmonic oscillators........................................................................................ 162
UIKit vs. Core Animation springs................................................................................... 165
Creating your first layer spring animation................................................................. 166
Spring animation properties......................................................................................... 168
Specific layer properties............................................................................................... 172
Challenges........................................................................................................................ 173
Chapter 12: Layer Keyframe Animations and Struct
Properties ............................................................................... 174
Introducing keyframe animations................................................................................. 174
Creating a layer keyframe animation........................................................................ 175
Animating struct values................................................................................................... 176
Intermediate keyframe animations.............................................................................. 178
Chapter 13: Shapes and Masks......................................... 180
Finishing up the avatar view......................................................................................... 182
Creating the bounce-off animation............................................................................. 184
Morphing shapes............................................................................................................. 187
Challenges........................................................................................................................ 189
Chapter 14: Gradient Animations ..................................... 193
Drawing your first gradient........................................................................................... 194
Animating gradients ....................................................................................................... 196
Creating a text mask...................................................................................................... 198
Challenges........................................................................................................................ 199
Chapter 15: Stroke and path animations......................... 201
Creating interactive stroke animations........................................................................ 202
Animating both stroke ends........................................................................................... 205
Creating path keyframe animations............................................................................ 207
Section conclusion............................................................................................................ 209
Chapter 16: Replicating Animations.................................. 210
Replicating like rabbits.................................................................................................. 212
Replicating multiple animations.................................................................................... 217
raywenderlich.com 9
iOS Animations by Tutorials
Animating CAReplicatorLayer properties................................................................... 219
Interactive replication animations................................................................................ 223
Challenges........................................................................................................................ 226
Section IV: View Controller Transition Animations.... 227
Chapter 17: Presentation Controller & Orientation
Animations .............................................................................. 229
Looking through the starter project.............................................................................. 230
Behind the scenes of custom transitions....................................................................... 231
Implementing transition delegates............................................................................... 232
Creating your transition animator................................................................................ 235
Device orientation transition.......................................................................................... 245
Challenges........................................................................................................................ 247
Chapter 18: UINavigationController Custom Transition
Animations .............................................................................. 249
Introducing Logo Reveal................................................................................................. 250
Custom navigation transitions........................................................................................ 252
The navigation controller delegate.............................................................................. 253
Adding a custom reveal animation.............................................................................. 255
Taking care of the rough edges................................................................................... 258
Challenges........................................................................................................................ 261
Chapter 19: Interactive UINavigationController
Transitions ............................................................................... 263
Creating an interactive transition................................................................................. 264
Handling the pan gesture.............................................................................................. 264
Using interactive animator classes............................................................................... 265
Calculating your animation’s progress........................................................................ 267
Handling early termination........................................................................................... 269
Challenges........................................................................................................................ 272
raywenderlich.com 10