この記事は iBeacon Advent Calendar 4日目の記事ですが、 iBeacon の話は一切出てきません。 1
それどころかiOS7の新機能の話もなく、iOSの古の時代からある Core Animation を使用してビーコン的な演出 2 をするクラスをつくったので、その紹介でお茶を濁そうと思います。
##こういうの
##ダウンロード
ソース一式を GitHub に置いてあります。
##使い方
PulsingHaloLayer (h,m) をプロジェクトに追加し、CALayer オブジェクトとして addSublayer するだけ 。
PulsingHaloLayer *halo = [PulsingHaloLayer layer];
halo.position = self.view.center;
[self.view.layer addSublayer:halo];
##カスタマイズ
###大きさを変える
radius プロパティに所望の値をセットすれば、半径が変わります。
self.halo.radius = 240.0;
###色を変える
CALayer にもともとある、backgroundColor に CGColorRef 型の値をセットします。
UIColor *color = [UIColor colorWithRed:0.7
green:0.9
blue:0.3
alpha:1.0];
self.halo.backgroundColor = color.CGColor;
###アニメーションの速度を変える
パルスの広がる速さについては animationDuration を、パルス間隔については pulseInterval を調整してください。
##デモ
半径、色のプロパティについてはリポジトリに同梱されているデモプロジェクトで挙動を確認できます。
##しくみ
- CALayer のサブクラスとして実装
- CALayer の
cornerRadiusプロパティで円形にしている - CAAnimationGroup で、x,y方向のscaleと、opacityのアニメーションを行っている
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.xy"];
scaleAnimation.fromValue = @0.0;
scaleAnimation.toValue = @1.0;
scaleAnimation.duration = self.animationDuration;
CAKeyframeAnimation *opacityAnimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
opacityAnimation.duration = self.animationDuration;
opacityAnimation.values = @[@0.45, @0.45, @0];
opacityAnimation.keyTimes = @[@0, @0.2, @1];
opacityAnimation.removedOnCompletion = NO;
NSArray *animations = @[scaleAnimation, opacityAnimation];
self.animationGroup.animations = animations;
##参考
ソースは下記OSSを参考にさせていただきました。
##（追記）複数パルスをサポートしました！
iBeaconアドベントカレンダーに名乗りを上げたものの、iBeaconをまったく触る時間がなく、逃げの一手としてつくった本ライブラリでしたが、その後（意外にも）OSSとして人気が出て、ありがたいことに pull request もちょくちょくいただくようになりました。
そんな中で、待望の 複数パルス表示 のプルリクをいただいたので、ぜひその素晴らしい新機能をご紹介したいと思います。
下のgifアニの右側のような感じです。
###実装方法
MultiplePulsingHaloLayer というクラスを使用します。
MultiplePulsingHaloLayer *multiLayer = [[MultiplePulsingHaloLayer alloc] initWithHaloLayerNum:3 andStartInterval:1];
multiLayer.position = self.view.center;
[multiLayer buildSublayers];
[self.view.layer addSublayer:multiLayer];
単発パルスと比べて増えた手順は
- 初期化時に引数を渡す
-
buildSublayersを呼ぶ
だけ！
##（追記）iBeaconを2台のiPhoneで試せるサンプル
iOS7の 新機能のサンプルコード を約20種詰め込んだオープンソースアプリ iOS7 Sampler に、iBeacon のサンプルを追加しました。
2台のiPhoneを使用して、一方をビーコン（Peripheral）、もう一方を監視側（Central）として iBeacon の挙動を試すことができます。
PulsingHaloも内部で用いています。