등속 회전 화면 가장자리의 도형
17147 단어 Swift
Storyboard를 사용하지 않으면 코드에서 그래픽이 생성됩니다.
Swift 초보자가 제작하면서 도형의 기본과 애니메이션의 기본을 조금 알기 때문에 설명을 해드리고 싶습니다.
코드
moveAround.swiftimport 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.swiftlet 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.swiftlet widthDuration: Double = 1.0
let heightDuration: Double = widthDuration * Double(screenHeight/screenWidth)
세로와 가로는 모두 등속으로 계산한 것이다.
애니메이션
마지막으로 주요 애니메이션 부분이다.
다음은 애니메이션의 기본 문법입니다.
animation.swiftUIView.animate(withDuration:[時間], delay:[遅延], options:[オプション], animations:{
//アニメーション部分
})
나는 방금 계산한 시간과 opition:
에 [.curveLiner]
를 넣었다.
등속 이동 옵션입니다.
다른 것은 또 많은데 이 문장에서 생략한다.
myAnimation.swiftUIView.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)
으로 함수를 다시 호출합니다.
참고 문헌
도면 생성
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)
으로 함수를 다시 호출합니다.참고 문헌
도면 생성
Reference
이 문제에 관하여(등속 회전 화면 가장자리의 도형), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/T-Kawashima/items/3e2131c6188de36d4557텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)