비콘적인 연출을 한다 for iBeacon

이 기사는 iBeacon Advent Calendar 4일째 기사이지만, iBeacon의 이야기는 전혀 나오지 않습니다. 1

오히려 iOS7의 새로운 기능에 대한 이야기도 없고, iOS의 고대 시대부터 Core Animation을 사용해 비콘적인 연출2을 하는 클래스를 만들었기 때문에, 그 소개로 차를 흐리게 하려고 합니다.

이런





다운로드



소스 세트는 GitHub에 있습니다.

PulsingHalo

사용법



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 방향의 스케일 및 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를 참고로 했습니다.

    SVPulsingAnnotationView

    (추기) 복수 펄스를 서포트했습니다!



    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 샘플을 추가했습니다.

    두 개의 iPhone을 사용하여 하나를 비콘 (Peripheral), 다른 하나를 감시 측 (Central)으로 iBeacon의 행동을 시도 할 수 있습니다.

    PulsingHalo도 내부에서 사용하고 있습니다.
  • 참고로 한 기사
  • [iOS 7] 새로운 영역 관측 서비스 iBeacon을 사용해보기 | Developers.IO
  • iBeacon Tips: 올바른 비콘 감시 방법 | 브라이테크노 Blog




  • iBeacon이란 무엇인가, 라고 하는 곳으로부터 공부하면서 뭔가 쓰려고 생각하고 있었습니다만, 막상 공부하려고 여기 (을)를 보면 쓰고 싶었던 재료가 전부 기출이 되어 있었습니다

    Estimote의 앱에서도 이런 연출을 하고 있었으므로, 이런 것이 비콘적인 것일까. . 

    좋은 웹페이지 즐겨찾기