Cirque 1.0.3

Cirque 1.0.3

×

TestsTested ✗
LangLanguage SwiftSwift
License MIT
ReleasedLast Release May 2018
SPMSupports SPM ✗

Maintained by Philip Engberg.

Cirque 1.0.3

  • By
  • philipengberg

cirque icon 2

Cirque

Swift Version License Platform

Cirque is an iOS component that enables you to draw multi color circle strokes with gradient trasitions between colors.

Why?

CAGradientLayer currently only supports linear gradients, and most solutions out there only support two colors. However, we needed a modular, configurable component that could handle any number of colors at any size.

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

First create a data structure that implements CirqueDataType (an enum would make sense), then create a new CirqueView and set the dataPoints property with an array of CirqueDataType.

let cirque = CirqueView(frame: CGRect(x: 0, y: 0, width: 110, height: 110))
cirque.dataPoints = [RankingGroup.match(value: 0.3), 
                     RankingGroup.achievements(value: 0.2), 
                     RankingGroup.votes(value: 0.2)]
view.addSubview(cirque)

and boom 💥

Example

Customization

You can further customize the appearance be tweaking

Property Description Default value
transitionSize A Float between 0 and 1 indicating the percentage of the circle circumference that should be used to transition fully from one color to the next. 0.05
stepSize A Float between 0 and 1 indicating the percentage of the transitionSize that each gradient step should fill. So with a value of 0.1, each color step is 10% of the transitionSize, meaning there will be 10 steps in total. 0.1
lineWidth A Float indicating the stroke width of the circle. 5

Expainer

How it works

The idea is to draw as much as possible with ordinary strokes on a bezier arc. Then when it's time to shift color, 1/stepSize little arcs are drawn which each go one step closer to the next color. This is illustrated below:

Example

Animation

I have implemented a working prototype that can animate the progress of the circle, while keeping the relative proportions of the circle as it expands.

The challenge is that in order to draw many small arc segments, the most feasible thing is to do it directly in drawRect:, which means there are no layers to animate.

My working prototype supports custom duration and timing functions. If you would to se this supported directly in this component, please throw a 👍 on this issue.

Installation

Cirque is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "Cirque"

Requirements

  • Xcode 8.0
  • Swift 3.0+

Author

Mr. Engberg, Lead Mobile Developer @ Tonsser

Contribution

Contributions are more than welcome!

License

Cirque is available under the MIT license. See the LICENSE file for more info.