등속 회전 화면 가장자리의 도형

17147 단어 Swift
그냥 Swift로 아래 애니메이션을 만들었어요.

Storyboard를 사용하지 않으면 코드에서 그래픽이 생성됩니다.
Swift 초보자가 제작하면서 도형의 기본과 애니메이션의 기본을 조금 알기 때문에 설명을 해드리고 싶습니다.

코드


moveAround.swift
import UIKit

class ViewController: UIViewController {

    var screenWidth: CGFloat = 0
    var screenHeight: CGFloat = 0

    override func viewDidLoad() {
        super.viewDidLoad()

        //画面のサイズ取得
        screenWidth = self.view.bounds.width
        screenHeight = self.view.bounds.height

        //図形(正方形)生成
        let rect = UIView.init()
        let rectColor = UIColor.blue
        rect.backgroundColor = rectColor
        self.view.addSubview(rect)

        moveAround(fig: rect, figSize: 20.0)
    }

    //関数
    //図形と(図形は正方形なので)図形の一辺の長さを引数として入力
    func moveAround(fig: UIView, figSize: CGFloat) {
        //一辺を動く時間
        let widthDuration: Double = 1.0
        let heightDuration: Double = widthDuration * Double(screenHeight/screenWidth)

        //初期位置を左上にセット
        fig.frame = CGRect(x: 0, y: 0, width: figSize, height: figSize)

        //アニメーション
        UIView.animate(withDuration: widthDuration, delay: 0, options:[.curveLinear], animations: {
                fig.center.x += (self.screenWidth-figSize)
            }, completion: { finished in
                UIView.animate(withDuration: heightDuration, delay: 0, options: [.curveLinear], animations: {
                        fig.center.y += (self.screenHeight-figSize)
                    }, completion: { finished in
                        UIView.animate(withDuration: widthDuration, delay: 0, options:[.curveLinear], animations: {
                                fig.center.x -= (self.screenWidth-figSize)
                            }, completion: { finished in
                                UIView.animate(withDuration: heightDuration, delay: 0, options: [.curveLinear], animations: {
                                        fig.center.y -= (self.screenHeight-figSize)
                                    }, completion: { finished in
                                        self.moveAround(fig: fig, figSize: figSize)
                                    })
                            })
                    })
            })
    }

}

해설


하나하나 최대한 자세하게 설명하다.
초보자를 대상으로 비교적 쓰다.비초보자는 이상한 점이 있으면 지적해 주세요.

화면 크기 가져오기


우선, 화면의 가장자리를 움직이기 때문에 화면의 사이즈를 취한다.
아래 코드로 찾으세요.
getDisplaySize.swift
let screenWidth = self.view.bounds.width
let screenHeight = self.view.bounds.height
이번에도 함수에서 사용하고 싶으므로viewDidLoad () 에서 정의한 다음 에서 찾습니다.
더 시원한 방법이 있다면 m(__) 알려주세요.m

그래픽 생성


이번에 정사각형이 생겼으니 당연히 장방형일 수도 있다.
다른 도형의 생성 방법은 마지막 참고 문헌에도 다른 사람의 기사가 실릴 것이니 거기서 보십시오.
makeFigure.swift
//View生成
let figure = UIView.init()
//初期位置とサイズを設定
figure.frame = CGRect(x: 0, y: 0, width: figSize, height: figSize)
//色を設定
let color = UIColor.blue
figure.backgroundColor = color
//画面に表示
self.view.addSubview(figure)
CGRect를 변경하면 다른 그래픽도 생성됩니다.

이동 시간(속도) 계산


다음은 함수 moveAround()입니다.
함수의 매개변수는 UIVIew(그래픽) 및 그래픽(정사각형) 한 쪽 길이입니다.
우선 이동 시간(속도)을 계산합니다.
calcDuration.swift
let widthDuration: Double = 1.0
let heightDuration: Double = widthDuration * Double(screenHeight/screenWidth)
세로와 가로는 모두 등속으로 계산한 것이다.

애니메이션


마지막으로 주요 애니메이션 부분이다.
다음은 애니메이션의 기본 문법입니다.
animation.swift
UIView.animate(withDuration:[時間], delay:[遅延], options:[オプション], animations:{
    //アニメーション部分
})
나는 방금 계산한 시간과 opition:[.curveLiner] 를 넣었다.
등속 이동 옵션입니다.
다른 것은 또 많은데 이 문장에서 생략한다.
myAnimation.swift
UIView.animate(withDuration: widthDuration, delay: 0, options:[.curveLinear], animations: {
    //一番目のアニメーション
    //図形のx座標を+方向に画面端まで移動
    fig.center.x += (self.screenWidth-figSize)
}, completion: { finished in
    UIView.animate(withDuration: heightDuration, delay: 0, options: [.curveLinear], animations: {
        //2番目のアニメーション
        //図形のy座標を+方向に画面端まで移動
        fig.center.y += (self.screenHeight-figSize)
    }, ...
애니메이션의 작법은 아직 매우 많다.
물론 이동할 수 있을 뿐만 아니라 크기도 바꿀 수 있다.
다른 애니메이션을 계속 추가하려면 요소 completion: { finished in } (예: 시간 및 옵션) 에 애니메이션 코드를 추가합니다.
이번 애니메이션은 반복적으로 순환하고 싶어서 4변의 모든 애니메이션을 끝낸 후 다섯 번째 애니메이션self.moveAround(fig: fig, figSize: figSize)으로 함수를 다시 호출합니다.

참고 문헌


도면 생성
  • UIBezierPath를 사용하여 그래픽-SuperSPFTWARE 그리기
  • [iPhone] iOS 응용 프로그램 드로잉 UIBezierPath 개발 - iOS 응용 프로그램 사용
  • 애니메이션
  • iOS 응용 프로그램 개발에서 애니메이션을 만들려면 기초를 잡고 싶어요. - Qiita.
  • 연속 UIVIew 애니메이션 반복 - Qiita
  • 좋은 웹페이지 즐겨찾기