표시되는 값이 애니메이션하면서 바뀌는 UILabel을 만들어 보았다.

소개

앱을 만들면

UILabel로 표시되는 값이 바뀔 때 기계적입니다.

라고 느끼는 부분이 조금 나왔습니다.

부드럽게 바뀌면 보는 것이 즐거워진다.

라고, 문득 생각했기 때문에, 만들어 보기로 했습니다.

결과

변화 방법 등, 여러분은 자유롭게 변화해 주시면()

구현

먼저 구현을 보여줍니다.

final class AnimateValueLabel: UILabel {

    private var loop         : CADisplayLink?
    private var startTime    : TimeInterval    = 0.0
    private var currentValue : Int             = 0
    private var newValue     : Int             = 0

    func setData(value: Int, animated: Bool = false) {
        self.newValue = value
        if animated && self.currentValue != self.newValue {
            self.animateValue()
        }
        else {
            self.currentValue = value
            self.setText(value: self.currentValue)
        }
    }

    private func animateValue() {
        self.startTime = Date.timeIntervalSinceReferenceDate
        self.loop      = CADisplayLink(target: self, selector: #selector(self.update))

        if #available(iOS 10.0, *) {
            self.loop?.preferredFramesPerSecond = 60
        }
        else {
            self.loop?.frameInterval = 1
        }

        self.loop?.add(to: .current, forMode: .common)
        self.loop?.isPaused = false
    }

    @objc
    private func update(displayLink: CADisplayLink) {
        let duration : TimeInterval = 0.3
        let elapsed  : TimeInterval = Date.timeIntervalSinceReferenceDate - self.startTime

        let progress: Int = Int(Easing.easeIn.quart.getProgress(elapsed: elapsed, duration: duration, startValue: CGFloat(self.currentValue), endValue: CGFloat(self.newValue)))

        self.setText(value: progress)

        if duration < elapsed {
            self.loop?.isPaused = true
            self.loop?.invalidate()
            self.currentValue = self.newValue
        }
    }

    private func setText(value: Int) {
        self.text = value
    }
}

CADisplayLink나 Easing에 관해서는 과거 기사를 참고해 주시는 것으로,

h tps:// 퀵했다. 작은 m / 포옹 MS / MS / c87d335756042bc867C4
htps : // 코 m / 하구 호 ms / ms / 아 bc5635 8895719cb12

이제 setData에 전달한 value를 애니메이션으로 표시하는 데 성공했습니다.

(쉼표가 붙어있는 것은 여기에 쓴 코드에는없는 기능입니다 ←)

마지막으로

물론 기계적이 나쁘다든가 그런 이야기에서는 일절 없습니다.

그리고 모든 것이 애니메이션을 만드는 것이 옳지 않다고 생각합니다.

하지만, 안고 있는 불만이나 떠오른 것을 시험해 보고, 체험 가치적으로 좋다면 제품에 도입하는, 그런 시도를 오로지 하는 여행도 나쁘지 않아, 즉은 그러한 것입니다.