Overview
What is the Gemini?
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)
Features
- Rich animation with scrolling
- Easily usable
- Highly customizable
- Several types of animations and properties
- Supports vertical and horizontal flow layout
- Supports easing function
- Supports
Swift5.0 - Fluent interfaces based on method chaining
- Compatible with
Carthage - Compatible with
CocoaPods - Example project with lots of stock animations
- And More...
Contents
Animation Types and properties
The following animation types are available. See sample code here for details.
- 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
Cube
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)
CircleRotation
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.
3D vector rotation
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.
Figure-1 Pitch, roll, and yaw axes
Reference: Event Handling Guide for UIKit Apps
Roll Rotation
Pitch Rotation
Yaw Rotation
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)
Scale
The scaleUp gradually increases frame size, scaleDown decreases.
collectionView.gemini
.scaleAnimation()
.scale(0.75)
.scaleEffect(.scaleUp) // or .scaleDown
Custom
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.
Easing function
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
Shadow effect
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
}
}
Usage
- 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.
Requirements
- Xcode 10.2.1
- Swift 5.0
Installation
CocoaPods
Gemini is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod "Gemini"
Carthage
Add the following line to your Cartfile:
github "shoheiyokoyama/Gemini"
Author
Shohei Yokoyama
- GitHub
- Gmail: [email protected]
License
Gemini is available under the MIT license. See the LICENSE file for more info.
![Value of type '[UICollectionViewCell]' has no member 'compactMap'](https://avatars.githubusercontent.com/u/16289426?v=4)
29 Dec 20, 2022
2.4k Jan 6, 2023
1k Nov 10, 2022
7 Jan 2, 2023
28 Jan 8, 2023
9 Nov 5, 2022
126 Oct 28, 2021
19.8k Dec 28, 2022
1.2k Jan 8, 2023
1.9k Dec 6, 2022
528 Dec 27, 2022
1.3k Jan 6, 2023
2 Aug 18, 2022
1.9k Dec 9, 2022
555 Dec 12, 2022
1.3k Dec 18, 2022
592 Dec 6, 2022
648 Dec 14, 2022