RippleEffectView alternatives and similar libraries
Based on the "Animation" category.
Alternatively, view RippleEffectView alternatives based on common mentions on social networks and blogs.
-
Pop
DISCONTINUED. An extensible iOS and OS X animation library, useful for physics-based interactions. -
IBAnimatable
Design and prototype customized UI, interaction, navigation, transition and animation for App Store ready Apps in Interface Builder with IBAnimatable. -
Keyframes
DISCONTINUED. A library for converting Adobe AE shape based animations to a data format and play it back on Android and iOS devices. -
EasyAnimation
A Swift library to take the power of UIView.animateWithDuration(_:, animations:...) to a whole new level - layers, springs, chain-able animations and mixing view and layer animations together! -
ZoomTransitioning
ZoomTransitioning provides a custom transition with image zooming animation and swiping the screen edge. -
AHDownloadButton
Customizable download button with progress and transition animations. It is based on Apple's App Store download button. -
SamuraiTransition
SamuraiTransition is an open source Swift based library providing a collection of ViewController transitions featuring a number of neat “cutting” animations. -
CCMRadarView
CCMRadarView uses the IBDesignable tools to make an easy customizable radar view with animation -
ADPuzzleAnimation
Inspired by Fabric - Answers animation. Allows to "build" given view with pieces. Allows to "destroy" given view into pieces
InfluxDB - Power Real-Time Data Analytics at Scale
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of RippleEffectView or a related project?
README
RippleEffectView
Not only Uber-like animated 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.6](rippleEffectView1.gif)
rippleEffectView.magnitude = 0.2
[rippleEffectView.magnitude = 0.2](rippleEffectView2.gif)
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
}
rippleEffectView.rippleType = .Heartbeat
rippleEffectView.magnitude = 0.2
[rippleEffectView.magnitude = 0.2](rippleEffectView3.gif)
Requirements
- Swift 3.0+
- iOS 9.3+
- Xcode 8.0+
Installation
CocoaPods
RippleEffectView is available through CocoaPods. To install it, simply add the following line to your Podfile:
target 'Your Project' do
use_frameworks!
pod "RippleEffectView"
end
Manual
Copy RippleEffectView.swift
to 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()
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
.
Special properties
tileImage
UIImage that will displayed in every title. RippleEffectView uses size of image to calculate grid size. No default value.animationDuraton
. Default3.5
magnitude
force that will be applied to every circle to create ripple effect. Uber-like effect is about0.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
Read-only properties
rows
rows countcolumns
columns count
Methods
stopAnimating
Start ripple animation
startAnimating
Stop all animations
Manual control of the grid.
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
Callbacks
Tile image customization.
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)
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
}