Skip to content

Commit

Permalink
Documentation
Browse files Browse the repository at this point in the history
Refactoring variable names and addinga proper README and CHANGELOG
  • Loading branch information
fmoyarivas committed Feb 4, 2019
1 parent 1d647aa commit 0485d32
Show file tree
Hide file tree
Showing 39 changed files with 574 additions and 1,634 deletions.
38 changes: 3 additions & 35 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,42 +1,10 @@
Change Log
==========
Version 1.1.0
Version 1.0.1
---
* Migration to Swift 4.2
* Refactoring names, adding a README and CHANGELOG.

Version 1.0.0
---
* Releasing first version of the framework

Version 0.0.7-beta.2
---
* Fixing target on navbar and tabbar for iOS 9 and 10

Version 0.0.7-beta.1
---
* Fixing issues with rotation

Version 0.0.6
---
* Adding Carthage support

Version 0.0.5
---
* Fix Build settings

Version 0.0.4
---
* Fix Build settings

Version 0.0.3
---
* Fix Build settings

Version 0.0.2
---
* Supporting Cocoapods

Version 0.0.1
---
* Initial release
* First version of the framework

72 changes: 71 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,72 @@
# SpinKit
Beautiful spinners based on [tobiasahlin's CSS SpinKit](https://github.com/tobiasahlin/SpinKit). Demystifying iOS Animations
[![Download](https://img.shields.io/cocoapods/v/SpinKitFramework.svg)](https://cocoapods.org/pods/SpinKitFramework)
[![CocoaPods platforms](https://img.shields.io/cocoapods/p/SpinKitFramework.svg)](https://cocoapods.org/pods/SpinKitFramework)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Based on [tobiasahlin's CSS SpinKit](https://github.com/tobiasahlin/SpinKit), SpinKit is a friendly framework that provides with a set of spinners or loaders. They're perfect to use when your App faces a heavy load task or to help with a transition between scenes.

## Usage
Every `Spinner` is a view that implements the `SpinnerType` interface and exposes four properties to customize it. To start a spinner, simply call its `startLoading` method. Here's some sample code:

```swift
let spinner = WaveSpinner(primaryColor: selectedColor,
frame: CGRect(origin: .zero,
size: CGSize(width: 50,
height: 50)))

spinner.startLoading()
```
<img src="/resources/wave_spiner.gif" width="100" title="Wave Spinner">

## Customization
You can change its color, speed of the animation and modify its content insets:
```swift
spinner.primaryColor = UIColor.green
spinner.contentInsets = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
spinner.animationSpeed = 3 // Speeds up the animation by 3
```

**Note:** Don't change these properties once the spinner has started the animation. Some of them are used as part of the animation and it might not have the expected result.

You can also set the `isTranslucent` property to false (default is true). This makes the view take the `primaryColor` and show the spinner in a white tint.

* Translucent spinner
<img src="/resources/double_bounce.gif" width="100" title="Wave Spinner">

* Opaque spinner
<img src="/resources/double_bounce_translucent.gif" width="100" title="Wave Spinner">

## Available Spinners
Choose the one you like the most ;)
#### Rotating plane
<img src="/resources/rotating_plane.gif" width="100" title="Rotating plane spinner">

#### Double bounce
<img src="/resources/double_bounce_red.gif" width="100" title="Double bounce spinner">

#### Wave
<img src="/resources/wave_red.gif" width="100" title="Wave spinner">

#### Wandering cubes
<img src="/resources/wandering_cubes.gif" width="100" title="Wandering cubes spinner">

#### Pulse
<img src="/resources/pulse.gif" width="100" title="Pulse spinner">

#### Chasing dots
<img src="/resources/chasing_dots.gif" width="100" title="Chasing dots spinner">

#### Three bounce
<img src="/resources/three_bounce.gif" width="100" title="Three bounce spinner">

#### Circle
<img src="/resources/circle.gif" width="100" title="Circle spinner">

#### Cube grid
<img src="/resources/cube_grid.gif" width="100" title="Cube grid spinner">

#### Fading circle
<img src="/resources/fading_circle.gif" width="100" title="Fading circle spinner">

#### Folding cube
<img src="/resources/folding_cube_spinner_red.gif" width="100" title="Folding cube spinner">
6 changes: 3 additions & 3 deletions SpinKit/ChasingDotsSpinner.swift
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,9 @@ public class ChasingDotsSpinner: Spinner {
override public func startLoading() {
super.startLoading()

let scaleAnimation = CABasicAnimation(keyPath: "transform")
scaleAnimation.fromValue = CATransform3DScale(CATransform3DIdentity, 0, 0, 1)
scaleAnimation.toValue = CATransform3DIdentity
let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
scaleAnimation.fromValue = 0
scaleAnimation.toValue = 1
scaleAnimation.repeatCount = .infinity
scaleAnimation.duration = 1.1 / animationSpeed
scaleAnimation.fillMode = .backwards
Expand Down
48 changes: 22 additions & 26 deletions SpinKit/CubeGridSpinner.swift
Original file line number Diff line number Diff line change
Expand Up @@ -14,61 +14,57 @@ import UIKit
@IBDesignable
public class CubeGridSpinner: Spinner {

private var squareLayer = CAShapeLayer()
private var rowReplicatorLayer = CAReplicatorLayer()
private var replicatorLayer = CAReplicatorLayer()
private var cubeLayer = CAShapeLayer()
private var cubeRowReplicatorLayer = CAReplicatorLayer()
private var gridReplicatorLayer = CAReplicatorLayer()

private var squareRect: CGRect {
private var cubeRect: CGRect {
return contentBounds.applying(CGAffineTransform(scaleX: 1 / 3, y: 1 / 3))
}

override public func didMoveToWindow() {
super.didMoveToWindow()

rowReplicatorLayer.instanceCount = 3
replicatorLayer.instanceCount = 3
cubeRowReplicatorLayer.instanceCount = 3
gridReplicatorLayer.instanceCount = 3

rowReplicatorLayer.addSublayer(squareLayer)
replicatorLayer.addSublayer(rowReplicatorLayer)
layer.addSublayer(replicatorLayer)
cubeRowReplicatorLayer.addSublayer(cubeLayer)
gridReplicatorLayer.addSublayer(cubeRowReplicatorLayer)
layer.addSublayer(gridReplicatorLayer)
}

override public func draw(_ rect: CGRect) {
super.draw(rect)
squareLayer.fillColor = isTranslucent ? primaryColor.cgColor : UIColor.white.cgColor
squareLayer.strokeColor = squareLayer.fillColor
cubeLayer.fillColor = isTranslucent ? primaryColor.cgColor : UIColor.white.cgColor
cubeLayer.strokeColor = cubeLayer.fillColor
}

override public func layoutSubviews() {
super.layoutSubviews()

squareLayer.path = UIBezierPath(rect: squareRect).cgPath
rowReplicatorLayer.instanceTransform = CATransform3DTranslate(CATransform3DIdentity, squareRect.width, 0, 0)
replicatorLayer.instanceTransform = CATransform3DTranslate(CATransform3DIdentity, 0, squareRect.height, 0)
replicatorLayer.frame = contentRect
cubeLayer.path = UIBezierPath(rect: cubeRect).cgPath
cubeLayer.frame = cubeRect
cubeRowReplicatorLayer.instanceTransform = CATransform3DTranslate(CATransform3DIdentity, cubeRect.width, 0, 0)
gridReplicatorLayer.instanceTransform = CATransform3DTranslate(CATransform3DIdentity, 0, cubeRect.height, 0)
gridReplicatorLayer.frame = contentRect
}

override public func startLoading() {
super.startLoading()

let transform = NSValue(caTransform3D: CATransform3DConcat(CATransform3DScale(CATransform3DIdentity, 0, 0, 1),
CATransform3DTranslate(CATransform3DIdentity,
squareRect.width / 2,
squareRect.width / 2, 0)))

let scaleAnim = CABasicAnimation(keyPath: "transform")
scaleAnim.fromValue = CATransform3DIdentity
scaleAnim.toValue = transform
let scaleAnim = CABasicAnimation(keyPath: "transform.scale")
scaleAnim.fromValue = 1
scaleAnim.toValue = 0
scaleAnim.repeatCount = .infinity
scaleAnim.autoreverses = true
scaleAnim.fillMode = .backwards
scaleAnim.timingFunction = CAMediaTimingFunction(controlPoints: 0.83, 0, 0.26, 1.05)
scaleAnim.duration = 1 / animationSpeed

rowReplicatorLayer.instanceDelay = scaleAnim.duration / Double(rowReplicatorLayer.instanceCount) / 2
replicatorLayer.instanceDelay = scaleAnim.duration / Double(replicatorLayer.instanceCount) / 2
cubeRowReplicatorLayer.instanceDelay = scaleAnim.duration / Double(cubeRowReplicatorLayer.instanceCount) / 2
gridReplicatorLayer.instanceDelay = scaleAnim.duration / Double(gridReplicatorLayer.instanceCount) / 2

squareLayer.add(scaleAnim, forKey: nil)
cubeLayer.add(scaleAnim, forKey: nil)
}

}
12 changes: 6 additions & 6 deletions SpinKit/DoubleBounceSpinner.swift
Original file line number Diff line number Diff line change
Expand Up @@ -14,28 +14,28 @@ import UIKit
@IBDesignable
public class DoubleBounceSpinner: DoubleColorSpinner {

private var outterCircleLayer = CAShapeLayer()
private var outerCircleLayer = CAShapeLayer()
private var innerCircleLayer = CAShapeLayer()

override public func didMoveToWindow() {
super.didMoveToWindow()

layer.addSublayer(outterCircleLayer)
layer.addSublayer(outerCircleLayer)
layer.addSublayer(innerCircleLayer)
}

override public func draw(_ rect: CGRect) {
super.draw(rect)

outterCircleLayer.fillColor = isTranslucent ? primaryColor.cgColor : UIColor.white.cgColor
outerCircleLayer.fillColor = isTranslucent ? primaryColor.cgColor : UIColor.white.cgColor
innerCircleLayer.fillColor = isTranslucent ? secondaryColor.cgColor : UIColor.lightGray.cgColor
}

override public func layoutSubviews() {
super.layoutSubviews()

outterCircleLayer.path = UIBezierPath(ovalIn: contentBounds).cgPath
outterCircleLayer.frame = contentRect
outerCircleLayer.path = UIBezierPath(ovalIn: contentBounds).cgPath
outerCircleLayer.frame = contentRect

innerCircleLayer.path = UIBezierPath(ovalIn: contentBounds.applying(CGAffineTransform(scaleX: 0.5, y: 0.5))).cgPath
innerCircleLayer.frame = CGRect(x: contentSize.width / 4 + contentOrigin.x,
Expand All @@ -53,7 +53,7 @@ public class DoubleBounceSpinner: DoubleColorSpinner {
anim.autoreverses = true
anim.repeatCount = .infinity

outterCircleLayer.add(anim, forKey: nil)
outerCircleLayer.add(anim, forKey: nil)

anim.fromValue = 0
anim.toValue = 1
Expand Down
1 change: 0 additions & 1 deletion SpinKitExample/Podfile
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,5 @@ target 'SpinKitExample' do

# Pods for SpinKit
pod 'ChameleonFramework/Swift'
pod 'SpinKitFramework'

end
6 changes: 1 addition & 5 deletions SpinKitExample/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,17 @@ PODS:
- ChameleonFramework/Default (2.1.0)
- ChameleonFramework/Swift (2.1.0):
- ChameleonFramework/Default
- SpinKitFramework (1.0.0)

DEPENDENCIES:
- ChameleonFramework/Swift
- SpinKitFramework

SPEC REPOS:
https://github.com/cocoapods/specs.git:
- ChameleonFramework
- SpinKitFramework

SPEC CHECKSUMS:
ChameleonFramework: d21a3cc247abfe5e37609a283a8238b03575cf64
SpinKitFramework: 201c3d58c26c2d2f4408b19e3522f4ea374b1cc3

PODFILE CHECKSUM: c6827e3014b1b8592f8e6f1761ef9ffdd08bbc76
PODFILE CHECKSUM: 71471df4a8412c3b74f90358c72f8bc00d827838

COCOAPODS: 1.5.3
6 changes: 1 addition & 5 deletions SpinKitExample/Pods/Manifest.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 0485d32

Please sign in to comment.