swift로 카운트업 애니메이션을 구현합니다.

9771 단어 XcodeSwift

원하는 애니메이션





다른 클래스를 만들기 때문에 비교적 깨끗하게 코드를 쓸 수 있다고 생각합니다.

CountAnimateLabel.swift
import UIKit

final class CountAnimateLabel: UILabel{

    var startTime: CFTimeInterval!
    var fromValue: Int!
    var toValue: Int!
    var duration: TimeInterval!

    func animate(from fromValue: Int, to toValue: Int, duration: TimeInterval) {
        text = "\(fromValue)"

        // 開始時間を保存
        self.startTime = CACurrentMediaTime()

        self.fromValue = fromValue
        self.toValue = toValue
        self.duration = duration

        // CADisplayLinkの生成
        let link = CADisplayLink(target: self, selector: #selector(updateValue))
        link.add(to: .current, forMode: .default)
    }

    // 描画タイミング毎に呼ばれるメソッド
    @objc func updateValue(link: CADisplayLink) {
        // 開始からの進捗 0.0 〜 1.0くらい
        let dt = (link.timestamp - self.startTime) / duration

        // 終了時に最後の値を入れてCADisplayLinkを破棄
        if dt >= 1.0 {
            text = "\(toValue!)"
            link.invalidate()
            return
        }

        // 最初の値に進捗に応じた値を足して現在の値を計算
        let current = Int(Double(toValue - fromValue) * dt) + fromValue
        text = "\(current)"
    }
}


이 클래스를 인스턴스화해, 임의의 타이밍에서 animate 메소드를 호출합니다.

CountAnimateLabel.swift
import UIKit

final class ShowSumViewController: UIViewController {

    var label: CountAnimateLabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        setUpViews()
    }

    private func setUpViews() {

        label = CountAnimateLabel()
        let labelWidth = 200
        let labelHeight = 100
        label.frame = CGRect(x: (Int(view.frame.size.width) - labelWidth) / 2 , y: (Int(view.frame.size.height) - labelHeight) / 2, width: labelWidth, height: labelHeight)
        label.textColor = .black
        label.textAlignment = .center
        label.font = label.font.withSize(100)
        view.addSubview(label)

        label.animate(from: 0, to: 100, duration: 0.7)
    }

}


from은 시작시의 숫자, to는 종료시의 숫자, duration은 시간을 나타내므로, 적절히 변경해 주세요.

참고



사용해 주셨습니다 🐝

좋은 웹페이지 즐겨찾기