When animating with SwiftUI, how to set initial state while still animating from that state?

huangapple
go评论89阅读模式
英文:

When animating with SwiftUI, how to set initial state while still animating from that state?

问题

Here's the translated code portion:

  1. class AnimatedCircle: ObservableObject, Hashable {
  2.     public func hash(into hasher: inout Hasher) {
  3.         hasher.combine(position.x)
  4.         hasher.combine(position.y)
  5.     }
  6.     
  7.     static func == (lhs: AnimatedCircle, rhs: AnimatedCircle) -> Bool {
  8.         return lhs.position == rhs.position && lhs.width == rhs.width && lhs.opacity == rhs.opacity
  9.     }
  10.     
  11.     internal init(opacity: Double = 1, width: CGFloat, position: CGPoint) {
  12.         self.opacity = opacity
  13.         self.width = width
  14.         self.position = position
  15.     }
  16.     
  17.     var opacity: Double
  18.     var width: CGFloat
  19.     let position: CGPoint
  20. }
  22. public struct SlidePresenterView: View {
  24. @State private var circles: [AnimatedCircle] = []
  26. public var body: some View {
  27.     GeometryReader { geometry in
  28.         ZStack {
  29.             Color.black.ignoresSafeArea()
  30.         }.onTapGesture { pointTapped in
  31.             circles.append(
  32.                 AnimatedCircle.init(width: 40, position: pointTapped)
  33.             )
  34.             
  35.         }
  36.         ForEach(circles, id: \.self) { value in
  37.             Circle()
  38.                 .stroke(style: StrokeStyle(lineWidth: 4))
  39.                 .frame(width: value.width)
  40.                 .foregroundColor(.white)
  41.                 .position(x: value.position.x, y: value.position.y)
  42.                 .opacity(value.opacity)
  43.                 .animation(.easeInOut(duration: 0.5)
  44.                            , value: value.opacity)
  45.                 .animation(.easeInOut(duration: 0.5)
  46.                            , value: value.width)
  47.                 .onAppear {
  48.                     value.opacity = 0
  49.                     value.width = 60
  50.                 }
  51.         }
  52.     }
  53. }
  54. }
  56. extension CGPoint: Hashable {
  57.     public func hash(into hasher: inout Hasher) {
  58.         hasher.combine(x)
  59.         hasher.combine(y)
  60.     }
  61. }

If you have any further questions or need assistance with this code, please feel free to ask.

英文: 
  1. class AnimatedCircle: ObservableObject, Hashable {
  2.     public func hash(into hasher: inout Hasher) {
  3.         hasher.combine(position.x)
  4.         hasher.combine(position.y)
  5.     }
  6.     
  7.     static func == (lhs: AnimatedCircle, rhs: AnimatedCircle) -> Bool {
  8.         return lhs.position == rhs.position && lhs.width == rhs.width && lhs.opacity == rhs.opacity
  9.     }
  10.     
  11.     internal init(opacity: Double = 1, width: CGFloat, position: CGPoint) {
  12.         self.opacity = opacity
  13.         self.width = width
  14.         self.position = position
  15.     }
  16.     
  17.     var opacity: Double
  18.     var width: CGFloat
  19.     let position: CGPoint
  20. }
  22. public struct SlidePresenterView: View {
  24. @State private var circles: [AnimatedCircle] = []
  26. public var body: some View {
  27.     GeometryReader { geometry in
  28.         ZStack {
  29.             Color.black.ignoresSafeArea()
  30.         }.onTapGesture { pointTapped in
  31.             circles.append(
  32.                 AnimatedCircle.init(width: 40, position: pointTapped)
  33.             )
  34.             
  35.         }
  36.         ForEach(circles, id: \.self) { value in
  37.             Circle()
  38.                 .stroke(style: StrokeStyle(lineWidth: 4))
  39.                 .frame(width: value.width)
  40.                 .foregroundColor(.white)
  41.                 .position(x: value.position.x, y: value.position.y)
  42.                 .opacity(value.opacity)
  43.                 .animation(.easeInOut(duration: 0.5)
  44.                            , value: value.opacity)
  45.                 .animation(.easeInOut(duration: 0.5)
  46.                            , value: value.width)
  47.                 .onAppear {
  48.                     value.opacity = 0
  49.                     value.width = 60
  50.                 }
  51.         }
  52.     }
  53. }
  54. }
  56. extension CGPoint: Hashable {
  57.     public func hash(into hasher: inout Hasher) {
  58.         hasher.combine(x)
  59.         hasher.combine(y)
  60.     }
  61. }

