What’s New in UIKit Dynamics and Visual Effects

UIDynamic makes the UI to simulate physical world.

• UIDynamicAnimator to Provide the overall context for animation and keep track of behaviors
• behavior can be composed by different behavior as well

UIKit Dynamics

• Support for non-rectangular collision bounds

  enum UIDynamicItemCollisionBoundsType : Int {
    case Rectangle
    case Ellipse
    case Path
  }
  //optional providing path for collisions in UIDynamicItem
  optional var collisionBoundsType: UIDynamicItemCollisionBoundsType { get }
  optional var collisionBoundingPath: UIBezierPath { get }
  

  • Path must be
    • Convex
    • Counter-clockwise wound
    • Non-self intersecting 
• UIDynamicItemGroup
  • Makes multiple dynamic items behave as one
  • Preserves the individual collision bounds
  • Dynamic items in a group must not be added to behaviors individually
  • A group cannot contain other groups
  • Concave or other complex shapes are possible
• UIFieldBehavior—models vector force fields
  • add to a region of the view
  • The field is evaluated at each point within the region
  • Resulting forces are applied by the animator
  • UIGravityBehavior is a field already!
  • Simplified physics, well-tuned for performance; but not for complex animations
• UIDynamicItemBehavior
  • Customize physical properties
  • Applied to one or more items
    • var elasticity: CGFloat
    • var friction: CGFloat
    • var density: CGFloat
    • var resistance: CGFloat
    • var angularResistance: CGFloat
    • New var charge: CGFloat
    • New var anchored: Bool
• UISnapBehavior
  • Snap a view in place
  • Customizable damping
  • Customizable snapPoint
• UIAttachmentBehavior
  • New rope like attachment
  • New Fixed Attachment with attachment anchor
  • New Pin attachment with rotatable range
  • New Sliding attachment with attachment anchor
• New ways to debug dynamic animations
  • (lldb) [view debugEnabled] to show the fields visually
  • debugInterval to adjust time intervals
  • debugAnimationSpeed to speed up or slow down the animation (it still counts so probabaly use 1x)

Visual Effects

UIVibrancyEffect

To create the content that transparent to the blur and show underneath background

let vibrancyEffect = UIVibrancyEffect(forBlurEffect:blurEffect)
let vibrancyView =UIVisualEffectView(effect:vibrancyEffect)
blurView.contentView.addSubview(vibrancyView)
vibrancyView.contentView.addSubview(label)

Animation to the bounds of UIVisualEffectView Animation to the effect of UIVisualEffectView (from style of light to dark )

UIEffectView uses offscreen pass (background task) to process the blur

1. UIEffectView captures the view underneath
2. apply blur effect
3. put the result on the capture area

To provide different snapshot,

UIView.snapshotViewAfterScreenUpdates(afterUpdates:)
UIView.drawViewHierarchyInRect(rect:, afterScreenUpdates:)
UIScreen.snapshotViewAfterScreenUpdates()

To debug the effect view, (lldb) po [myEffectView _whatsWrongWithThisEffect]

Fixing broken effects

• Rearrange view hierarchy Effective for Alpha and Masking
• Mask views individually
• Snapshot the window or screen

UI Dynamics and Auto layout

UIKit Dynamics outside

dynamicsView.translatesAutoresizingMaskIntoConstraints = true

Auto Layout inside

innerView.leadingAnchor.constraintEqualToAnchor(dynamicsView.leadingAnchor)

Custom UIDynamicItem

• Subclass NSObject
• Conform to UIDynamicItem
• Provide .bounds
• Update constraints when .center and .transform change