Lottie

iOS Lottie 다루는 법

 

1. Cocoapods 에 추가한다. 

2. lottiefiles.com 에 가서 원하는 Animation 을 다운 받는다.

3. XCode Project 로 가져온다.

4. import Lottie

 

5. 코드 

import UIKit
import Lottie

class ViewController: UIViewController {
    
    let animationView = AnimationView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupAnimation()
    }
    private func setupAnimation() {
        animationView.animation = Animation.named("paperplane")
        
        animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        animationView.center = view.center
        animationView.contentMode = .scaleAspectFit
        
//                  반복 선택
//              animationView.loopMode = .loop // 1. 같은 Animation 반복
        animationView.loopMode = .repeatBackwards(10)  // 앞뒤로 10 회 반복
        
        animationView.animationSpeed = 2 // Animation Speed 조정
        
        animationView.play() // Animation 재생.
        view.addSubview(animationView)
        
//                원하는 Animation '구간'만 보여주기.
//                animationView.play(fromFrame: <#T##AnimationFrameTime?#>, toFrame: <#T##AnimationFrameTime#>, loopMode: <#T##LottieLoopMode?#>, completion: <#T##LottieCompletionBlock?##LottieCompletionBlock?##(Bool) -> Void#>)
//                animationView.play(fromProgress: <#T##AnimationProgressTime?#>, toProgress: <#T##AnimationProgressTime#>, loopMode: <#T##LottieLoopMode?#>, completion: <#T##LottieCompletionBlock?##LottieCompletionBlock?##(Bool) -> Void#>)
        
//                원하는 Frame 만 보여주기 (Animation X)
//                animationView.currentFrame = 20
//                animationView.currentProgress = 0.3

    }
}

// lottiefiles.com

 

 

 

 

가져온 Lottie File(Animation) 의 이름은 paperplane,

 

JSON Format 이고, 대략 이렇게 생겼다. 

 

 

