Not only Uber-like animated 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 3.0+
- iOS 9.3+
- Xcode 8.0+
RippleEffectView is available through CocoaPods. To install it, simply add the following line to your Podfile:
target 'Your Project' do
use_frameworks!
pod "RippleEffectView"
endCopy RippleEffectView.swiftto your project, then
#Usage
Add new RippleEffectView, assign tileImage and call startAnimating().
rippleEffectView = RippleEffectView()
rippleEffectView.tileImage = UIImage(named: "some image")
rippleEffectView.magnitude = 0.2
rippleEffectView.cellSize = CGSize(width:50, height:50)
rippleEffectView.rippleType = .heartbeat
view.addSubview(rippleEffectView)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.
tileImageUIImage that will displayed in every title. RippleEffectView uses size of image to calculate grid size. No default value.animationDuraton. Default3.5magnitudeforce that will be applied to every circle to create ripple effect. Uber-like effect is about0.1-0.2. GIF example-0.8cellSizesize of tile. Could be helpful if vector image used. Property is optional, if not set then tileImage size will be used.rippleTypeType of ripple effect..OneWaveand.Heartbeat. Default.OneWave
##Read-only properties
rowsrows countcolumnscolumns count
stopAnimating Start ripple animation
startAnimating Stop all animations
You will need this if you change tileImageRandomizationClosure. 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 Demo project for example code)
var tileImageRandomizationClosure: RandomizationClosure? = (totalRows:Int, totalColumns:Int, currentRow:Int, currentColumn:Int, originalImage: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
}