UIKit Dynamics

Dynamic Animator

Let’s get started with UIDynamicAnimator, it is an object with which you can add physics-related capabilities and animations for the underlying UIDynamicItem.

Some of the methods are very useful and necessary to apply UIDynamics:

init(referenceView view: UIView)			// To initialize animator
addBehavior(_ behavior: UIDynamicBehavior)	// To add a behavior
removeBehavior(_ behavior: UIDynamicBehavior)	// To remove particular behavior
removeAllBehaviors()						// To remove all attached behaviors

UIDynamicItem

It is set of methods that helps any object to being eligible for participation in UIKit Dynamics.

1. UIDynamicItemBehavior: Its is a class which helps to configure your animations for one or more dynamic items.
2. UIDynamicItemGroup: It groups together to manipulate group of dynamic items & treat them as a single unit.

Without wasting much time let’s start the fun part….coding!

Here is the listing of UIKit Dynamics variables that we will use in entire project.

var dynamicAnimator   : UIDynamicAnimator!
var gravityBehavior   : UIGravityBehavior!
var collisionBehavior : UICollisionBehavior!
var bouncingBehavior  : UIDynamicItemBehavior!
var pushBehavior: UIPushBehavior!
var snapBehavior: UISnapBehavior!
var attachmentBehavior : UIAttachmentBehavior!

2.1 UIGravityBehavior

Use: To apply gravity-like force to object.

Here’s the code how you can add Gravity behaviour to squareView

dynamicAnimator = UIDynamicAnimator(referenceView: self.view)
gravityBehavior  = UIGravityBehavior(items: [squareView])
dynamicAnimator.addBehavior(gravityBehavior)
gravityBehavior.gravityDirection = CGVector(dx: 0, dy: 1)    // For downward

//gravityBehavior.gravityDirection = CGVector(dx: 0, dy: -1) // For upward
//gravityBehavior.gravityDirection = CGVector(dx: 1, dy: 0)  // For left-side
//gravityBehavior.gravityDirection = CGVector(dx: -1, dy: 0) // For right-side

Only setting gravity behaviour is not enough, because by applying this code the squareView falls below the screen. To fix this we have to set some boundaries where squareView will collide and do not exit the screen.
In below code we have given screen boundary to collide with.

collisionBehavior = UICollisionBehavior(items: [squareView])
collisionBehavior.translatesReferenceBoundsIntoBoundary = true
dynamicAnimator.addBehavior(collisionBehavior)

You can also make object bounce by adding elasticity to its behaviour.

bouncingBehavior = UIDynamicItemBehavior(items: [squareView])
bouncingBehavior.elasticity = 0.70
dynamicAnimator.addBehavior(bouncingBehavior)

Here’s some more properties of UIGravityBehavior

gravityBehavior.angle = CGFloat(90 * (Double.pi/180)) // 90 Degree To RADIANS
gravityBehavior.magnitude = CGFloat(5)                // Gravity force
// OR
gravityBehavior.setAngle(CGFloat(180 * (Double.pi/180)), magnitude: 0.2)

2.2 UIPushBehavior

Use: Applies a force to its dynamic items to change its position accordingly to its mentioned direction.

To apply force which push the squareView up-side, we need to define the direction as well as with what force/magnitude it pushed.

pushBehavior = UIPushBehavior(items: [squareView], mode: .continuous)
pushBehavior.magnitude = 0.1                         // Speed/force
pushBehavior.pushDirection = CGVector(dx: 0, dy: -1) // To up side
pushBehavior.setTargetOffsetFromCenter(UIOffset(horizontal: -10, vertical: 0), for: squareView)                                     // To spin clockwise
dynamicAnimator.addBehavior(pushBehavior)

2.3 UICollisionBehavior

Use: To manage collisions of dynamic items with each other within the specified boundaries are performed using this behaviour.

How can we make collisions? Let’s do it by falling multiple views onto each other for fun.

// To fall the views we will add UIGravityBehavior
// To collide that views we are going to use UICollisionBehavior
gravityBehavior = UIGravityBehavior(items: squareViews)
collisionBehavior = UICollisionBehavior(items: squareViews)
collisionBehavior.collisionMode = .everything
// collisionBehavior.collisionMode = .boundaries 
// collisionBehavior.collisionMode = .items
dynamicAnimator.addBehavior(gravityBehavior)
dynamicAnimator.addBehavior(collisionBehavior)

From above code all the views will fall and exit the screen, so we need to set boundary where they can collide.

// It sets a boundary of the whole refrence that mentioned in dynamicAnimator
collisionBehavior.translatesReferenceBoundsIntoBoundary = true

Or you can just boundary one by one

// To set bottom of the screen as a boundary
collisionBehavior.addBoundary(withIdentifier: "bottomBoundary" as NSCopying, from: CGPoint(x: 0, y: self.view.frame.size.height), to: CGPoint(x: self.view.frame.size.width, y: self.view.frame.size.height))

At last you can set boundary using:

collisionBehavior.setTranslatesReferenceBoundsIntoBoundary(with: UIEdgeInsets(top: selfFrame.maxY, left: selfFrame.maxX, bottom: selfFrame.maxY, right: selfFrame.maxX))

2.4 UISnapBehavior

Use: It tends to behave like a spring, which starts with damping motion and settles at a specific point over the time.
As we all know snapping means performing something quickly or suddenly. This behavior do the same, dynamic item snapped from its position to a snap point as per its damping value.

Let simply snap the three buttons, create a collection outlet for the buttons and add snap to each buttons by following code:

for button in buttons {
    let originalPosition = button.center
    button.center = CGPoint(x: self.view.frame.width / 2, y: -button.frame.height)
    snapBehavior = UISnapBehavior(item: button, snapTo: originalPosition)
    snapBehavior.damping = 0.2      // amount of oscillation of dynamic item
    dynamicAnimator.addBehavior(snapBehavior)
}

Buttons will arrive from the top of the screen and snaps to the center point of the button’s position. Damping plays the main role, because its value indicates how many oscillation does dynamic item performs during snapping.

2.5 UIAttachmentBehavior

Use: It is an object that binds a relationship between an object and an anchor point, in our scenario it’s going to be a relationship between view and an anchor.

UIAttachmentBehavior behaves in the same way as pendulum. An anchor and the other object that oscillates (move or swing) with respect to anchorPoint.

We need squareView to fall and swing it with respect to anchorView.

gravityBehavior = UIGravityBehavior(items: [attachedView])
attachmentBehavior = UIAttachmentBehavior(item: attachedView, attachedToAnchor: anchorView.frame.origin)
attachmentBehavior.damping = 0.5
dynamicAnimator.addBehavior(gravityBehavior)
dynamicAnimator.addBehavior(attachmentBehavior)

To perform amazing animation you can use more properties to UIAttachmentBehavior:

attachedBehaviorType	// type of attachment behavior
frequency			// oscillation for the attachment behavior
length			// Distance in points b/w to attached objects
frictionTorque		// Amount of force needed to overcome rotational force around anchorPoint
attachmentRange		// For range of motion of attachment behavior

Conclusion : –

Thank you for reading this article, I hope you have learned simple yet cool animations using UIDynamics, you can download project from Github also feel free to contribute in this project.