{"v":"5.5.8","fr":50,"ip":0,"op":147,"w":800,"h":600,"nm":"Paperplane","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"planete Outlines - Group 4","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":0,"s":[0]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":38,"s":[50]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":88,"s":[50]},{"t":120,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[468.336,323.378,0],"to":[-29,0,0],"ti":[29,0,0]},{"t":102,"s":[294.336,323.378,0]}],"ix":2},"a":{"a":0,"k":[453.672,304.756,0],"ix":1},"s":{"a":0,"k":[50,50,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[6.742,0],[0.741,-0.14],[0,0.074],[13.484,0],[1.669,-0.361],[19.79,0],[3.317,-19.082],[2.691,0],[0,-13.484],[-0.048,-0.629],[2.405,0],[0,-6.742],[-6.742,0],[0,0],[0,6.743]],"o":[[-0.781,0],[0.001,-0.074],[0,-13.484],[-1.778,0],[-3.594,-18.742],[-20.03,0],[-2.421,-0.804],[-13.485,0],[0,0.642],[-1.89,-1.199],[-6.742,0],[0,6.743],[0,0],[6.742,0],[0,-6.742]],"v":[[75.134,16.175],[72.85,16.396],[72.856,16.175],[48.44,-8.241],[43.262,-7.685],[3.406,-40.591],[-36.571,-6.995],[-44.269,-8.241],[-68.685,16.175],[-68.604,18.079],[-75.133,16.175],[-87.341,28.383],[-75.133,40.592],[75.134,40.592],[87.342,28.383]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.815686334348,0.823529471603,0.827451040231,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[453.672,304.756],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":151,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Merged Shape Layer","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.547],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.845],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":77,"s":[35]},{"t":150,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[390.319,298.2,0],"to":[0,-2.583,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":44,"s":[390.319,282.7,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":110,"s":[390.319,319.25,0],"to":[0,0,0],"ti":[0,0,0]},{"t":150,"s":[390.319,298.2,0]}],"ix":2},"a":{"a":0,"k":[664.319,256.2,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[18.967,-3.189],[-18.967,19.935],[-0.949,-19.935]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.223528981209,0.192156970501,0.674510002136,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[236.879,292.737],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[633.939,275.369],"ix":2},"a":{"a":0,"k":[236.879,292.737],"ix":1},"s":{"a":0,"k":[50,50],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"planete Outlines - Group 1","np":1,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-98.335,64.79],[-105.619,4.984],[105.619,-64.79],[-80.316,24.919]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.278430998325,0.294117987156,0.847059011459,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[316.247,247.882],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[673.623,252.941],"ix":2},"a":{"a":0,"k":[316.247,247.882],"ix":1},"s":{"a":0,"k":[50,50],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"planete Outlines - Group 2","np":1,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-133.812,-42.171],[133.812,-75.141],[5.765,75.141],[-61.708,18.402],[124.227,-71.307],[-87.011,-1.534]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.365000009537,0.407999992371,0.976000010967,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[297.638,254.4],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tr","p":{"a":0,"k":[664.319,256.2],"ix":2},"a":{"a":0,"k":[297.638,254.4],"ix":1},"s":{"a":0,"k":[50,50],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"planete Outlines - Group 3","np":1,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":151,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"planete Outlines - Group 5","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":45,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":102,"s":[100]},{"t":150,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[327.38,267.583,0],"to":[25.833,0,0],"ti":[-25.833,0,0]},{"t":150,"s":[482.38,267.583,0]}],"ix":2},"a":{"a":0,"k":[171.76,193.166,0],"ix":1},"s":{"a":0,"k":[50,50,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[13.485,0],[4.38,-4.171],[21.913,0],[3.575,-18.765],[1.851,0],[0,-13.484],[-0.011,-0.291],[1.599,0],[0,-6.743],[-6.742,0],[0,0],[0,13.485]],"o":[[-6.526,0],[-0.793,-21.719],[-19.806,0],[-1.734,-0.391],[-13.485,0],[0,0.293],[-1.4,-0.559],[-6.742,0],[0,6.742],[0,0],[13.485,0],[0,-13.484]],"v":[[59.669,-8.242],[42.84,-1.506],[2.287,-40.592],[-37.576,-7.638],[-42.962,-8.242],[-67.378,16.174],[-67.356,17.049],[-71.878,16.174],[-84.086,28.383],[-71.878,40.591],[59.669,40.591],[84.086,16.174]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.816000007181,0.823999980852,0.827000038297,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[171.76,193.166],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":151,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Pre-comp 1","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[406,306,0],"ix":2},"a":{"a":0,"k":[400,300,0],"ix":1},"s":{"a":0,"k":[179,179,100],"ix":6}},"ao":0,"w":800,"h":600,"ip":0,"op":147,"st":0,"bm":0}],"markers":[]}

 

해당 코드를 더 예쁘게 보려면, https://jsonformatter.org/json-pretty-print 을 이용하면 된다.

 

추가.

Lottie 를 이용할 때 색상을 바꾸고 싶으면 결제를 하고 웹에서 변경된 색상을 다운로드 받을 수도 있지만, 

해당 JSON File 의 특정 값들을 바꿔서 이용할 수도 있다. 

 

Image 값의 경우 Scale은 RGBA , 0 ~1 까지의  이며, 

 

특정 값을 바꿔주면 다음과 같이 변경도 가능하다. 

 

어떤 값을 바꿔주면 어떻게 변하는지는 아직 잘 모르겠지만,

https://lottiefiles.com/tools/json-editor

해당 페이지를 참고하면 비교적 쉽게 시도해볼 수 있다. 

이런 식으로도 변경 가능하다. 

 

json file 일부 

  "k": [
                50,
                50,
                100
              ],

를 

  "k": [
                150,
                150,
                100
              ]

으로 바꿨을 때의 결과 

 

 

 

* 앱을 출시할 때 해당 Animation 이 사용되면, Airbnb 를 참조했다고 명시해야 한다고 한다. 

 

 

코드 예쁘게 보기  https://jsonformatter.org/json-pretty-print

소스코드 참고: https://www.youtube.com/watch?v=9ajGmWK7f-k 

Animation property 일부 참고: https://babbab2.tistory.com/142