In this example i show a circle when the user taps the screen, at the point they tap. Then the circle fades out. The only problem is that the animation only happens on the next tap, so the first circle has no animation, when the user taps second time, the first circle is animated out correctly, and so follows. Meaning a circle will permanent be on screen. There seems to be something wrong when setting the first value, and onAppear not correctly animating. Any ideas?

答案1

得分: 1

以下是您要翻译的部分：

"Perhaps the main reasons why it is not working is because the circles are not observing a particular instance of AnimatedCircle (they are created using an instance of AnimatedCircle, but this is not the same as observing an instance) and the opacity and width in AnimatedCircle are not published either.

I would suggest, you split your AnimatedCircle into data and a proper view of that data. The following illustrates how. The main changes:

  • The point of tap is now held by TappedPoint, which is an ObservableObject. It simply has a (published) flag to indicate whether the point should be visible or not.
  • The view of the point is the AnimatedCircle. This is where the opacity and width are controlled.
  • The visibility of the circle changes when the flag in the data changes, with animation.
  • Also, in SlidePresenterView, you probably intended the circles to be inside the ZStack."

请注意，代码部分未翻译。

英文:

Perhaps the main reasons why it is not working is because the circles are not observing a particular instance of AnimatedCircle (they are created using an instance of AnimatedCircle, but this is not the same as observing an instance) and the opacity and width in AnimatedCircle are not published either.

I would suggest, you split your AnimatedCircle into data and a proper view of that data. The following illustrates how. The main changes:

  • The point of tap is now held by TappedPoint, which is an ObservableObject. It simply has a (published) flag to indicate whether the point should be visible or not.
  • The view of the point is the AnimatedCircle. This is where the opacity and width are controlled.
  • The visibility of the circle changes when the flag in the data changes, with animation.
  • Also, in SlidePresenterView, you probably intended the circles to be inside the ZStack.

Here you go:

  1. class TappedPoint: Hashable, ObservableObject {
  3.     let position: CGPoint
  4.     @Published var isVisible = true
  6.     internal init(position: CGPoint) {
  7.         self.position = position
  8.     }
  10.     public func hash(into hasher: inout Hasher) {
  11.         hasher.combine(position.x)
  12.         hasher.combine(position.y)
  13.     }
  15.     static func == (lhs: TappedPoint, rhs: TappedPoint) -> Bool {
  16.         return lhs.position == rhs.position
  17.     }
  19.     func disappear() {
  20.         isVisible = false
  21.     }
  22. }
  24. struct AnimatedCircle: View {
  26.     @ObservedObject var tappedPoint: TappedPoint
  28.     var body: some View {
  29.         Circle()
  30.             .stroke(style: StrokeStyle(lineWidth: 4))
  31.             .frame(width: tappedPoint.isVisible ? 40 : 60)
  32.             .foregroundColor(.white)
  33.             .position(x: tappedPoint.position.x, y: tappedPoint.position.y)
  34.             .opacity(tappedPoint.isVisible ? 1.0 : 0.0)
  35.             .onAppear {
  36.                 withAnimation(.easeInOut(duration: 0.5)) {
  37.                     tappedPoint.disappear()
  38.                 }
  39.             }
  40.     }
  41. }
  43. public struct SlidePresenterView: View {
  45.     @State private var circles: [TappedPoint] = []
  47.     public var body: some View {
  48.         GeometryReader { geometry in
  49.             ZStack {
  50.                 Color.black.ignoresSafeArea()
  51.                 ForEach(circles, id: \.self) { value in
  52.                     AnimatedCircle(tappedPoint: value)
  53.                 }
  54.             }.onTapGesture { pointTapped in
  55.                 circles.append(
  56.                     TappedPoint(position: pointTapped)
  57.                 )
  58.             }
  59.         }
  60.     }
  61. }

huangapple
  • 本文由 发表于 2023年6月15日 02:12:03
  • 转载请务必保留本文链接：https://go.coder-hub.com/76476448.html
  • animation
  • swiftui
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定