[iOS] RippleEffectView：加載時實現與背景的漣漪效應（連鎖反應）

mikeiii 8年前發布 | 7K 次閱讀 Ripple iOS開發 移動開發

RippleEffectView

Not only Uber-like animated loading screen background.

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

How it may looks like

Basic customization (color randomization)

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

Complex customization

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
}</code></pre> 
  
rippleEffectView.rippleType = .Heartbeat
rippleEffectView.magnitude = 0.2
 
  
 
  
Requirements
 
  
     
   
  • Swift 2.3
    •  
   
  • iOS 9.3+
    •  
   
  • Xcode 7.3+
    •  
  
 
  
Installation
 
  
Copy RippleEffectView.swift to your project. Copy file if needed.
 
  
Usage
 
  
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()
 
  
Configurable properties
 
  
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.
 
  
     
   
  1. tileImage UIImage that will displayed in every title. RippleEffectView uses size of image to calculate grid size. No default value.
    2.  
   
  2. animationDuraton . Default 3.5
    3.  
   
  3. 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
    4.  
   
  4. cellSize size of tile. Could be helpful if vector image used. Property is optional, if not set then tileImage size will be used.
    5.  
   
  5. rippleType Type of ripple effect. .OneWave and .Heartbeat . Default .OneWave
    6.  
  
 
  
Read-only properties
 
  
     
   
  1. rows rows count
    2.  
   
  2. columns columns count
    3.  
  
 
  
Methods
 
  
stopAnimating Start ripple animation startAnimating Stop all animations
 
  
Manual control of the grid.
 
  
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
 
  
Callbacks
 
  
Tile image customization.
 
  
You may setup image for each grid view individually, or customize one that assigned in tileImage . (See example for full code)
 
  
var tileImageRandomizationClosure: RandomizationClosure? = (Int, Int, UIImage)->(UIImage)
 
  
Animation Finished
 
  
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
}
 
  
 
 
  
來自：https://github.com/alsedi/RippleEffectView
 
  
 
 本文由用戶 mikeiii 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！