전파 같은 애니메이션을 3행으로 추가하는 「Pulsator」의 사용법과 실장 해설

펄스적인 애니메이션을 쉽게 추가할 수 있는 OSS입니다.

htps : // 기주 b. 코 m / 슈 223 / 푸 l 사토 r

맵의 현재값이라든지, 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 베이스로 해 두어 좋았습니다. . ↩