如何解决SwiftUI 圆形动画
我想根据箭头旋转以圆周运动为红色和绿色圆圈设置动画。我可以做到这一点，但这里是棘手的部分：我还想通过按下另一组按钮来旋转圆圈，并且它们需要动画，就好像它们属于另一个圆圈一样。同样的谜题出现在游戏“机械之王”的监狱情节中。
这很难解释，所以如果你有时间，请运行我的代码并观看 Machinarium 监狱拼图的视频:)
我猜在 swiftui 游戏“flipinity”中采用了类似的方法。任何帮助表示赞赏。对不起，代码太乱了:)
var body: some View {
ZStack {
vstack {
HStack {
ZStack {
Circle()
.fill(Color.green)
.frame(width: 40,height: 40)
.offset(x: -100)
.rotationEffect(.degrees(degree1))
.animation(Animation.eaSEOut(duration: 1))
Circle()
.fill(Color.red)
.frame(width: 40,height: 40)
.offset(x: -50,y: -86)
.rotationEffect(.degrees(degree1))
.animation(Animation.eaSEOut(duration: 1))
Circle()
.fill(Color.green)
.frame(width: 40,height: 40)
.offset(x: 50,height: 40)
.offset(x: 100,y: 0)
.rotationEffect(.degrees(degree1))
.animation(Animation.eaSEOut(duration: 1))
Circle()
.fill(Color.red)
.frame(width: 40,y: 86)
.rotationEffect(.degrees(degree1))
.animation(Animation.eaSEOut(duration: 1))
Circle()
.fill(Color.green)
.frame(width: 40,y: 86)
.rotationEffect(.degrees(degree1))
.animation(Animation.eaSEOut(duration: 1))
HStack(spacing: 20){
Image("left")
.resizable()
.scaledToFit()
.frame(width: 80,height: 80)
.rotationEffect(.init(degrees: 285))
.offset(x: -75,y: -90)
.onTapGesture(perform: {
degree1 -= 60
x = true
y = false
z = false
})
Image("right")
.resizable()
.scaledToFit()
.frame(width: 80,height: 80)
.rotationEffect(.init(degrees: 245))
.offset(x: -175,y: 90)
.onTapGesture(perform: {
degree1 += 60
x = true
y = false
z = false
})
}
}
.offset(x: 48,y: -100)
ZStack {
Circle()
.fill(Color.red)
.frame(width: 40,height: 40)
.offset(x: -100)
.rotationEffect(.degrees(degree2))
.animation(Animation.eaSEOut(duration: 1))
Circle()
.fill(Color.red)
.frame(width: 40,y: -86)
.rotationEffect(.degrees(degree2))
.animation(Animation.eaSEOut(duration: 1))
Circle()
.fill(Color.red)
.frame(width: 40,y: 0)
.rotationEffect(.degrees(degree2))
.animation(Animation.eaSEOut(duration: 1))
Circle()
.fill(Color.green)
.frame(width: 40,y: 86)
.rotationEffect(.degrees(degree2))
.animation(Animation.eaSEOut(duration: 1))
HStack(spacing: 20){
Image("left")
.resizable()
.scaledToFit()
.frame(width: 80,height: 80)
.rotationEffect(.init(degrees: 116))
.offset(x: 166,y: 100)
.onTapGesture(perform: {
degree2 -= 60
x = false
y = true
z = false
})
Image("right")
.resizable()
.scaledToFit()
.frame(width: 80,height: 80)
.rotationEffect(.init(degrees: 60))
.offset(x: 62,y: -100)
.onTapGesture(perform: {
degree2 += 60
x = false
y = true
z = false
})
}
}
.offset(x: -40,y: -100)
}
ZStack {
Circle()
.fill(Color.green)
.frame(width: 40,height: 40)
.offset(x: 50,y: 86)
.rotationEffect(.degrees(degree3))
.animation(Animation.eaSEOut(duration: 1))
Circle()
.fill(Color.red)
.frame(width: 40,height: 40)
.offset(x: -50,y: 86)
.rotationEffect(.degrees(degree3))
.animation(Animation.eaSEOut(duration: 1))
HStack(spacing: 20){
Image("right")
.resizable()
.scaledToFit()
.frame(width: 80,height: 80)
.rotationEffect(.init(degrees: 240))
.offset(x: -60,y: 100)
.onTapGesture(perform: {
degree3 += 60
x = false
y = false
z = true
})
Image("left")
.resizable()
.scaledToFit()
.frame(width: 80,height: 80)
.rotationEffect(.init(degrees: 116))
.offset(x: 60,y: 100)
.onTapGesture(perform: {
degree3 -= 60
x = false
y = false
z = true
})
}
}
.offset(x: 4,y: -102)
}
}
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
