iOS UIKit Dynamics Flick View Based on Gesture Velocity
Example
This example shows how to have a view track a pan gesture and depart in a physics-based manner.
Swift
class ViewController: UIViewController
{
// Adjust to change speed of view from flick
let magnitudeMultiplier: CGFloat = 0.0008
lazy var dynamicAnimator: UIDynamicAnimator =
{
let dynamicAnimator = UIDynamicAnimator(referenceView: self.view)
return dynamicAnimator
}()
lazy var gravity: UIGravityBehavior =
{
let gravity = UIGravityBehavior(items: [self.orangeView])
return gravity
}()
lazy var collision: UICollisionBehavior =
{
let collision = UICollisionBehavior(items: [self.orangeView])
collision.translatesReferenceBoundsIntoBoundary = true
return collision
}()
lazy var orangeView: UIView =
{
let widthHeight: CGFloat = 40.0
let orangeView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: widthHeight, height: widthHeight))
orangeView.backgroundColor = UIColor.orange
self.view.addSubview(orangeView)
return orangeView
}()
lazy var panGesture: UIPanGestureRecognizer =
{
let panGesture = UIPanGestureRecognizer(target: self, action: #selector(self.handlePan(sender:)))
return panGesture
}()
lazy var attachment: UIAttachmentBehavior =
{
let attachment = UIAttachmentBehavior(item: self.orangeView, attachedToAnchor: .zero)
return attachment
}()
override func viewDidLoad()
{
super.viewDidLoad()
dynamicAnimator.addBehavior(gravity)
dynamicAnimator.addBehavior(collision)
orangeView.addGestureRecognizer(panGesture)
}
override func viewDidLayoutSubviews()
{
super.viewDidLayoutSubviews()
orangeView.center = view.center
dynamicAnimator.updateItem(usingCurrentState: orangeView)
}
func handlePan(sender: UIPanGestureRecognizer)
{
let location = sender.location(in: view)
let velocity = sender.velocity(in: view)
let magnitude = sqrt((velocity.x * velocity.x) + (velocity.y * velocity.y))
switch sender.state
{
case .began:
attachment.anchorPoint = location
dynamicAnimator.addBehavior(attachment)
case .changed:
attachment.anchorPoint = location
case .cancelled, .ended, .failed, .possible:
let push = UIPushBehavior(items: [self.orangeView], mode: .instantaneous)
push.pushDirection = CGVector(dx: velocity.x, dy: velocity.y)
push.magnitude = magnitude * magnitudeMultiplier
dynamicAnimator.removeBehavior(attachment)
dynamicAnimator.addBehavior(push)
}
}
}
Objective-C
@interface ViewController ()
@property (nonatomic, assign) CGFloat magnitudeMultiplier;
@property (nonatomic, strong) UIDynamicAnimator *dynamicAnimator;
@property (nonatomic, strong) UIGravityBehavior *gravity;
@property (nonatomic, strong) UICollisionBehavior *collision;
@property (nonatomic, strong) UIView *orangeView;
@property (nonatomic, strong) UIPanGestureRecognizer *panGesture;
@property (nonatomic, strong) UIAttachmentBehavior *attachment;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
[self.dynamicAnimator addBehavior:self.gravity];
[self.dynamicAnimator addBehavior:self.collision];
[self.orangeView addGestureRecognizer:self.panGesture];
// Adjust to change speed of view from flick
self.magnitudeMultiplier = 0.0008f;
}
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
self.orangeView.center = self.view.center;
[self.dynamicAnimator updateItemUsingCurrentState:self.orangeView];
}
- (void)handlePan:(UIPanGestureRecognizer *)sender
{
CGPoint location = [sender locationInView:self.view];
CGPoint velocity = [sender velocityInView:self.view];
CGFloat magnitude = sqrt((velocity.x * velocity.x) + (velocity.y * velocity.y));
if (sender.state == UIGestureRecognizerStateBegan)
{
self.attachment.anchorPoint = location;
[self.dynamicAnimator addBehavior:self.attachment];
}
else if (sender.state == UIGestureRecognizerStateChanged)
{
self.attachment.anchorPoint = location;
}
else if (sender.state == UIGestureRecognizerStateCancelled ||
sender.state == UIGestureRecognizerStateEnded ||
sender.state == UIGestureRecognizerStateFailed ||
sender.state == UIGestureRecognizerStatePossible)
{
UIPushBehavior *push = [[UIPushBehavior alloc] initWithItems:@[self.orangeView] mode:UIPushBehaviorModeInstantaneous];
push.pushDirection = CGVectorMake(velocity.x, velocity.y);
push.magnitude = magnitude * self.magnitudeMultiplier;
[self.dynamicAnimator removeBehavior:self.attachment];
[self.dynamicAnimator addBehavior:push];
}
}
#pragma mark - Lazy Init
- (UIDynamicAnimator *)dynamicAnimator
{
if (!_dynamicAnimator)
{
_dynamicAnimator = [[UIDynamicAnimator alloc]initWithReferenceView:self.view];
}
return _dynamicAnimator;
}
- (UIGravityBehavior *)gravity
{
if (!_gravity)
{
_gravity = [[UIGravityBehavior alloc]initWithItems:@[self.orangeView]];
}
return _gravity;
}
- (UICollisionBehavior *)collision
{
if (!_collision)
{
_collision = [[UICollisionBehavior alloc]initWithItems:@[self.orangeView]];
_collision.translatesReferenceBoundsIntoBoundary = YES;
}
return _collision;
}
- (UIView *)orangeView
{
if (!_orangeView)
{
CGFloat widthHeight = 40.0f;
_orangeView = [[UIView alloc]initWithFrame:CGRectMake(0.0, 0.0, widthHeight, widthHeight)];
_orangeView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:_orangeView];
}
return _orangeView;
}
- (UIPanGestureRecognizer *)panGesture
{
if (!_panGesture)
{
_panGesture = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(handlePan:)];
}
return _panGesture;
}
- (UIAttachmentBehavior *)attachment
{
if (!_attachment)
{
_attachment = [[UIAttachmentBehavior alloc]initWithItem:self.orangeView attachedToAnchor:CGPointZero];
}
return _attachment;
}
@end
