Swift를 사용한 간단한 차트 애니메이션(CABasicAnimation)

13697 단어 Swift

하고 싶은 일

스위프트로 애니메이션을 만들려면 매번 투덜거리는 곳부터 시작해서 자기 방식대로 필기를 한다
이번에는 인 함수의 도표를 살짝 애니메이션해 볼게요.

개발 환경

Xcode: 10.3
Swift: 5.0.1

결론

ViewController.swift

class ViewController: UIViewController {

    var layer_frame = CGRect()

    override func viewDidLoad() {
        super.viewDidLoad()
        layer_frame = CGRect(x: 0, y: view.frame.height/2 - 60, width: view.frame.width, height: 120)
    }

    @IBAction func onTouch(_ sender: Any) {
        // アニメーションを作成
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = 1.0
        animation.fromValue = 0.0
        animation.toValue = 1.0

        // sinグラフを描画するレイヤー
        let layer = CAShapeLayer()
        layer.frame = layer_frame
        layer.backgroundColor = UIColor.gray.cgColor
        layer.strokeColor = UIColor.cyan.cgColor
        layer.fillColor = UIColor.gray.cgColor
        layer.lineWidth = 3.0
        layer.path = create_sin_path()
        // レイヤーにアニメーションを付加
        layer.add(animation, forKey: nil)

        view.layer.addSublayer(layer)
    }

    // sin関数のCGPathを作成
    func create_sin_path() -> CGPath {
        let div: Double = 1 / 100
        let sin_path = UIBezierPath()
        let origin = CGPoint(x: layer_frame.width/2 - CGFloat(50*Double.pi), y: layer_frame.height / 2.0)
        sin_path.move(to: origin)
        for i in 0 ... Int(2.0*Double.pi / div) {
            let point_x = div * Double(i)
            let point_y = sin(point_x)
            let point = CGPoint(x: 50*point_x + Double(origin.x), y: -50*point_y + Double(origin.y))
            sin_path.addLine(to: point)
        }
        return sin_path.cgPath
    }
}

설명

1. CABasicAnimation을 통해 애니메이션 처리 설명

애니메이션 방법은 여러 가지가 있지만 이번에는 CABasicAnimation을 사용해 보겠습니다.
아래의 사이트는 매우 참고 가치가 있기 때문에 상세한 것을 알고 싶은 사람은 보십시오.
iOS 응용 프로그램 개발 애니메이션의 토대
이번 인코딩으로 CABasicAnimation은 strokeEnd 속성을 변경했습니다.

let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.duration = 1.0    // アニメーションの時間
animation.fromValue = 0.0   // 変化させる値の初期値
animation.toValue = 1.0     // 変化させる値の終点値

2. 애니메이션 그래프를 그릴 레이어 만들기

그림% 1개의 캡션을 편집했습니다.그래프의 종류에 따라서도 다르지만, 이번에는 UIBezierPath로 그래프를 만들기 때문에 그래프는 CAShapper Layer를 사용한다.
UIBezierPath와 CAShappeLayer의 사용 방법은 아래 사이트를 참고하였다.
Swift에서 그리기 및 애니메이션하기 전의 설명
CAShpeLayer의 path 속성에 그릴 차트의 CGPath(UIBezierPath)를 설정하면 됩니다.또한 stroker 속성에서 선의 색을 지정할 수 있습니다.

let layer = CAShapeLayer()
layer.frame = layer_frame                       // 位置、サイズを指定
layer.backgroundColor = UIColor.gray.cgColor    // 背景
layer.strokeColor = UIColor.cyan.cgColor        // 線の色
layer.fillColor = UIColor.gray.cgColor          // 図形（グラフ）の内側の色？（グラフを描画するならbackgroundColorと同じのほうがいいかも？）
layer.lineWidth = 3.0                           // 線の太さ
layer.path = create_sin_path()                  // 描画する図形（グラフ）

나는 공식 문서에서 다른 속성의 상세한 상황을 알 수 있다고 생각한다.
CAShapeLayer - Core Animation | Apple Developer Documentation

차트 만들기

create_sin_path()에sin 함수의 도표를 만듭니다.나는 상세한 설명을 생략했다. 단지 UIBezierPath에서 인 함수의 x 좌표와 y 좌표를 선으로 연결할 뿐이다.
솔직히 한 줄만 있어도 애니메이션은 확인할 수 있기 때문에sin 함수 w를 사용할 필요가 없다.