swift - 如何使用 swiftUI 沿自定义路径移动视图/形状?
问题描述
似乎没有一种直观的方式可以沿自定义路径移动视图/形状,尤其是弯曲路径。我找到了几个 UIKit 库,它们允许视图在 Bézier 路径上移动(DKChainableAnimationKit、TweenKit、Sica 等),但我对使用 UIKit 不太满意,并且一直遇到错误。
目前使用 swiftUI 我手动这样做:
import SwiftUI
struct ContentView: View {
@State var moveX = true
@State var moveY = true
@State var moveX2 = true
@State var moveY2 = true
@State var rotate1 = true
var body: some View {
ZStack{
Circle().frame(width:50, height:50)
.offset(x: moveX ? 0:100, y: moveY ? 0:100)
.animation(Animation.easeInOut(duration:1).delay(0))
.rotationEffect(.degrees(rotate1 ? 0:350))
.offset(x: moveX2 ? 0:-100, y: moveY2 ? 0:-200)
.animation(Animation.easeInOut(duration:1).delay(1))
.onAppear(){
self.moveX.toggle();
self.moveY.toggle();
self.moveX2.toggle();
self.moveY2.toggle();
self.rotate1.toggle();
// self..toggle()
}
}
} }
它在某种程度上完成了工作,但灵活性受到严重限制,并且复合延迟很快就会变得一团糟。
如果有人知道我如何获得自定义视图/形状以沿着以下路径行进,那将非常感激。
Path { path in
path.move(to: CGPoint(x: 200, y: 100))
path.addQuadCurve(to: CGPoint(x: 230, y: 200), control: CGPoint(x: -100, y: 300))
path.addQuadCurve(to: CGPoint(x: 90, y: 400), control: CGPoint(x: 400, y: 130))
path.addLine(to: CGPoint(x: 90, y: 600))
}
.stroke()
我设法找到的最接近的解决方案是在 SwiftUILab 上,但完整的教程似乎只对付费订阅者开放。
解决方案
好的,这并不简单,但我想帮助...
在下一个片段(macOS 应用程序)中,您可以看到可以根据需要进行调整的基本元素。
为简单起见,我选择简单的参数曲线,如果您喜欢使用更复杂的(复合)曲线,您必须解决如何将每个段的部分 t(参数)映射到整个曲线的复合 t(并且必须这样做用于部分沿轨道距离与复合轨道沿轨道距离之间的映射)。
为什么会出现这样的并发症?
飞机位移(恒速)所需的沿航迹距离与参数曲线定义所依赖的曲线参数 t 之间存在非线性关系。
先看看结果
接下来看看它是如何实现的。您需要研究此代码,并在必要时研究参数曲线的定义和行为方式。
//
// ContentView.swift
// tmp086
//
// Created by Ivo Vacek on 11/03/2020.
// Copyright © 2020 Ivo Vacek. All rights reserved.
//
import SwiftUI
import Accelerate
protocol ParametricCurve {
var totalArcLength: CGFloat { get }
func point(t: CGFloat)->CGPoint
func derivate(t: CGFloat)->CGVector
func secondDerivate(t: CGFloat)->CGVector
func arcLength(t: CGFloat)->CGFloat
func curvature(t: CGFloat)->CGFloat
}
extension ParametricCurve {
func arcLength(t: CGFloat)->CGFloat {
var tmin: CGFloat = .zero
var tmax: CGFloat = .zero
if t < .zero {
tmin = t
} else {
tmax = t
}
let quadrature = Quadrature(integrator: .qags(maxIntervals: 8), absoluteTolerance: 5.0e-2, relativeTolerance: 1.0e-3)
let result = quadrature.integrate(over: Double(tmin) ... Double(tmax)) { _t in
let dp = derivate(t: CGFloat(_t))
let ds = Double(hypot(dp.dx, dp.dy)) //* x
return ds
}
switch result {
case .success(let arcLength, _/*, let e*/):
//print(arcLength, e)
return t < .zero ? -CGFloat(arcLength) : CGFloat(arcLength)
case .failure(let error):
print("integration error:", error.errorDescription)
return CGFloat.nan
}
}
func curveParameter(arcLength: CGFloat)->CGFloat {
let maxLength = totalArcLength == .zero ? self.arcLength(t: 1) : totalArcLength
guard maxLength > 0 else { return 0 }
var iteration = 0
var guess: CGFloat = arcLength / maxLength
let maxIterations = 10
let maxErr: CGFloat = 0.1
while (iteration < maxIterations) {
let err = self.arcLength(t: guess) - arcLength
if abs(err) < maxErr { break }
let dp = derivate(t: guess)
let m = hypot(dp.dx, dp.dy)
guess -= err / m
iteration += 1
}
return guess
}
func curvature(t: CGFloat)->CGFloat {
/*
x'y" - y'x"
κ(t) = --------------------
(x'² + y'²)^(3/2)
*/
let dp = derivate(t: t)
let dp2 = secondDerivate(t: t)
let dpSize = hypot(dp.dx, dp.dy)
let denominator = dpSize * dpSize * dpSize
let nominator = dp.dx * dp2.dy - dp.dy * dp2.dx
return nominator / denominator
}
}
struct Bezier3: ParametricCurve {
let p0: CGPoint
let p1: CGPoint
let p2: CGPoint
let p3: CGPoint
let A: CGFloat
let B: CGFloat
let C: CGFloat
let D: CGFloat
let E: CGFloat
let F: CGFloat
let G: CGFloat
let H: CGFloat
public private(set) var totalArcLength: CGFloat = .zero
init(from: CGPoint, to: CGPoint, control1: CGPoint, control2: CGPoint) {
p0 = from
p1 = control1
p2 = control2
p3 = to
A = to.x - 3 * control2.x + 3 * control1.x - from.x
B = 3 * control2.x - 6 * control1.x + 3 * from.x
C = 3 * control1.x - 3 * from.x
D = from.x
E = to.y - 3 * control2.y + 3 * control1.y - from.y
F = 3 * control2.y - 6 * control1.y + 3 * from.y
G = 3 * control1.y - 3 * from.y
H = from.y
// mandatory !!!
totalArcLength = arcLength(t: 1)
}
func point(t: CGFloat)->CGPoint {
let x = A * t * t * t + B * t * t + C * t + D
let y = E * t * t * t + F * t * t + G * t + H
return CGPoint(x: x, y: y)
}
func derivate(t: CGFloat)->CGVector {
let dx = 3 * A * t * t + 2 * B * t + C
let dy = 3 * E * t * t + 2 * F * t + G
return CGVector(dx: dx, dy: dy)
}
func secondDerivate(t: CGFloat)->CGVector {
let dx = 6 * A * t + 2 * B
let dy = 6 * E * t + 2 * F
return CGVector(dx: dx, dy: dy)
}
}
class AircraftModel: ObservableObject {
let track: ParametricCurve
let path: Path
var aircraft: some View {
let t = track.curveParameter(arcLength: alongTrackDistance)
let p = track.point(t: t)
let dp = track.derivate(t: t)
let h = Angle(radians: atan2(Double(dp.dy), Double(dp.dx)))
return Text("").font(.largeTitle).rotationEffect(h).position(p)
}
@Published var alongTrackDistance = CGFloat.zero
init(from: CGPoint, to: CGPoint, control1: CGPoint, control2: CGPoint) {
track = Bezier3(from: from, to: to, control1: control1, control2: control2)
path = Path({ (path) in
path.move(to: from)
path.addCurve(to: to, control1: control1, control2: control2)
})
}
}
struct ContentView: View {
@ObservedObject var aircraft = AircraftModel(from: .init(x: 0, y: 0), to: .init(x: 500, y: 600), control1: .init(x: 600, y: 100), control2: .init(x: -300, y: 400))
var body: some View {
VStack {
ZStack {
aircraft.path.stroke(style: StrokeStyle( lineWidth: 0.5))
aircraft.aircraft
}
Slider(value: $aircraft.alongTrackDistance, in: (0.0 ... aircraft.track.totalArcLength)) {
Text("along track distance")
}.padding()
Button(action: {
// fly (to be implemented :-))
}) {
Text("Fly!")
}.padding()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
如果您担心如何实现“动画”飞机运动,SwiftUI 动画不是解决方案。您必须以编程方式移动飞机。
你必须导入
import Combine
添加到模型
@Published var flying = false
var timer: Cancellable? = nil
func fly() {
flying = true
timer = Timer
.publish(every: 0.02, on: RunLoop.main, in: RunLoop.Mode.default)
.autoconnect()
.sink(receiveValue: { (_) in
self.alongTrackDistance += self.track.totalArcLength / 200.0
if self.alongTrackDistance > self.track.totalArcLength {
self.timer?.cancel()
self.flying = false
}
})
}
并修改按钮
Button(action: {
self.aircraft.fly()
}) {
Text("Fly!")
}.disabled(aircraft.flying)
.padding()
最后我得到了
推荐阅读
- javascript - 跨浏览器以兼容 i18n 的方式以紧凑表示法显示大量数字(例如:将 122025999 显示为 122M 或 1.2亿)
- python - 我正在尝试将图像读入文件夹并将其存储在数组中,但出现索引错误
- ansible-tower - 安装 Ansible Tower 3.4.2 时 Python Libs 冲突
- arrays - 在 Google 表格中提取 URL 减去路径
- string - 用最后一个特殊字符替换子字符串,是逗号分隔字符串的(第三部分)
- android - getStringExtra() 中的空值
- assembly - 为什么我需要偏移运算符?
- javascript - 为 mousemove 事件添加延迟
- excel - 条件格式 - 在 VBA 中突出显示
- haskell - 如何使用反驳来指导 Haskell 中的类型检查器?