Swift interpolation for gesture-driven animations
Interpolate is a powerful Swift interpolation framework for creating interactive gesture-driven animations.
The 🔑 idea of Interpolate is -
all animation is the interpolation of values over time.
To use Interpolate:
Import Interpolate at the top of your Swift file.
import Interpolate
Create an Interpolate object with a from value, a to value and an apply closure that applies the interpolation’s result to the target object.
let colorChange = Interpolate(from: UIColor.white,
to: UIColor.red,
apply: { [weak self] (color) in
self?.view.backgroundColor = color
})
Alternatively, you can specify multiple values for the interpolation in an array. The Swift compiler might have issues to infer the type of the array so it’s best to be explicit.
let colors: [UIColor] = [UIColor.white, UIColor.red, UIColor.green]
let colorChange = Interpolate(values: colors,
apply: { [weak self] (color) in
self?.view.backgroundColor = color
})
Next, you will need to define a way to translate your chosen gesture’s progress to a percentage value (i.e. a CGFloat between 0.0 and 1.0).
For a gesture recognizer or delegate that reports every step of its progress (e.g. UIPanGestureRecognizer or a ScrollViewDidScroll) you can just apply the percentage directly to the Interpolate object:
@IBAction func handlePan(recognizer: UIPanGestureRecognizer) {
let translation = recognizer.translation(in: self.view)
let translatedCenterY = view.center.y + translation.y
let progress = translatedCenterY / self.view.bounds.size.height
colorChange.progress = progress
}
For other types of gesture recognizers that only report a beginning and an end (e.g. a UILongPressGestureRecognizer), you can animate directly to a target progress value with a given duration. For example:
@IBAction func handleLongPress(recognizer: UILongPressGestureRecognizer) {
switch recognizer.state {
case .began:
colorChange.animate(1.0, duration: 0.3)
case .cancelled, .ended, .failed:
colorChange.animate(0.0, duration: 0.3)
default: break
}
}
To stop an animation:
colorChange.stopAnimation()
When you are done with the interpolation altogether:
colorChange.invalidate()
Voila!
Interpolate currently supports the interpolation of:
More types will be added over time.
Interpolate is not just for dull linear interpolations.
For smoother animations, consider using any of the following functions: easeIn, easeOut, easeInOut and Spring.
// Spring interpolation
let shadowPosition = Interpolate(from: -shadowView.frame.size.width,
to: (self.view.bounds.size.width - shadowView.frame.size.width)/2,
function: SpringInterpolation(damping: 30.0, velocity: 0.0, mass: 1.0, stiffness: 100.0),
apply: { [weak self] (originX) in
self?.shadowView.frame.origin.x = originX
})
// Ease out interpolation
let groundPosition = Interpolate(from: CGPoint(x: 0, y: self.view.bounds.size.height),
to: CGPoint(x: 0, y: self.view.bounds.size.height - 150),
function: BasicInterpolation.easeOut,
apply: { [weak self] (origin) in
self?.groundView.frame.origin = origin
})
In fact, you can easily create and use your own interpolation function - all you need is an object that conforms to the InterpolationFunction protocol.
source 'https://github.com/CocoaPods/Specs.git'
pod 'Interpolate', '~> 1.3.0'
Carthage is a decentralized dependency manager that automates the process of adding frameworks to your Cocoa application.
You can install Carthage with Homebrew using the following command:
$ brew update
$ brew install carthage
To integrate Interpolate into your Xcode project using Carthage, specify it in your Cartfile
:
github "marmelroy/Interpolate"