Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shoheiyokoyama/Gemini

Gemini is rich scroll based animation framework for iOS, written in Swift.
https://github.com/shoheiyokoyama/Gemini

animation-3d animation-effects animation-library carthage cocoapods ios ios-animation swift swift-library uicollectionview

Last synced: 3 days ago
JSON representation

Gemini is rich scroll based animation framework for iOS, written in Swift.

Awesome Lists containing this project

README

        



# 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.

```swift
collectionView.gemini
.circleRotationAnimation()
.radius(400)
.rotateDirection(.clockwise)
```

# Features

![Platform](http://img.shields.io/badge/platform-ios-blue.svg?style=flat
)
[![Cocoapods](https://img.shields.io/badge/Cocoapods-compatible-brightgreen.svg)](https://img.shields.io/badge/Cocoapods-compatible-brightgreen.svg)
[![Carthage compatible](https://img.shields.io/badge/Carthage-Compatible-brightgreen.svg?style=flat)](https://github.com/Carthage/Carthage)
[![License](http://img.shields.io/badge/license-MIT-lightgrey.svg?style=flat
)](http://mit-license.org)
![Swift](https://img.shields.io/badge/swift-5.0-orange.svg)
![pod](https://img.shields.io/badge/pod-v1.4.0-red.svg)

- [x] Rich animation with scrolling
- [x] Easily usable
- [x] Highly customizable
- [x] Several types of animations and properties
- [x] Supports vertical and horizontal flow layout
- [x] Supports easing function
- [x] Supports `Swift5.0`
- [x] Fluent interfaces based on method chaining
- [x] Compatible with `Carthage`
- [x] Compatible with `CocoaPods`
- [x] Example project with lots of stock animations
- [x] And More...

# Contents
- [Animation Types and properties](#anmation-types)
- [Usage](#usage)
- [Requirements](#requirements)
- [Installation](#installation)
- [Author](#author)

# Animation Types and properties

The following animation types are available. See sample code [here](https://github.com/shoheiyokoyama/Gemini/tree/master/Example/Gemini) for details.

- [Cube](#cube)
- [Circle Rotation](#circle-rotation) You can configure direction of rotation using the `CircleRotationDirection`
- [3D vector rotation](#3d-vector-rotation) Each rotation types provide multiple rotation effect
- [Roll Rotation](#roll-rotation)
- [Pitch Rotation](#pitch-rotation)
- [Yaw Rotation](#yaw-rotation)
- [Scale](#scale)
- [Custom](#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](#easing-function)
- [Shadow Effect](#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.

```swift
collectionView.gemini
.cubeAnimation()
.cubeDegree(90)
```

## CircleRotation




An animation moves in a circle. You can change `circleRadius` and `CircleRotationDirection`.

```swift
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](https://developer.apple.com/library/content/documentation/EventHandling/Conceptual/EventHandlingiPhoneOS/HandlingProcessedDeviceMotionData.html#//apple_ref/doc/uid/TP40009541-CH27-SW1)

### 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:
```swift
collectionView.gemini
.rollRotationAnimation()
.degree(45)
.rollEffect(.rollUp)
```

## Scale




The `scaleUp` gradually increases frame size, `scaleDown` decreases.

```swift
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:

```swift
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:

```swift
collectionView.gemini
.customAnimation()
.backgroundColor(startColor: lightGreenColor, endColor: lightBlueColor)
.ease(.easeOutSine)
.cornerRadius(75)
```

There are more sample code at [CustomAnimationViewController.swift](https://github.com/shoheiyokoyama/Gemini/blob/master/Example/Gemini/ViewControllers/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

```swift
class CustomCollectionViewCell: GeminiCell {
@IBOutlet weak var customShadowView: UIView!
override var shadowView: UIView? {
return customShadowView
}
}
```

# Usage

1. ***Use Gemini classes***

`Gemini` is designed to be easy to use. Use `GeminiCollectionView` and `GeminiCell`. These classes is subclass of `UICollectionView`, `UICollectionViewCell`.

2. ***Configure animation***

Configure animation with fluent interface based on method chaining. You can develop expressive code that enhances readability.

3. ***Call function for animation***

Finally, call `animateVisibleCells()` in `scrollViewDidScroll(_:)`

> NOTE: If you want to adapt animation immediately after view is displayed, call `animateCell(_:)` in `collectionView(_:cellForItemAt:)` and `collectionView(_:willDisplay:forItemAt:)`.

```swift
// 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](https://github.com/shoheiyokoyama/Gemini/tree/master/Example/Gemini), 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](http://cocoapods.org). To install
it, simply add the following line to your Podfile:

```ruby
pod "Gemini"
```

### Carthage

Add the following line to your `Cartfile`:

```ruby
github "shoheiyokoyama/Gemini"
```

## Author

Shohei Yokoyama

- [GitHub](https://github.com/shoheiyokoyama)
- [Facebook](https://www.facebook.com/shohei.yokoyama.96)
- [Twitter](https://twitter.com/shoheiyokoyam)
- Gmail:
[email protected]

## License

Gemini is available under the MIT license. See the [LICENSE file](https://github.com/shoheiyokoyama/Gemini/blob/master/LICENSE) for more info.