Gemini
is rich scroll based animation framework for iOS, written in Swift. You can easily use GeminiCollectionView
, which is a subclass of UICollectionView
.
It enables you to make multiple animation which has various and customizable properties, and moreover can create your own custom scroll animation.
Gemini
also provides a fluent interface based on method chaining. you can use this intuitively and simply.
collectionView.gemini
.circleRotationAnimation()
.radius(400)
.rotateDirection(.clockwise)
- Rich animation with scrolling
- Easily usable
- Highly customizable
- Several types of animations and properties
- Support vertical and horizontal flow layout
- Support easing function
- Support
Swift4.0
- Fluent interfaces based on method chaining
- Compatible with
Carthage
- Compatible with
CocoaPod
- Completely Example Project
- Completely
README
- And More...
Following animation types are available. You can find out sample code here.
- Cube
- Circle Rotation You can configure direction of rotation using the
CircleRotationDirection
- 3D vector rotation Each rotation types provide multiple rotation effect
- Scale
- Custom You can create your own custom scroll animation using multiple properties, rotation, scale, translation, etc.
In addition, you can also customize the following properties for the above animation types.
- BackgroundColor
- CornerRadius
- Alpha
- Easings
- Shadow Effect
It's a cube animation like Instagram.
If you would like to customize the cube animation, change cubeDegree
.
If cubeDegree
is 90, it moves like a regular hexahedron.
collectionView.gemini
.cubeAnimation()
.cubeDegree(90)
An animation moves in a circle. You can change circleRadius
and CircleRotationDirection
.
collectionView.gemini
.circleRotationAnimation()
.radius(450) // The radius of the circle
.rotateDirection(.clockwise) // Direction of rotation.
.itemRotationEnabled(true) // Whether the item rotates or not.
Available for Roll
, Pitch
and Yaw
animation. These rotation animation are designed based on 3-Dimensional vector. Figure-1 shows direction of rotation based on device.
Reference: Event Handling Guide for UIKit Apps
Each types of rotation animation has RotationEffect
(e.g. RollRotationEffect
) and degree of rotation.
Customize RotationEffect
(up
, down
, sineWave
, reverseSineWave
) and degree of rotation.
In the case of rollRotation
, like this:
collectionView.gemini
.rollRotationAnimation()
.degree(45)
.rollEffect(.rollUp)
The scaleUp
gradually increases frame size, scaleDown
decreases.
collectionView.gemini
.scaleAnimation()
.scale(0.75)
.scaleEffect(.scaleUp) // or .scaleDown
You can flexibly and easily customize scroll animation. Customize properties of GeminiAnimation.custom
such as scale
, scaleEffect
, rotationAngle
, translation
, easing
, shadowEffect
, alpha
, cornerRadius
, backgroundColor
, anchorPoint
, etc.
The animation of gif is customized in the following way:
collectionView.gemini
.customAnimation()
.translation(y: 50)
.rotationAngle(y: 13)
.ease(.easeOutExpo)
.shadowEffect(.fadeIn)
.maxShadowAlpha(0.3)
Or right side of gifs is customized as follows:
collectionView.gemini
.customAnimation()
.backgroundColor(startColor: lightGreenColor, endColor: lightBlueColor)
.ease(.easeOutSine)
.cornerRadius(75)
There are more sample code at CustomAnimationViewController.swift.
Gemini
supports various easing functions based on distance of scroll.
- linear
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
Default value is ShadowEffect.none
. Return shadowView
in your custom class, which is a subclass of GeminiCell
.
- fadeIn
- nextFadeIn
- previousFadeIn
- fadeOut
- none
class CustomCollectionViewCell: GeminiCell {
@IBOutlet weak var customShadowView: UIView!
override var shadowView: UIView? {
return customShadowView
}
}
- Use Gemini classes
Gemini
is designed to be easy to use. Use GeminiCollectionView
and GeminiCell
. These classes is subclass of UICollectionView
, UICollectionViewCell
.
- Configure animation
Configure animation with fluent interface based on method chaining. You can develop expressive code that enhances readability.
- Call function for animation
Finally, call animateVisibleCells()
in scrollViewDidScroll(_:)
NOTE: If you want to adapt animation immediately after view is displayed, call
animateCell(_:)
incollectionView(_:cellForItemAt:)
andcollectionView(_:willDisplay:forItemAt:)
.
// Import Gemini
import Gemini
// Inherite GeminiCell
class CustomCell: GeminiCell {
...
}
// Conform to UICollectionViewDelegate and UICollectionViewDataSource
class CustomViewController: UIViewController: UICollectionViewDelegate, UICollectionViewDataSource {
// Inherite GeminiCollectionView
@IBOutlet weak var collectionView: GeminiCollectionView!
...
// Configure animation and properties
func configureAnimation() {
collectionView.gemini
.circleRotationAnimation()
.radius(400)
.rotateDirection(.clockwise)
}
// Call animation function
func scrollViewDidScroll(_ scrollView: UIScrollView) {
collectionView.animateVisibleCells()
}
func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
if let cell = cell as? GeminiCell {
self.collectionView.animateCell(cell)
}
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCell", for: indexPath) as! CustomCell
self.collectionView.animateCell(cell)
return cell
}
See Example, for more details.
To run the example project, clone the repo, and run pod install
from the Example directory first.
- Xcode 9.0+
- Swift 4.0
Gemini is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod "Gemini"
Add the following line to your Cartfile
:
github "shoheiyokoyama/Gemini"
Shohei Yokoyama
Gemini is available under the MIT license. See the LICENSE file for more info.