UIKit Dynamics Tutorial: Getting Started
Learn how to make your user interfaces in iOS feel realistic with this UIKit Dynamics tutorial, updated for Swift! By James Frost.
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Sign up/Sign in
With a free Kodeco account you can download source code, track your progress, bookmark, personalise your learner profile and more!
Create accountAlready a member of Kodeco? Sign in
Contents
UIKit Dynamics Tutorial: Getting Started
25 mins
User Interaction
As you’ve just seen, you can dynamically add and remove behaviours when your physics system is already in motion. In this final section, you’ll add another type of dynamics behaviour, UISnapBehavior
, whenever the user taps the screen. A UISnapBehavior
makes an object jump to a specified position with a bouncy spring-like animation.
Remove the code that you added in the last section: both the firstContact
property and the if
statement in collisionBehavior()
. It’s easier to see the effect of the UISnapBehavior
with only one square on screen.
Add two properties above viewDidLoad
:
var square: UIView!
var snap: UISnapBehavior!
This will keep track of your square view, so that you can access it from elsewhere in the view controller. You’ll be using the snap
object next.
In viewDidLoad
, remove the let
keyword from the declaration of the square, so that it uses the new property instead of a local variable:
square = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
Finally, add an implementation for touchesEnded
, to create and add a new snap behavior whenever the user touches the screen:
override func touchesEnded(touches: NSSet, withEvent event: UIEvent) {
if (snap != nil) {
animator.removeBehavior(snap)
}
let touch = touches.anyObject() as UITouch
snap = UISnapBehavior(item: square, snapToPoint: touch.locationInView(view))
animator.addBehavior(snap)
}
This code is quite straightforward. First, it checks if there’s an existing snap behavior and removes it. Then creates a new snap behavior which snaps the square to the location of the user’s touch, and adds it to the animator.
Build and run your app. Try tapping around; the square should zoom into place wherever you touch!
Where To Go From Here?
At this point you should have a solid understanding of the core concepts of UIKit Dynamics. You can download the final DynamicsDemo project from this tutorial for further study.
UIKit Dynamics brings the power of a physics engine to your iOS apps. With subtle bounces and springs and gravity, you can bring life to your apps and make them feel more real and immersive for your users.
If you’re interested in learning more about UIKit Dynamics, check out our book iOS 7 By Tutorials. The book takes what you’ve learned so far and goes a step further, showing you how to apply UIKit Dynamics in an real world scenario:
The user can pull up on a recipe to take a peek at it, and when they release the recipe, it will either drop back into the stack, or dock to the top of the screen. The end result is an application with a real-world physical feel.
I hope you enjoyed this UIKit Dynamics tutorial – we think it’s pretty cool and look forward to seeing the creative ways you use it in your apps. If you have any questions or comments, please join the forum discussion below!