์ƒ์„ธ ์ปจํ…์ธ 

๋ณธ๋ฌธ ์ œ๋ชฉ

[iOS] Lottie ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜๋ฐฉ๋ฒ• - ๋Ÿฐ์น˜์Šคํฌ๋ฆฐ ๋งŒ๋“ค๊ธฐ_์ฝ”๋“œ๋ฒ ์ด์Šค

๐ŸŽ iOS/UIKit

by AHN.Jihyeon 2024. 7. 5. 03:23

๋ณธ๋ฌธ

ํŒ€ํ”„๋กœ์ ํŠธ ๋•Œ ๋‚ด๊ฐ€ ๋งก์€ ๋ถ€๋ถ„์€ ๊ตฌํ˜„์ด ๋๋‚˜์„œ

๋Ÿฐ์น˜์Šคํฌ๋ฆฐ์ด ์žˆ์œผ๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™์•„ ์ฐพ์•„ ๋ณธ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ด๋ณธ๋‹ค. 

 

 


Lottie ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ 

Lottie๋Š” gif์™€ ๊ฐ™์€ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ JSON ํ˜•์‹์œผ๋กœ ์—์–ด๋น„์•ค๋น„์—์„œ ์ œ๊ณตํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‹ค. 

๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ importํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์ฝ”์ฝ”์•„ํŒŸ, ์นด๋ฅดํƒ€๊ณ , SPM ๋“ฑ์ด ์žˆ์ง€๋งŒ

๋‚˜๋Š” ๊ฐœ์ธ์ ์œผ๋กœ SPM์ด ๊ฐ„๋‹จํ•ด์„œ ์ด ๋ฐฉ๋ฒ•์œผ๋กœ ์ถ”๊ฐ€ํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. 

 

 

 

์„ค์น˜ ๋ฐฉ๋ฒ•

1. ๊ณต์‹ ๊นƒํ—ˆ๋ธŒ์—์„œ ๋งํฌ ๋ณต์‚ฌ

https://github.com/airbnb/lottie-ios

 

 

 

2. project์—์„œ packages์— ์ถ”๊ฐ€ํ•ด์ค€๋‹ค. 

 

 

 

 

 

3. Lottie ํ™ˆํŽ˜์ด์ง€์—์„œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ฒ€์ƒ‰ ํ›„ ํŒŒ์ผ ์ €์žฅ 

https://lottiefiles.com/

 

 

 

 

4. Xcode์—์„œ Assets ํ•˜๋‹จ์— JSONํŒŒ์ผ ์ถ”๊ฐ€ 

 

 

 

5. import Lottie

 

 

 


์ฝ”๋“œ

import Lottie

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //๋Ÿฐ์น˜์Šคํฌ๋ฆฐ
        let animationView: LottieAnimationView = .init(name: "coffee") //JSON ํŒŒ์ผ๋ช…
        animationView.frame = self.view.bounds  //์ „์ฒดํ™”๋ฉด
        animationView.contentMode = .scaleAspectFit  //ํ™”๋ฉด์— ๊ฐ€๋“ ์ฐจ๊ฒŒ
        
        self.view.addSubview(animationView)
        
        animationView.play{ (finished) in
            if finished {
                // ์• ๋‹ˆ๋ฉ”์ด์…˜์ด ์ข…๋ฃŒ๋˜๋ฉด animationView๋ฅผ ์ œ๊ฑฐ
                animationView.removeFromSuperview()
                self.setupCoffeeListView()
            }
        }

    }
}

 

 

 

์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰ 

//์ด ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•ด์•ผ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‹คํ–‰์ด ๋จ

//๋ฐฉ๋ฒ•1
 self.animationView.play()
 
 //๋ฐฉ๋ฒ•2
  animationView.play {(finish) in
        	...
        }

 

 

์• ๋‹ˆ๋ฉ”์ด์…˜ ์žฌ์ƒ ์†๋„

// ์• ๋‹ˆ๋ฉ”์ด์…˜ 0.5๋ฐฐ์† ์žฌ์ƒ
animationView.animationSpeed = 0.5
    
// ์• ๋‹ˆ๋ฉ”์ด์…˜ 2๋ฐฐ์† ์žฌ์ƒ
animationView.animationSpeed = 2

 

 

 

์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ฐ˜๋ณต ํšŸ์ˆ˜

// ๋ฌดํ•œ ์‹คํ–‰
animationView.loopMode = .loop

// 1๋ฒˆ๋งŒ ์‹คํ–‰
animationView.loopMode = .playOnce
        
// 2๋ฒˆ ์‹คํ–‰ํ•˜๊ณ  ์ข…๋ฃŒ
animationView.loopMode = .repeat(2)

 

 

 

์‹คํ–‰ ํ™”๋ฉด

๊ด€๋ จ๊ธ€ ๋”๋ณด๊ธฐ