はじめに
C4は、SwiftでCreative Codingをするためのオープンソースフレームワークです。
描画・メディア系に特化しています。
詳しくは弊社HACKistブログの記事をご覧ください。
今回はこのC4ライブラリを用いてApple Watch Activityでお馴染みの円弧UIとアニメーション(もどき)を作ってみました。
開発環境
Xcode 8.2.1
Swift 3.0
C4 Install
新規プロジェクトを作成し、CocoaPodsでC4をインストールします。
今回はSwift3.0で実装したため2.0系をインストールします。
(執筆時の最新バージョンは2.1.1)
|
1 |
pod 'C4', '~> 2.0’ |
準備
早速xcworkspaceファイルを修正します。
まずimport文でC4のライブラリをインポート、継承するクラスもCanvasControllerに変更します。
|
1 2 3 4 5 6 7 8 9 10 |
import UIKit import C4 class ViewController: CanvasController { override func setup() { // viewDidLoadを同じ役割 } } |
実際のコード
円弧を描画するうえでポイントとなるのが、以下2点です。
・strokeStartとstrokeEndの設定
・fillColorをclearにする
strokeStartとstrokeEndを指定することで円弧状となり、fillColorをclearにすることで円の中央が切り抜かれます。
strokeStartとstrokeEndを指定しないと通常の円を描画することになります。
strokeStartとstrokeEndの値の範囲は以下の通りです。
例えばstrokeStart: 0.75とstrokeEnd:1.0と指定すると下記のような円弧が描画されます。
今回は12時の方向を描画のスタート位置にしたいため、
rotationで-45度回転させ開始位置を調整しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import UIKit import C4 class ViewController: CanvasController { private var blueShape: Shape! private var greenShape: Shape! private var redShape: Shape! override func setup() { self.canvas.backgroundColor = black loadShape() } override func viewWillAppear(_ animated: Bool) { // 12時の方向がスタートとなるように円を回転 blueShape.rotation = -0.5 * M_PI greenShape.rotation = -0.5 * M_PI redShape.rotation = -0.5 * M_PI } func loadShape(){ // strokeStartとstrokeEndを指定することで弧を描画 blueShape = createShape(center: canvas.center, color: Color(0x00E5FF), radius: 30.0) blueShape.strokeStart = 0.0 blueShape.strokeEnd = 0.001 greenShape = createShape(center: canvas.center, color: Color(0x76FF03), radius: 65.0) greenShape.strokeStart = 0.0 greenShape.strokeEnd = 0.001 redShape = createShape(center: canvas.center, color: Color(0xFF1744), radius: 100.0) redShape.strokeStart = 0.0 redShape.strokeEnd = 0.001 } func createShape(center: Point, color: Color, radius: Double) -> Shape { let shape = Circle(center: center, radius: radius) shape.lineWidth = 30.0 shape.strokeColor = color shape.fillColor = clear self.canvas.add(shape) return shape } @IBAction func didTapCanvas(_ sender: Any) { // canvasをタップした時にランダムでアニメーション(TapGestureをOutletで接続) let move = ViewAnimation(duration:1.0) { // 0~1の範囲でランダム値を代入 self.blueShape.strokeEnd = random01() self.greenShape.strokeEnd = random01() self.redShape.strokeEnd = random01() } move.animate() } } |
確認
最後に
このように比較的簡単にApple Watch ActivityのUI(もどき)を再現することができました。
C4も頻繁にアップデートされているため今後のアップデートに期待です!