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

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

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

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

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

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

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

使い方

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

1. 初期化する

let pulsator = Pulsator()

2. ビューに追加する

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

view.layer.addSublayer(pulsator)

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

pulsator.start()

カスタマイズ

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

• Example/PulsatorDemo.xcodeproj
• Pulsator.playground

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

• PulsatorDemo

インストール方法

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

Podfile

pod "Pulsator"

Cartfile

github "shu223/Pulsator"

利用例

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

• WHILL

• Moff

• BONX

  • トーク中の音声を示す波

• とあるビーコン案件

  • マップ上で、ビーコン設置を示すAnnotationに使用

• iOS-9-Sampler

  • Force Touch の位置と強さの可視化
  • ReplayKit のサンプルでも利用

• iOS8-Sampler
  • タッチ半径の可視化
• iOS7-Sampler
  • iBeaconの演出
• その他ハッカソンの作品等

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

• ビーコン的な演出をする for iBeacon

実装解説

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

CAReplicatorLayer

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

public class Pulsator: CAReplicatorLayer

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

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

CAAnimationGroup

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

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と同じです。

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

こちらがコードの差分なのですが、publicなAPI的には変更はありません。¹

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