Cirque
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
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 |
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:
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
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
philipengberg
philipengbergContribution
Contributions are more than welcome!
License
Cirque is available under the MIT license. See the LICENSE file for more info.