電波っぽいアニメーションを3行で追加する「Pulsator」の使い方と実装解説

パルス的なアニメーションを簡単に追加できるOSSです。

![](https://github.com/shu223/Pulsator/blob/master/demo.gif?raw=true)

- https://github.com/shu223/pulsator

マップの現在値とか、iBeaconのビーコンとか、BLE（Bluetooth Low Energy）デバイスとか、そういう**電波を発する系の表現**に便利です。

**動かすところまで一瞬でできる** ので、自分でも各種案件で使用している他、ハッカソンやちょっとしたサンプルプロジェクトとかでも重宝してます。

言語はSwift、ライセンスはMITです。

v0.2.0 で Swift 3 サポートしました。

## 使い方

最短で**3行**で追加できます。

### 1. 初期化する

```swift
let pulsator = Pulsator()
```

### 2. ビューに追加する

表示したいビューの `layer` に追加します。

```swift
view.layer.addSublayer(pulsator)
```

### 3. アニメーションを開始する

```swift
pulsator.start()
```

## カスタマイズ

半径、色、パルスの数 etc. をカスタマイズできます。同梱のデモプロジェクト・Playground をご参照ください。

- Example/PulsatorDemo.xcodeproj
- Pulsator.playground

**ブラウザ上でも試せます**。

<iframe src="https://appetize.io/embed/45kwjngp1xud45eeqhxqy8qqew?device=iphone6s&scale=75&autoplay=false&orientation=portrait&deviceColor=black" width="312px" height="653px" frameborder="0" scrolling="no"></iframe>

- [PulsatorDemo](https://appetize.io/app/45kwjngp1xud45eeqhxqy8qqew?device=iphone5s&scale=75&orientation=portrait&osVersion=9.3)

## インストール方法

プロジェクトへのインストールはCocoaPods、Carthageをサポートしています。

```:Podfile
pod "Pulsator"
```

```:Cartfile
github "shu223/Pulsator"
```


## 利用例

このライブラリの前身（Objective-C版）である[PulsingHalo](https://github.com/shu223/PulsingHalo)は、個人的にかなりの実案件やサンプルプロジェクトで利用してます。

- [WHILL](http://d.hatena.ne.jp/shu223/20141031/1415072499)

![whill.gif](https://qiita-image-store.s3.amazonaws.com/0/3180/3ccccaa1-96a7-f31e-6a60-9cc9c3e261e1.gif)

- [Moff](http://d.hatena.ne.jp/shu223/20140723/1406055936)

![moff.gif](https://qiita-image-store.s3.amazonaws.com/0/3180/1dc5c431-18d4-a348-c613-665b6be0b78b.gif)

- [BONX](http://d.hatena.ne.jp/shu223/20151015/1444869631)
  - トーク中の音声を示す波
- とあるビーコン案件
  - マップ上で、ビーコン設置を示すAnnotationに使用

- [iOS-9-Sampler](http://d.hatena.ne.jp/shu223/20150917/1442440780)
  - Force Touch の位置と強さの可視化
  - ReplayKit のサンプルでも利用

![forcetouch.gif](https://qiita-image-store.s3.amazonaws.com/0/3180/95b930d0-117c-4ade-9900-2799069d6b78.gif)

- iOS8-Sampler
  - タッチ半径の可視化
- iOS7-Sampler
  - iBeaconの演出
- その他[ハッカソンの作品](http://d.hatena.ne.jp/shu223/20150906/1441520957)等

ObjC版についての解説記事（古いです）

- [ビーコン的な演出をする for iBeacon](http://qiita.com/shu223/items/5018cf5e452c4fa0d002)

## 実装解説

本OSSは**全面的に Core Animation を利用した実装**となっています。

### CAReplicatorLayer

まず、親クラスは CAReplicatorLayer となっています。

```swift
public class Pulsator: CAReplicatorLayer
```

CAReplicatorLayer は `instanceCount`個の**サブレイヤーの複製を作成**するレイヤーで、本OSSではパルスを複数生成するのに利用しています。

> The replicator layer creates a specified number of copies of its sublayers



### CAAnimationGroup

各パルスのアニメーションは、**拡大アニメーション + 不透明度のアニメーション** を組み合わせたもので、それらを CAAnimationGroup で統合して実行しています。

```swift
let scaleAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
// 略
    
let opacityAnimation = CAKeyframeAnimation(keyPath: "opacity")
// 略
    
animationGroup = CAAnimationGroup()
animationGroup.animations = [scaleAnimation, opacityAnimation]
```

## macOSでの利用

`0.5.0`より、macOSでも使えるようになりました🎉

Podfileに`pod "Pulsator"`を追加するだけ。

```:Podfile
platform :osx, '10.9'

target 'Pulsator' do
  use_frameworks!
  pod "Pulsator"
end
```

使い方は**iOSと同じ**です。

```swift
let pulsator = Pulsator()
view.layer?.addSublayer(pulsator)
pulsator.start()
```

こちらが[コードの差分](https://github.com/shu223/Pulsator/commit/0a51ab86909cfaa4ef653df578c9c803992bf39c)なのですが、**publicなAPI的には変更はありません**。[^2]

[^2]: Pulsatorやその前身となるPulsing Haloをつくった当時、macOSサポートまで考慮してなかったのですが、UIViewベースではなく、CALayerベースにしておいて良かったです。。