RippleEffectView：加载时实现与背景的涟漪效应（连锁反应）RippleEffectView：加载时实现与背

Not only Uber-like animated loading screen background.

RippleEffectView inspired by RayWenderlich.com article How To Create an Uber Splash Screen

rippleEffectView.tileImageRandomizationClosure = { rows, columns, row, column, image in
  let newImage = image.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
  UIGraphicsBeginImageContextWithOptions(image.size, false, newImage.scale)
  UIColor.random.set()
  newImage.drawInRect(CGRectMake(0, 0, image.size.width, newImage.size.height));
  if let titledImage = UIGraphicsGetImageFromCurrentImageContext() {
    UIGraphicsEndImageContext()
    return titledImage
  }
  UIGraphicsEndImageContext()
  return image
}

rippleEffectView.magnitude = -0.6

rippleEffectView.magnitude = 0.2

rippleEffectView.tileImageCustomizationClosure = { rows, columns, row, column, image in
  let newImage = image.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
  UIGraphicsBeginImageContextWithOptions(image.size, false, newImage.scale)

  let xmiddle = (columns % 2 != 0) ? columns/2 : columns/2 + 1
  let ymiddle = (rows % 2 != 0) ? rows/2 : rows/2 + 1

  let xoffset = abs(xmiddle - column)
  let yoffset = abs(ymiddle - row)

  UIColor(hue: 206/360.0, saturation: 1, brightness: 0.95, alpha: 1).colorWithAlphaComponent(1.0 - CGFloat((xoffset + yoffset)) * 0.1).set()

  newImage.drawInRect(CGRectMake(0, 0, image.size.width, newImage.size.height));
  if let titledImage = UIGraphicsGetImageFromCurrentImageContext() {
    UIGraphicsEndImageContext()
    return titledImage
  }
  UIGraphicsEndImageContext()
  return image
}

rippleEffectView.rippleType = .Heartbeat
rippleEffectView.magnitude = 0.2

Swift 2.3
iOS 9.3+
Xcode 7.3+

Copy RippleEffectView.swiftto your project. Copy file if needed.

Add new RippleEffectView, assign tileImage and call startAnimating().

let rippleEffectView = RippleEffectView()
rippleEffectView.image = UIImage(imageNamed: "someImage") 
rippleEffectView.animationDuration = 4
rippleEffectView.magnitude = 0.3
view.addSubview(rippleEffectView)
rippleEffectView.startAnimating()

NB! startAnimating doesn't work if called in viewDidLoad and viewWillAppear. Working on fix. Place startAnimating() in viewDidAppear()

NB! RippleEffectView initialize itself with parent view bounds automatically, so you do not need to set it manually. If you need to use it in limited view, then use auxiliary view, e.g.

Animation uses transform, scale and opacity.

TopView
+- ContainerView
  +- RippleEffectView
     +- CALayer with animation

All regular UIView and layer properties.

tileImage UIImage that will displayed in every title. RippleEffectView uses size of image to calculate grid size. No default value.
animationDuraton. Default 3.5
magnitude force that will be applied to every circle to create ripple effect. Uber-like effect is about 0.1 - 0.2. GIF example -0.8
cellSize size of tile. Could be helpful if vector image used. Property is optional, if not set then tileImage size will be used.
rippleType Type of ripple effect. .OneWave and .Heartbeat. Default .OneWave

rows rows count
columns columns count

stopAnimating Start ripple animation startAnimating Stop all animations

You need this if you change tileImageRandomizationClosure when animation did start. When you call renderGrid to recreate all items. If you want just remove all items (e.g. memory warning) then call removeGrid

You may setup image for each grid view individually, or customize one that assigned in tileImage. (See example for full code)

>code>var tileImageRandomizationClosure: RandomizationClosure? = (Int, Int, UIImage)->(UIImage)

Main purpose of this component is to create animated screen background. You may stop animation and hide a screen as soon as data available, or wait for the animation end and the show the data.

rippleEffectView.animationDidStop = { _ in 
  // do something
}