[iOS-swift]Lottieライブラリ

9751 ワード
テキストリンク
lotteとは?
Lottieは、最も少ないコードを使用してベクトルベースのアニメーションと芸術をリアルタイムでレンダリングするAndroidとiOS用のモバイルライブラリです.
Github
https://github.com/airbnb/lottie-ios
使用方法
cocoaPod
pod 'lottie-ios'
podFileを登録すると、次のインポートを実行できます.
import Lottie
アニメーションの使用

上記のLottieアニメーションを使用するには、Lottieサイトでまず画像を選択します.

右上にDownloadボタンがあり、Lottieが使用しているアニメーション拡張ファイルはJSONです.
.jsonという拡張子のファイルをダウンロードしました.

複雑なJSONフォームでコンテンツを表示できます.

ファイルの名前を変更し、プロジェクトに追加しました.
import UIKit
import Lottie

class ViewController: UIViewController {

    // MARK: - constant Property
    let animationView: AnimationView = {
        let animationView: AnimationView = .init(name: "mark")
        
        return animationView
    }()
    
    // MARK: - viewController
    override func viewDidLoad() {
        super.viewDidLoad()
        setup()
    }
    
    // MARK: - setup
    func setup() {
        addViews()
        setConstraints()
    }
    
    // MARK: - addViews
    func addViews() {
        view.addSubview(animationView)
    }
    
    // MARK: - setConstraints
    func setConstraints() {
        animationViewConstraints()
    }
    
    func animationViewConstraints() {
        animationView.translatesAutoresizingMaskIntoConstraints = false
        animationView.widthAnchor.constraint(equalToConstant: 200).isActive = true
        animationView.heightAnchor.constraint(equalToConstant: 200).isActive = true
        animationView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        animationView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    }
}
  • アニメーションを追加すると、すぐに関数が作成されます.
  • setupにビューを追加し、autoLayoutを追加します.
    • よし~~!

    このように追加できますよ???動かない.
    アニメーション形式で表示するには、メソッドを直接実行する必要があります.
    再生
    animationView.play()

    アニメーションは正常に動作しますが、一度だけ実行して停止します.
    したがって、アニメーションの繰り返しを設定する必要があります.
    アニメーションの繰り返しの設定
    // 단 한번 실행
animationView.loopMode = .playOnce```
// 무한적으로 실행
animationView.loopMode = .loop
// 2번 실행 후 종료
animationView.loopMode = .repeat(2)
    アニメーション速度の設定
    // 1.5배속
animationView.animationSpeed = 1.5
    アニメーションフレームの設定
    プレイ時初期化
            animationView.play(
            fromFrame: 0,
            toFrame: 0,
            loopMode: .loop,
            completion: nil
        )
    あなたのサブドメインを
    2.2 Vueコンポーネント化の詳細