소개

Swift의 라이브러리에서 "Comets"라는 애니메이션 라이브러리가 조금 신경이 쓰였으므로 만져 보았습니다.

유성과 같은 표현을 간단하게 할 수 있는 라이브러리로 매우 간단하게 애니메이션을 실현할 수 있으므로, 그 방법을 기재합니다.

이번에 만든 애니메이션

조속하지만, 이번에 만든 애니메이션은 다음과 같으며, 샘플에 따라 코드를 기재하면 사쿠와 다음과 같은 애니메이션을 실현할 수 있었습니다.

만드는 방법

라이브러리 설치

라이브러리 설치에는 CocoaPods 또는 Carthage를 사용할 수 있습니다.

CocoaPods

pod "Comets"

Carthage

github "cruisediary/Comets" ~> 0.3.1

라이브러리 도입

위의 방법 중 하나로 라이브러리를 설치하고 라이브러리를 가져옵니다.

import Comets

코드 작성

각 애니메이션 할 선의 시작점, 끝점, 색상 정보를 나열하고 뷰 레이어에 추가하고 애니메이션을 시작합니다.

// アニメーションさせる線情報の記述
let width = view.bounds.width
let height = view.bounds.height
let comets = [Comet(startPoint: CGPoint(x: 100, y: 0),
                    endPoint: CGPoint(x: 0, y: 100),
                    lineColor: UIColor.white.withAlphaComponent(0.2),
                    cometColor: UIColor.white),
              Comet(startPoint: CGPoint(x: 0.4 * width, y: 0),
                    endPoint: CGPoint(x: width, y: 0.8 * width),
                    lineColor: UIColor.white.withAlphaComponent(0.2),
                    cometColor: UIColor.white),
              Comet(startPoint: CGPoint(x: 0.8 * width, y: 0),
                    endPoint: CGPoint(x: width, y: 0.2 * width),
                    lineColor: UIColor.white.withAlphaComponent(0.2),
                    cometColor: UIColor.white),
              Comet(startPoint: CGPoint(x: width, y: 0.2 * height),
                    endPoint: CGPoint(x: 0, y: 0.25 * height),
                    lineColor: UIColor.white.withAlphaComponent(0.2),
                    cometColor: UIColor.white),
              Comet(startPoint: CGPoint(x: 0, y: height - 0.8 * width),
                    endPoint: CGPoint(x: 0.6 * width, y: height),
                    lineColor: UIColor.white.withAlphaComponent(0.2),
                    cometColor: UIColor.white),
              Comet(startPoint: CGPoint(x: width - 100, y: height),
                    endPoint: CGPoint(x: width, y: height - 100),
                    lineColor: UIColor.white.withAlphaComponent(0.2),
                    cometColor: UIColor.white),
              Comet(startPoint: CGPoint(x: 0, y: 0.8 * height),
                    endPoint: CGPoint(x: width, y: 0.75 * height),
                    lineColor: UIColor.white.withAlphaComponent(0.2),
                    cometColor: UIColor.white)]

// 描画とアニメーション開始
for comet in comets {
    view.layer.addSublayer(comet.drawLine())
    view.layer.addSublayer(comet.animate())
}

사이고에게

위의 코드만으로 매우 간단하게 이미지와 같은 애니메이션을 실현할 수 있었습니다.
시작점, 끝점, 색 정보를 조정하면 표현도 바꿀 수 있으므로, 취향의 외형을 간단하게 만들 수 있을 것 같습니다.
보고 있어 예쁘기 때문에, 앱의 배경 애니메이션에 활용하는, 로딩의 애니메이션으로서 사용하는, 등 사용도가 있을 것 같습니다.