diff --git a/Sources/Orbit/Support/Components/TimelineIndicator.swift b/Sources/Orbit/Support/Components/TimelineIndicator.swift index e5411175202..aad86363aa2 100644 --- a/Sources/Orbit/Support/Components/TimelineIndicator.swift +++ b/Sources/Orbit/Support/Components/TimelineIndicator.swift @@ -19,7 +19,13 @@ public struct TimelineIndicator: View { height: TimelineIndicator.indicatorDiameter * sizeCategory.ratio ) .alignmentGuide(.firstTextBaseline) { $0.height * 0.68 } - .onAppear { animationLoopTrigger = !isReduceMotionEnabled } + .onAppear { + guard isReduceMotionEnabled == false else { return } + + withAnimation(.easeInOut.repeatForever().speed(0.25)) { + animationLoopTrigger = true + } + } } @ViewBuilder private var indicator: some View { @@ -33,7 +39,6 @@ public struct TimelineIndicator: View { height: (animationLoopTrigger ? .medium : .xMedium) * sizeCategory.ratio ) .foregroundColor(animationLoopTrigger ? Color.clear : type.color.opacity(0.1)) - .animation(animation, value: animationLoopTrigger) .overlay(icon) case .past: Circle() @@ -57,7 +62,6 @@ public struct TimelineIndicator: View { width: (animationLoopTrigger ? .medium : .xMedium) * sizeCategory.ratio, height: (animationLoopTrigger ? .medium : .xMedium) * sizeCategory.ratio ) - .animation(animation, value: animationLoopTrigger) .foregroundColor((iconColor ?? type.color).opacity(0.1)) Circle() @@ -69,7 +73,6 @@ public struct TimelineIndicator: View { .frame(width: .xxSmall * sizeCategory.ratio, height: .xxSmall * sizeCategory.ratio) .scaleEffect(animationLoopTrigger ? 0.5 : 1) .foregroundColor(animationLoopTrigger ? Color.clear : iconColor ?? type.color) - .animation(animation, value: animationLoopTrigger) } case .present(.warning), .present(.critical), .present(.success), .past: @@ -79,10 +82,6 @@ public struct TimelineIndicator: View { .background(Circle().fill(.whiteNormal).padding(2)) } } - - private var animation: Animation { - Animation.easeInOut.repeatForever().speed(0.25) - } /// Creates Orbit ``TimelineIndicator`` component. public init(type: TimelineItemType = .present) { @@ -103,18 +102,21 @@ struct TimelineIndicatorPreviews: PreviewProvider { static var standalone: some View { HorizontalScroll { HStack(spacing: .xxSmall) { - ForEach(1..<20) { _ in - VStack { - SwiftUI.Button { - // noa ction - } label: { + ForEach(1..<4) { index in + VStack(spacing: .medium) { + SwiftUI.Button { + // No Action + } label: { + VStack(spacing: .medium) { + TimelineIndicator(type: .future) + TimelineIndicator(type: .past) TimelineIndicator(type: .present) - Text("Heyyyyyyyyyyy") + TimelineIndicator(type: .present(.critical)) } -// Spacer() } - - Separator() + } + + Separator() } } .padding(.medium) diff --git a/Sources/Orbit/Support/Layout/HorizontalScrollReader.swift b/Sources/Orbit/Support/Layout/HorizontalScrollReader.swift index 7216f332ecd..a77e2a5178c 100644 --- a/Sources/Orbit/Support/Layout/HorizontalScrollReader.swift +++ b/Sources/Orbit/Support/Layout/HorizontalScrollReader.swift @@ -81,6 +81,7 @@ struct HorizontalScrollReaderPreviews: PreviewProvider { Tile("Tile \(index)", description: "Tap to scroll to previous") { scrollProxy.scrollTo(index - 1, animated: state.wrappedValue.1) } + .overlay(TimelineIndicator(), alignment: .topTrailing) .identifier(index) } @@ -92,11 +93,9 @@ struct HorizontalScrollReaderPreviews: PreviewProvider { } Checkbox("Snapping", isChecked: state.0) - // FIXME: Binding does not work correctly? .id(state.wrappedValue.0 ? 1 : 0) Checkbox("Animated", isChecked: state.1) - // FIXME: Binding does not work correctly? .id(state.wrappedValue.1 ? 1 : 0) Button("Scroll to First") {