如何在 CGAffineTransform 上为 SwiftUI 中的 rotationAngle 添加动画?
How to add animation on CGAffineTransform for rotationAngle in SwiftUI?
我需要使用 rotationAngle 为 CGAffineTransform 设置动画,但我不知道是否可行,因为 CGAffineTransform 不符合 Animatable。 Maby 与 "withAnimation",但我不明白如何使用它。我知道我可以使用 rotationEffect 但出于某些原因我必须使用 CGAffineTransform。
我的代码:
import SwiftUI
import CoreLocation
struct Arrow: View {
var locationManager = CLLocationManager()
@ObservedObject var location: LocationManager = LocationManager()
private var animationArrow: Animation {
Animation
.easeInOut(duration: 0.2)
}
var body: some View {
VStack {
Image("arrow")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 300, height: 300)
.transformEffect(
CGAffineTransform(translationX: -150, y: -150)
.concatenating(CGAffineTransform(rotationAngle: CGFloat(-location.heading.degreesToRadians)))
.concatenating(CGAffineTransform(translationX: 150, y: 150))
)
.animation(animationArrow)
Text(String(location.heading.degreesToRadians))
.font(.system(size: 20))
.fontWeight(.light)
.padding(.top, 15)
Text(String(location.coordinates[0]))
.font(.system(size: 20))
.fontWeight(.light)
.padding(.top, 15)
Text(String(location.coordinates[1]))
.font(.system(size: 20))
.fontWeight(.light)
.padding(.top, 15)
}
}
}
如果您不能使用任何现有的动画效果,则需要教 SwiftUI 如何为变换矩阵设置动画。您可以使用 GeometryEffect 来做到这一点。它是一个同时符合 Animatable 和 ViewModifier 的协议。
如果您想了解有关 GeometryEffect 工作原理的完整说明,请查看我的 post:https://swiftui-lab.com/swiftui-animations-part2/
这是一个工作示例:
struct ContentView: View {
@State private var animate = false
var body: some View {
Rectangle()
.frame(width: 50, height: 50)
.modifier(MyEffect(angle: animate ? .pi * 2 : 0))
.onTapGesture {
withAnimation(.easeInOut(duration: 2.0)) {
self.animate.toggle()
}
}
}
}
struct MyEffect: GeometryEffect {
var angle: CGFloat
var animatableData: CGFloat {
get { angle }
set { angle = newValue }
}
func effectValue(size: CGSize) -> ProjectionTransform {
return ProjectionTransform(CGAffineTransform(rotationAngle: angle))
}
}
根据您的评论,您可以将 withAnimation 与任何变量一起使用,而不仅仅是布尔值。如果变量最终影响了一个动画参数,它就会动画。这是一个例子:
struct ContentView: View {
@State private var angle: CGFloat = 0
var body: some View {
VStack {
Rectangle()
.frame(width: 50, height: 50)
.modifier(MyEffect(angle: angle))
Button("Go to 0") {
withAnimation(.easeInOut(duration: 2.0)) {
self.angle = 0
}
}
Button("Go to 360") {
withAnimation(.easeInOut(duration: 2.0)) {
self.angle = .pi * 2
}
}
}
}
}
我需要使用 rotationAngle 为 CGAffineTransform 设置动画,但我不知道是否可行,因为 CGAffineTransform 不符合 Animatable。 Maby 与 "withAnimation",但我不明白如何使用它。我知道我可以使用 rotationEffect 但出于某些原因我必须使用 CGAffineTransform。
我的代码:
import SwiftUI
import CoreLocation
struct Arrow: View {
var locationManager = CLLocationManager()
@ObservedObject var location: LocationManager = LocationManager()
private var animationArrow: Animation {
Animation
.easeInOut(duration: 0.2)
}
var body: some View {
VStack {
Image("arrow")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 300, height: 300)
.transformEffect(
CGAffineTransform(translationX: -150, y: -150)
.concatenating(CGAffineTransform(rotationAngle: CGFloat(-location.heading.degreesToRadians)))
.concatenating(CGAffineTransform(translationX: 150, y: 150))
)
.animation(animationArrow)
Text(String(location.heading.degreesToRadians))
.font(.system(size: 20))
.fontWeight(.light)
.padding(.top, 15)
Text(String(location.coordinates[0]))
.font(.system(size: 20))
.fontWeight(.light)
.padding(.top, 15)
Text(String(location.coordinates[1]))
.font(.system(size: 20))
.fontWeight(.light)
.padding(.top, 15)
}
}
}
如果您不能使用任何现有的动画效果,则需要教 SwiftUI 如何为变换矩阵设置动画。您可以使用 GeometryEffect 来做到这一点。它是一个同时符合 Animatable 和 ViewModifier 的协议。
如果您想了解有关 GeometryEffect 工作原理的完整说明,请查看我的 post:https://swiftui-lab.com/swiftui-animations-part2/
这是一个工作示例:
struct ContentView: View {
@State private var animate = false
var body: some View {
Rectangle()
.frame(width: 50, height: 50)
.modifier(MyEffect(angle: animate ? .pi * 2 : 0))
.onTapGesture {
withAnimation(.easeInOut(duration: 2.0)) {
self.animate.toggle()
}
}
}
}
struct MyEffect: GeometryEffect {
var angle: CGFloat
var animatableData: CGFloat {
get { angle }
set { angle = newValue }
}
func effectValue(size: CGSize) -> ProjectionTransform {
return ProjectionTransform(CGAffineTransform(rotationAngle: angle))
}
}
根据您的评论,您可以将 withAnimation 与任何变量一起使用,而不仅仅是布尔值。如果变量最终影响了一个动画参数,它就会动画。这是一个例子:
struct ContentView: View {
@State private var angle: CGFloat = 0
var body: some View {
VStack {
Rectangle()
.frame(width: 50, height: 50)
.modifier(MyEffect(angle: angle))
Button("Go to 0") {
withAnimation(.easeInOut(duration: 2.0)) {
self.angle = 0
}
}
Button("Go to 360") {
withAnimation(.easeInOut(duration: 2.0)) {
self.angle = .pi * 2
}
}
}
}
}