Any Distance Goes Open Source

import Foundation import SceneKit import SCNLine import CoreLocation struct RouteScene { let scene: SCNScene let camera: SCNCamera let lineNode: SCNLineNode let centerNode: SCNNode let dotNode: SCNNode let dotAnimationNode: SCNNode let planeNodes: [SCNNode] let animationDuration: TimeInterval let elevationMinNode: SCNNode? let elevationMinLineNode: SCNNode? let elevationMaxNode: SCNNode? let elevationMaxLineNode: SCNNode? private let forExport: Bool private let elevationMinTextAction: SCNAction? private let elevationMaxTextAction: SCNAction? fileprivate static let dotRadius: CGFloat = 3.0 fileprivate static let initialFocalLength: CGFloat = 42.0 fileprivate static let initialZoom: CGFloat = 1.0 fileprivate var minElevation: CLLocationDistance = 0.0 fileprivate var maxElevation: CLLocationDistance = 0.0 fileprivate var minElevationPoint = SCNVector3(0, 1000, 0) fileprivate var maxElevationPoint = SCNVector3(0, -1000, 0) var zoom: CGFloat = 1.0 { didSet { camera.focalLength = Self.initialFocalLength * zoom } } var palette: Palette { didSet { lineNode.geometry?.firstMaterial?.diffuse.contents = palette.foregroundColor let darkeningPercentage: CGFloat = forExport ? 0.0 : 35.0 let alpha = (palette.foregroundColor.isReallyDark ? 0.8 : 0.5) + (forExport ? 0.2 : 0.0) let color = palette.foregroundColor.darker(by: darkeningPercentage)?.withAlphaComponent(alpha) for plane in planeNodes { plane.geometry?.firstMaterial?.diffuse.contents = color } dotNode.geometry?.firstMaterial?.diffuse.contents = palette.accentColor dotAnimationNode.geometry?.firstMaterial?.diffuse.contents = palette.accentColor elevationMinNode?.geometry?.firstMaterial?.diffuse.contents = palette.foregroundColor.lighter(by: 15.0) elevationMinLineNode?.geometry?.firstMaterial?.diffuse.contents = palette.foregroundColor.lighter(by: 15.0) elevationMaxNode?.geometry?.firstMaterial?.diffuse.contents = palette.foregroundColor.lighter(by: 15.0) elevationMaxLineNode?.geometry?.firstMaterial?.diffuse.contents = palette.foregroundColor.lighter(by: 15.0) } } } // MARK: Init extension RouteScene { func restartTextAnimation() { if let minAction = elevationMinTextAction { elevationMinNode?.runAction(minAction) } if let maxAction = elevationMaxTextAction { elevationMaxNode?.runAction(maxAction) } } private static func textAction(for node: SCNNode, lineNode: SCNNode, startPosition: SCNVector3, initialDelay: CGFloat, additionalDelay: CGFloat, icon: String, elevationLimit: CLLocationDistance) -> SCNAction { let textAnimationDuration: CGFloat = 2.2 let delay: CGFloat = textAnimationDuration * 0.15 var actions: [SCNAction] = [] let textAction = SCNAction.customAction(duration: textAnimationDuration) { node, time in let p = time / textAnimationDuration let elevation = Self.easeOutQuint(x: p) * elevationLimit if let geo = node.geometry as? SCNText { geo.string = "\(icon)\(Int(elevation))" + (ADUser.current.distanceUnit == .miles ? "ft" : "m") } } let opacityDelay: CGFloat = textAnimationDuration * 0.2 let opacityDuration: CGFloat = textAnimationDuration * 0.55 let transformDuration: CGFloat = textAnimationDuration * 0.45 let movementAmount: CGFloat = 18.0 let lineDuration: CGFloat = textAnimationDuration * 0.2 let moveBy = SCNAction.moveBy(x: 0.0, y: movementAmount, z: 0.0, duration: transformDuration) moveBy.timingFunction = { t in return Float(Self.easeOutQuad(x: CGFloat(t) / transformDuration)) } actions.append(SCNAction.sequence([ SCNAction.run({ _ in lineNode.runAction(SCNAction.fadeOut(duration: 0.0)) }), SCNAction.fadeOut(duration: 0.0), SCNAction.move(to: startPosition, duration: 0.0), SCNAction.moveBy(x: 0.0, y: -movementAmount, z: 0.0, duration: 0.0), SCNAction.wait(duration: delay + additionalDelay * opacityDelay), SCNAction.group([ SCNAction.fadeIn(duration: opacityDuration), textAction, SCNAction.sequence([ moveBy, SCNAction.run({ _ in lineNode.runAction(SCNAction.fadeIn(duration: lineDuration)) }) ]) ]) ])) return SCNAction.group(actions) } static func routeScene(from coordinates: [CLLocation], forExport: Bool, palette: Palette = .dark) -> RouteScene? { guard !coordinates.isEmpty else { return nil } let latitudeMin: CLLocationDegrees = coordinates.min(by: { $0.coordinate.latitude < $1.coordinate.latitude })?.coordinate.latitude ?? 1 let latitudeMax: CLLocationDegrees = coordinates.max(by: { $0.coordinate.latitude < $1.coordinate.latitude })?.coordinate.latitude ?? 1 let longitudeMin: CLLocationDegrees = coordinates.min(by: { $0.coordinate.longitude < $1.coordinate.longitude })?.coordinate.longitude ?? 1 let longitudeMax: CLLocationDegrees = coordinates.max(by: { $0.coordinate.longitude < $1.coordinate.longitude })?.coordinate.longitude ?? 1 let altitudeMin = coordinates.min(by: { $0.altitude < $1.altitude })?.altitude ?? 0.0 let altitudeMax = coordinates.max(by: { $0.altitude < $1.altitude })?.altitude ?? 0.0 let altitudeRange = altitudeMax - altitudeMin let latitudeRange = latitudeMax - latitudeMin let longitudeRange = longitudeMax - longitudeMin let aspectRatio = CGSize(width: CGFloat(longitudeRange), height: CGFloat(latitudeRange)) let bounds = CGSize.aspectFit(aspectRatio: aspectRatio, boundingSize: CGSize(width: 200.0, height: 200.0)) let scene = SCNScene() scene.background.contents = UIColor.clear let routeCenterNode = SCNNode(geometry: SCNSphere(radius: 0.0)) routeCenterNode.position = SCNVector3(0.0, 0.0, 0.0) scene.rootNode.addChildNode(routeCenterNode) var prevPoint: SCNVector3? let smoothing: Float = 0.2 let elevationSmoothing: Float = 0.3 let s = max(1, coordinates.count / 350) let dotNode = SCNNode(geometry: SCNSphere(radius: dotRadius)) let dotAnimationNode = SCNNode(geometry: SCNSphere(radius: dotRadius)) dotAnimationNode.castsShadow = false var points: [SCNVector3] = [] var keyTimes: [NSNumber] = [] var curTime = 0.0 let degreesPerMeter = 0.0001 let latitudeMultiple = Double(bounds.height) / latitudeRange let renderedAltitudeRange = (degreesPerMeter * latitudeMultiple * altitudeRange).clamped(to: 0...80) let altitudeMultiplier = altitudeRange == 0 ? 0.1 : (renderedAltitudeRange / altitudeRange) var planeNodes = [SCNNode]() var minElevation: CLLocationDistance = 0.0 var maxElevation: CLLocationDistance = 0.0 var minElevationPoint = SCNVector3(0, 1000, 0) var maxElevationPoint = SCNVector3(0, -1000, 0) for i in stride(from: 0, to: coordinates.count - 1, by: s) { let c = coordinates[i] let normalizedLatitude = (1 - ((c.coordinate.latitude - latitudeMin) / latitudeRange)) let latitude = Double(bounds.height) * normalizedLatitude - Double(bounds.height / 2) let longitude = Double(bounds.width) * ((c.coordinate.longitude - longitudeMin) / longitudeRange) - Double(bounds.width / 2) let adjustedAltitude = (c.altitude - altitudeMin) * altitudeMultiplier var point = SCNVector3(longitude, adjustedAltitude, latitude) if i == 0 { dotNode.position = point } if let prevPoint = prevPoint { // smoothing point.x = (point.x * (1 - smoothing)) + (prevPoint.x * smoothing) + Float.random(in: -0.001...0.001) point.y = (point.y * (1 - elevationSmoothing)) + (prevPoint.y * elevationSmoothing) + Float.random(in: -0.001...0.001) point.z = (point.z * (1 - smoothing)) + (prevPoint.z * smoothing) + Float.random(in: -0.001...0.001) // draw elevation plane let point3 = SCNVector3(point.x, -18.0, point.z) let point4 = SCNVector3(prevPoint.x, -18.0, prevPoint.z) let plane = SCNNode.planeNode(corners: [point, prevPoint, point3, point4]) let boxMaterial = SCNMaterial() boxMaterial.transparent.contents = UIImage(named: "route_plane_fade")! boxMaterial.lightingModel = .constant boxMaterial.diffuse.contents = UIColor.white boxMaterial.blendMode = .replace boxMaterial.isLitPerPixel = false boxMaterial.isDoubleSided = true plane.geometry?.materials = [boxMaterial] routeCenterNode.addChildNode(plane) planeNodes.append(plane) let duration = TimeInterval(point.distance(to: prevPoint) * 0.02) curTime += duration points.append(point) keyTimes.append(NSNumber(value: curTime)) } else { points.append(point) keyTimes.append(NSNumber(value: 0)) } if point.y < minElevationPoint.y { minElevationPoint = point minElevation = c.altitude } if point.y > maxElevationPoint.y { maxElevationPoint = point maxElevation = c.altitude } prevPoint = point } if ADUser.current.distanceUnit == .miles { minElevation = UnitConverter.metersToFeet(minElevation) maxElevation = UnitConverter.metersToFeet(maxElevation) } let lineNode = SCNLineNode(with: points, radius: 1, edges: 5, maxTurning: 4) let lineMaterial = SCNMaterial() lineMaterial.lightingModel = .constant lineMaterial.isLitPerPixel = false lineNode.geometry?.materials = [lineMaterial] routeCenterNode.addChildNode(lineNode) let animationDuration = curTime let centerNode = SCNNode(geometry: SCNSphere(radius: 0)) centerNode.position = SCNVector3(0, 0, 0) scene.rootNode.addChildNode(centerNode) let camera = SCNCamera() let cameraNode = SCNNode() cameraNode.camera = camera camera.automaticallyAdjustsZRange = true camera.focalLength = initialFocalLength * initialZoom cameraNode.position = SCNVector3(0, 250, 450) scene.rootNode.addChildNode(cameraNode) let lookAtConstraint = SCNLookAtConstraint(target: centerNode) cameraNode.constraints = [lookAtConstraint] let material = SCNMaterial() material.lightingModel = .constant let dotColor = UIColor(realRed: 255, green: 198, blue: 99) material.diffuse.contents = dotColor material.ambient.contents = dotColor dotNode.geometry?.materials = [material] routeCenterNode.addChildNode(dotNode) let moveAlongPathAnimation = CAKeyframeAnimation(keyPath: "position") moveAlongPathAnimation.values = points moveAlongPathAnimation.keyTimes = keyTimes moveAlongPathAnimation.duration = curTime moveAlongPathAnimation.usesSceneTimeBase = !forExport moveAlongPathAnimation.repeatCount = .greatestFiniteMagnitude dotNode.addAnimation(moveAlongPathAnimation, forKey: "position") let dotAnimationMaterial = SCNMaterial() dotAnimationMaterial.lightingModel = .constant let dotAnimationColor = UIColor(realRed: 255, green: 247, blue: 189) dotAnimationMaterial.diffuse.contents = dotAnimationColor dotAnimationMaterial.ambient.contents = dotAnimationColor dotAnimationNode.geometry?.materials = [dotAnimationMaterial] routeCenterNode.addChildNode(dotAnimationNode) dotAnimationNode.addAnimation(moveAlongPathAnimation, forKey: "position") let scaleAnimation = CABasicAnimation(keyPath: "scale") scaleAnimation.fromValue = SCNVector3(1, 1, 1) scaleAnimation.toValue = SCNVector3(3, 3, 3) scaleAnimation.duration = 0.8 scaleAnimation.repeatCount = .greatestFiniteMagnitude scaleAnimation.usesSceneTimeBase = !forExport dotAnimationNode.addAnimation(scaleAnimation, forKey: "scale") let opacityAnimation = CABasicAnimation(keyPath: "opacity") opacityAnimation.fromValue = 0.5 opacityAnimation.toValue = 0.001 opacityAnimation.duration = 0.8 opacityAnimation.timingFunction = CAMediaTimingFunction(name: .easeOut) opacityAnimation.repeatCount = .greatestFiniteMagnitude opacityAnimation.usesSceneTimeBase = !forExport dotAnimationNode.addAnimation(opacityAnimation, forKey: "opacity") let spin = CABasicAnimation(keyPath: "rotation") spin.fromValue = NSValue(scnVector4: SCNVector4(x: 0.0, y: 1.0, z: 0.0, w: 0.0)) spin.toValue = NSValue(scnVector4: SCNVector4(x: 0.0, y: 1.0, z: 0.0, w: 2.0 * .pi)) spin.duration = 14.0 spin.repeatCount = .infinity spin.usesSceneTimeBase = !forExport routeCenterNode.addAnimation(spin, forKey: "rotation") let textMaterial = SCNMaterial() textMaterial.diffuse.contents = UIColor.white textMaterial.lightingModel = .constant textMaterial.isDoubleSided = true var elevationMinNode: SCNNode? var elevationMinTextAction: SCNAction? var elevationMinLineNode: SCNNode? var elevationMaxNode: SCNNode? var elevationMaxTextAction: SCNAction? var elevationMaxLineNode: SCNNode? if altitudeMin != altitudeMax { var i: CGFloat = 0.0 for (elevationPoint, elevation) in zip([minElevationPoint, maxElevationPoint], [minElevation, maxElevation]) { let arrow = elevation == maxElevation ? "▲" : "▼" let text = arrow + String(format: "%i", Int(elevation)) + (ADUser.current.distanceUnit == .miles ? "ft" : "m") let elevationText = SCNText(string: text, extrusionDepth: 0) elevationText.materials = [textMaterial] elevationText.font = UIFont.presicav(size: 36, weight: .heavy) elevationText.flatness = 0.2 let textNode = SCNNode(geometry: elevationText) textNode.name = "elevation-\(elevation == maxElevation ? "max" : "min")" textNode.pivot = SCNMatrix4MakeTranslation(17, 0, 0) textNode.position = SCNVector3(elevationPoint.x, elevationPoint.y + 18, elevationPoint.z) textNode.scale = SCNVector3(0.22, 0.22, 0.22) textNode.constraints = [SCNBillboardConstraint()] textNode.opacity = 0.0 routeCenterNode.addChildNode(textNode) let textLineNode = SCNNode.lineNode(from: SCNVector3(elevationPoint.x, elevationPoint.y, elevationPoint.z), to: SCNVector3(elevationPoint.x, textNode.position.y - 1, elevationPoint.z)) textLineNode.name = textNode.name! + "-line" textLineNode.geometry?.materials = [textMaterial] textLineNode.opacity = 0.0 routeCenterNode.addChildNode(textLineNode) if elevation == minElevation { elevationMinNode = textNode elevationMinLineNode = textLineNode elevationMinTextAction = textAction(for: textNode, lineNode: textLineNode, startPosition: textNode.position, initialDelay: 0.3, additionalDelay: i, icon: arrow, elevationLimit: minElevation) } else { elevationMaxNode = textNode elevationMaxLineNode = textLineNode elevationMaxTextAction = textAction(for: textNode, lineNode: textLineNode, startPosition: textNode.position, initialDelay: 0.7, additionalDelay: i, icon: arrow, elevationLimit: maxElevation) } i += 1 } } var routeScene = RouteScene(scene: scene, camera: camera, lineNode: lineNode, centerNode: routeCenterNode, dotNode: dotNode, dotAnimationNode: dotAnimationNode, planeNodes: planeNodes, animationDuration: animationDuration, elevationMinNode: elevationMinNode, elevationMinLineNode: elevationMinLineNode, elevationMaxNode: elevationMaxNode, elevationMaxLineNode: elevationMaxLineNode, forExport: forExport, elevationMinTextAction: elevationMinTextAction, elevationMaxTextAction: elevationMaxTextAction, zoom: initialZoom, palette: palette) routeScene.palette = palette return routeScene } static fileprivate func easeOutQuint(x: CGFloat) -> CGFloat { return 1.0 - pow(1.0 - x, 5.0) } static func easeOutQuad(x: CGFloat) -> CGFloat { return 1.0 - (1.0 - x) * (1.0 - x) } static func easeInOutQuart(x: CGFloat) -> CGFloat { return x < 0.5 ? 8.0 * pow(x, 4.0) : 1.0 - pow(-2.0 * x + 2.0, 4.0) / 2.0 } }

import SwiftUI extension Comparable { func clamped(to limits: ClosedRange<Self>) -> Self { return min(max(self, limits.lowerBound), limits.upperBound) } } struct CountdownView: View { private let impactGenerator = UIImpactFeedbackGenerator(style: .heavy) private let startGenerator = UINotificationFeedbackGenerator() @State private var animationStep: CGFloat = 4 @State private var animationTimer: Timer? @State private var isFinished: Bool = false @Binding var skip: Bool var finishedAction: () -> Void func hStackXOffset() -> CGFloat { let clampedStep = animationStep.clamped(to: 0...3) if clampedStep > 0 { return 60 * (clampedStep - 1) - 10 } else { return -90 } } func startTimer() { animationTimer = Timer.scheduledTimer(withTimeInterval: 0.9, repeats: true, block: { _ in if animationStep == 0 { withAnimation(.easeIn(duration: 0.15)) { isFinished = true } finishedAction() animationTimer?.invalidate() } withAnimation(.easeInOut(duration: animationStep == 4 ? 0.3 : 0.4)) { animationStep -= 1 } DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { if animationStep < 4 && animationStep > 0 { impactGenerator.impactOccurred() } else if animationStep == 0 { startGenerator.notificationOccurred(.success) } } }) } var body: some View { VStack { ZStack { DarkBlurView() HStack(alignment: .center, spacing: 0) { Text("3") .font(.system(size: 89, weight: .semibold, design: .default)) .frame(width: 60) .opacity(animationStep >= 3 ? 1 : 0.6) .scaleEffect(animationStep >= 3 ? 1 : 0.6) Text("2") .font(.system(size: 89, weight: .semibold, design: .default)) .frame(width: 60) .opacity(animationStep == 2 ? 1 : 0.6) .scaleEffect(animationStep == 2 ? 1 : 0.6) Text("1") .font(.system(size: 89, weight: .semibold, design: .default)) .frame(width: 60) .opacity(animationStep == 1 ? 1 : 0.6) .scaleEffect(animationStep == 1 ? 1 : 0.6) Text("GO") .font(.system(size: 65, weight: .bold, design: .default)) .frame(width: 100) .opacity(animationStep == 0 ? 1 : 0.6) .scaleEffect(animationStep == 0 ? 1 : 0.6) } .foregroundStyle(Color.white) .offset(x: hStackXOffset()) } .mask { RoundedRectangle(cornerRadius: 65) .frame(width: 130, height: 200) } .opacity(isFinished ? 0 : 1) .scaleEffect(isFinished ? 1.2 : 1) .blur(radius: isFinished ? 6.0 : 0.0) .opacity(animationStep < 4 ? 1 : 0) .scaleEffect(animationStep < 4 ? 1 : 0.8) } .onChange(of: skip) { newValue in if newValue == true { animationTimer?.invalidate() withAnimation(.easeIn(duration: 0.15)) { isFinished = true } finishedAction() } } .onAppear { guard animationStep == 4 else { return } DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) { self.startTimer() } } } } #Preview { ZStack { CountdownView(skip: .constant(false)) {} } .background(Color(white: 0.2)) }

import SwiftUI fileprivate struct CancelHeader: View { @Environment(\.presentationMode) var presentationMode @Binding var showingSettings: Bool @Binding var isPresented: Bool var body: some View { HStack { Button { showingSettings = true } label: { Text("Settings") .foregroundColor(.white) .fontWeight(.medium) .frame(width: 95, height: 50) } Spacer() Button { UIApplication.shared.topViewController?.dismiss(animated: true) isPresented = false } label: { Text("Cancel") .foregroundColor(.white) .fontWeight(.medium) .frame(width: 90, height: 50) } } } } fileprivate struct TitleView: View { var activityType: ActivityType var goalType: RecordingGoalType var body: some View { HStack(alignment: .center, spacing: 0) { VStack(alignment: .leading, spacing: 3) { Text(activityType.displayName) .font(.system(size: 28, weight: .semibold, design: .default)) .foregroundColor(.white) .fixedSize(horizontal: false, vertical: true) Text(goalType.promptText) .font(.system(size: 18, weight: .regular, design: .default)) .foregroundColor(.white.opacity(0.6)) .id(goalType.promptText) .modifier(BlurOpacityTransition(speed: 1.75)) } Spacer() Image(activityType.glyphName) .resizable() .aspectRatio(contentMode: .fit) .frame(width: 53, height: 53) } } } fileprivate struct GoalTypeSelector: View { var types: [RecordingGoalType] = [] @Binding var selectedIdx: Int private var scrollViewAnchor: UnitPoint { switch selectedIdx { case RecordingGoalType.allCases.count - 1: return .trailing default: return .center } } var body: some View { ScrollViewReader { proxy in ScrollView(.horizontal, showsIndicators: false) { HStack { ForEach(Array(types.enumerated()), id: \.element.rawValue) { (idx, goalType) in GoalTypeButton(idx: idx, goalType: goalType, selectedIdx: $selectedIdx) } } .padding([.leading, .trailing], 15) } .introspectScrollView { scrollView in scrollView.setValue(0.25, forKeyPath: "contentOffsetAnimationDuration") } .onChange(of: selectedIdx) { newValue in withAnimation { proxy.scrollTo(RecordingGoalType.allCases[selectedIdx].rawValue, anchor: scrollViewAnchor) } } .onAppear { proxy.scrollTo(RecordingGoalType.allCases[selectedIdx].rawValue, anchor: scrollViewAnchor) } } } struct GoalTypeButton: View { var idx: Int var goalType: RecordingGoalType @Binding var selectedIdx: Int var isSelected: Bool { return selectedIdx == idx } func animation(for idx: Int) -> Animation { return idx == 0 ? .timingCurve(0.33, 1, 0.68, 1, duration: 0.35) : .timingCurve(0.25, 1, 0.5, 1, duration: 0.4) } var body: some View { Button { let request = FrameRateRequest(duration: 0.5) request.perform() withAnimation(animation(for: idx)) { selectedIdx = idx } } label: { ZStack { RoundedRectangle(cornerRadius: 40, style: .circular) .fill(isSelected ? Color(goalType.color) : Color(white: 0.2)) .frame(height: 50) HStack(alignment: .center, spacing: 6) { let unit = ADUser.current.distanceUnit if let glyph = goalType.glyph(forDistanceUnit: unit) { Image(uiImage: glyph) } Text(goalType.displayName) .font(.system(size: 18, weight: .semibold, design: .default)) .foregroundColor((isSelected && goalType == .open) ? .black : .white) } .padding([.leading, .trailing], 20) .frame(maxWidth: .infinity) .frame(maxHeight: 50) } .contentShape(Rectangle()) .background(Color.black.opacity(0.01)) .animation(.none, value: isSelected) } } } } fileprivate struct SetTargetView: View { @ObservedObject var goal: RecordingGoal @ObservedObject var howWeCalculateModel: HowWeCalculatePopupModel @State private var originalGoalTarget: Float = -1 @State private var dragStartPoint: CGPoint? private let generator = UISelectionFeedbackGenerator() private var bgRectangle: some View { Rectangle() .padding(.top, 35) .opacity(0.001) .onTapGesture(count: 2) { goal.setTarget(goal.type.defaultTarget) generator.selectionChanged() } .gesture( DragGesture(minimumDistance: 0, coordinateSpace: .local) .onChanged { data in if originalGoalTarget == -1 { originalGoalTarget = goal.target } let prevTarget = goal.target var xOffset = -1 * (data.location.x - (dragStartPoint?.x ?? data.startLocation.x)) let minDistance: CGFloat = 10.0 if abs(xOffset) < minDistance && dragStartPoint == nil { return } if dragStartPoint == nil { dragStartPoint = data.location xOffset = 0.0 } let delta = goal.type.slideIncrement * Float((xOffset / 8).rounded()) let newTarget = ((originalGoalTarget + delta) / goal.type.slideIncrement).rounded() * goal.type.slideIncrement goal.setTarget(newTarget) if goal.target != prevTarget { generator.selectionChanged() } } .onEnded { _ in originalGoalTarget = -1 dragStartPoint = nil } ) } var dotBg: some View { ZStack { Color.black Image("dot_bg") .resizable(resizingMode: .tile) .renderingMode(.template) .foregroundColor(Color(goal.type.lighterColor)) .opacity(0.15) RoundedRectangle(cornerRadius: 18, style: .continuous) .stroke(Color.black, lineWidth: 18) .blur(radius: 16) VStack { Rectangle() .fill( LinearGradient(colors: [.clear, Color(goal.type.color), .clear], startPoint: .leading, endPoint: .trailing) ) .frame(height: 90) .offset(y: -30) Spacer() } .scaleEffect(x: 1.8, y: 3) .blur(radius: 25) .opacity(0.45) VStack { Rectangle() .fill( LinearGradient(colors: [.clear, Color(goal.type.color), Color(goal.type.color), .clear], startPoint: .leading, endPoint: .trailing) ) .frame(height: 1.8) Spacer() } } } var body: some View { VStack(alignment: .center, spacing: 4) { Text(goal.formattedUnitString) .font(.system(size: 10, weight: .bold, design: .monospaced)) .foregroundColor(Color(goal.type.lighterColor)) .shadow(color: Color(goal.type.color), radius: 6, x: 0, y: 0) .shadow(color: Color.black, radius: 5, x: 0, y: 0) .allowsHitTesting(false) HStack { Button { goal.setTarget(goal.target - goal.type.buttonIncrement) generator.selectionChanged() } label: { Image("glyph_digital_minus") .foregroundColor(Color(white: 0.9)) .frame(width: 70, height: 70) } .padding(.leading, 5) .offset(y: -3) Spacer() Text(goal.formattedTarget) .font(.custom("Digital-7", size: 73)) .foregroundColor(Color(goal.type.lighterColor)) .shadow(color: Color(goal.type.color), radius: 6, x: 0, y: 0) .allowsHitTesting(false) Spacer() Button { goal.setTarget(goal.target + goal.type.buttonIncrement) generator.selectionChanged() } label: { Image("glyph_digital_plus") .foregroundColor(Color(white: 0.9)) .frame(width: 70, height: 70) } .padding(.trailing, 5) .offset(y: -3) } SlideToAdjust(color: goal.type.lighterColor) .shadow(color: Color(goal.type.color), radius: 6, x: 0, y: 0) .allowsHitTesting(false) } .padding([.top, .bottom], 16) .overlay { HStack { VStack { Button { howWeCalculateModel.showStatCalculation(for: goal.type.statisticType) } label: { Image(systemName: .infoCircleFill) .resizable() .aspectRatio(contentMode: .fit) .frame(width: 13) .foregroundColor(Color(goal.type.lighterColor)) .padding(16) } .shadow(color: Color(goal.type.color), radius: 7, x: 0, y: 0) .shadow(color: Color.black, radius: 5, x: 0, y: 0) Spacer() } Spacer() } } .maxWidth(.infinity) .background(bgRectangle) .background(dotBg) .mask(RoundedRectangle(cornerRadius: 18, style: .continuous)) .background { RoundedRectangle(cornerRadius: 18, style: .continuous) .fill(Color.white.opacity(0.2)) .offset(y: 1) } } struct SlideToAdjust: View { var color: UIColor var body: some View { HStack(spacing: 18) { Arrows(color: color) Text("SLIDE TO ADJUST") .font(.system(size: 10, weight: .bold, design: .monospaced)) .foregroundColor(Color(color)) Arrows(color: color) .scaleEffect(x: -1, y: 1, anchor: .center) } } struct Arrows: View { let color: UIColor let animDuration: Double = 0.8 @State private var animate: Bool = false var body: some View { HStack(spacing: 4) { ForEach(1...5, id: \.self) { idx in Image(systemName: .chevronLeft) .font(Font.system(size: 10, weight: .heavy)) .foregroundColor(Color(color)) .opacity(animate ? 0.2 : 1) .animation( .easeIn(duration: animDuration) .repeatForever(autoreverses: true) .delay(-1 * Double(idx) * animDuration / 5), value: animate) } } .onAppear { animate = true } } } } } fileprivate struct TargetOpacityAnimation: AnimatableModifier { var progress: CGFloat = 0 var animatableData: CGFloat { get { return progress } set { progress = newValue } } func body(content: Content) -> some View { let scaledProgress = ((progress - 0.3) * 1.5).clamped(to: 0...1) let easedProgress = easeInCubic(scaledProgress) content .opacity(easedProgress) .maxHeight(progress * 140) } func easeInCubic(_ x: CGFloat) -> CGFloat { return x * x * x; } } struct RecordingGoalSelectionView: View { @Environment(\.presentationMode) var presentationMode @StateObject var howWeCalculatePopupModel = HowWeCalculatePopupModel() var activityType: ActivityType @Binding var goal: RecordingGoal @State var hasSetup: Bool = false @State var isPresented: Bool = true @State var hasRecordingViewAppeared: Bool = false @State var showingWeightEntryView: Bool = false @State var showingRecordingSettings: Bool = false @State var selectedGoalTypeIdx: Int = 1 @State var prevSelectedGoalTypeIdx: Int = 1 @State var goals: [RecordingGoal] = [] private let generator = UIImpactFeedbackGenerator(style: .heavy) private let screenName = "Tracking Goal Select" func goal(for idx: Int) -> RecordingGoal { return goals[idx] } func setTargetGoal(for idx: Int) -> RecordingGoal { if selectedGoalTypeIdx == 0 { return goal(for: prevSelectedGoalTypeIdx) } else { return goal(for: idx) } } var body: some View { ZStack { BlurView(style: .systemUltraThinMaterialDark, intensity: 0.55, animatesIn: true, animateOut: !isPresented) .padding(.top, -1500) .opacity(hasRecordingViewAppeared ? 0 : 1) .ignoresSafeArea() .onTapGesture { isPresented = false presentationMode.dismiss() } VStack { HowWeCalculatePopup(model: howWeCalculatePopupModel, drawerClosedHeight: 0) VStack(spacing: 16) { CancelHeader(showingSettings: $showingRecordingSettings, isPresented: $isPresented) .zIndex(20) .padding(.bottom, -12) .padding(.top, 6) .padding([.leading, .trailing], 8) if !goals.isEmpty { VStack(spacing: 16) { TitleView(activityType: activityType, goalType: goal.type) GoalTypeSelector(types: goals.map { $0.type }, selectedIdx: $selectedGoalTypeIdx) .zIndex(20) .padding([.leading, .trailing], -21) SetTargetView(goal: goal, howWeCalculateModel: howWeCalculatePopupModel) .animation(.none) .modifier(TargetOpacityAnimation(progress: selectedGoalTypeIdx > 0 ? 1.0 : 0.0)) Button { generator.impactOccurred() isPresented = false presentationMode.wrappedValue.dismiss() } label: { ZStack { RoundedRectangle(cornerRadius: 12, style: .continuous) .fill(Color(UIColor.adOrangeLighter)) Text("Set Goal") .foregroundColor(.black) .semibold() } .frame(height: 56) .maxWidth(.infinity) } .padding(.top, 2) .zIndex(20) } .padding(.bottom, 15) .padding([.leading, .trailing], 21) } } .background( Color(white: 0.05) .cornerRadius(35, corners: [.topLeft, .topRight]) .ignoresSafeArea() ) } } .background(Color.clear) .onAppear { goals = NSUbiquitousKeyValueStore.default.goals(for: activityType) goals.forEach { goal in goal.unit = ADUser.current.distanceUnit } selectedGoalTypeIdx = goals.firstIndex(where: { $0.type == goal.type }) ?? 0 goals[selectedGoalTypeIdx] = goal if !NSUbiquitousKeyValueStore.default.hasSetBodyMass && ADUser.current.totalDistanceTracked > 0.0 { showingWeightEntryView = true } hasSetup = true } .onDisappear { NSUbiquitousKeyValueStore.default.setGoals(goals, for: activityType) NSUbiquitousKeyValueStore.default.setSelectedGoalIdx(selectedGoalTypeIdx, for: activityType) Analytics.logEvent("Dismiss", screenName, .buttonTap) } .onChange(of: selectedGoalTypeIdx) { [selectedGoalTypeIdx] newValue in guard hasSetup else { return } goal = goal(for: newValue) goal.objectWillChange.send() prevSelectedGoalTypeIdx = selectedGoalTypeIdx if howWeCalculatePopupModel.statCalculationInfoVisible { howWeCalculatePopupModel.showStatCalculation(for: goals[newValue].type.statisticType) } } .fullScreenCover(isPresented: $showingWeightEntryView) { WeightEntryView() .background(BackgroundClearView()) } .fullScreenCover(isPresented: $showingRecordingSettings) { RecordingSettingsView() .background(BackgroundClearView()) } } }

import UIKit import SceneKit import SceneKit.ModelIO import CoreImage import ARKit class Collectible3DView: SCNView, CollectibleSCNView { var collectible: Collectible? var localUsdzUrl: URL? var collectibleEarned: Bool = true var engraveInitials: Bool = true var sceneStartTime: TimeInterval? var latestTime: TimeInterval = 0 var itemNode: SCNNode? var isSetup: Bool = false var defaultCameraDistance: Float = 50.0 internal var assetLoadTask: Task<(), Never>? var placeholderImageView: UIImageView? override func willMove(toSuperview newSuperview: UIView?) { super.willMove(toSuperview: newSuperview) scene?.background.contents = UIColor.clear backgroundColor = .clear if newSuperview != nil { SceneKitCleaner.shared.add(self) } } func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) { sceneStartTime = sceneStartTime ?? time latestTime = time if isPlaying, let startTime = sceneStartTime { sceneTime = time - startTime } } func cleanupOrSetupIfNecessary() { let frameInWindow = self.convert(self.frame, to: nil) guard let windowBounds = self.window?.bounds else { if self.isSetup { self.cleanup() self.alpha = 0 self.isSetup = false } return } let isVisible = frameInWindow.intersects(windowBounds) if isVisible, !self.isSetup, let localUsdzUrl = self.localUsdzUrl { self.isSetup = true self.setup(withLocalUsdzUrl: localUsdzUrl) } if !isVisible && self.isSetup { self.cleanup() self.alpha = 0 self.isSetup = false } } } class CollectibleARSCNView: GestureARView, CollectibleSCNView { var collectible: Collectible? var localUsdzUrl: URL? var collectibleEarned: Bool = true var engraveInitials: Bool = true var sceneStartTime: TimeInterval? var latestTime: TimeInterval = 0 var itemNode: SCNNode? var isSetup: Bool = false var defaultCameraDistance: Float = 50.0 internal var assetLoadTask: Task<(), Never>? var placeholderImageView: UIImageView? override var nodeToMove: SCNNode? { return itemNode } override var distanceToGround: Float { if let collectible = collectible { switch collectible.type { case .remote(let remote): if !remote.shouldFloatInAR { return 0 } default: break } } return super.distanceToGround } override func getShadowImage(_ completion: @escaping (UIImage?) -> Void) { switch collectible?.itemType { case .medal: completion(UIImage(named: "medal_shadow")) case .foundItem: completion(UIImage(named: "item_shadow")) default: completion(nil) } } func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) { sceneStartTime = sceneStartTime ?? time latestTime = time if isPlaying, let startTime = sceneStartTime { sceneTime = time - startTime } } func initialSceneLoaded() {} } protocol CollectibleSCNView: SCNView, SCNSceneRendererDelegate { var collectible: Collectible? { get set } var localUsdzUrl: URL? { get set } var collectibleEarned: Bool { get set } var engraveInitials: Bool { get set } var sceneStartTime: TimeInterval? { get set } var latestTime: TimeInterval { get set } var itemNode: SCNNode? { get set } var isSetup: Bool { get set } var defaultCameraDistance: Float { get set } var assetLoadTask: Task<(), Never>? { get set } var placeholderImageView: UIImageView? { get set } } extension CollectibleSCNView { func setup(withCollectible collectible: Collectible, earned: Bool, engraveInitials: Bool) { self.collectible = collectible self.collectibleEarned = earned self.engraveInitials = engraveInitials self.localUsdzUrl = nil switch collectible.itemType { case .medal: if let medalUsdzUrl = Bundle.main.url(forResource: "medal", withExtension: "scn") { self.localUsdzUrl = medalUsdzUrl self.setup(withLocalUsdzUrl: medalUsdzUrl) } case .foundItem: switch collectible.type { case .remote(let remote): if let usdzUrl = remote.usdzUrl { self.loadRemoteUsdz(atUrl: usdzUrl) } default: break } } } func setupForReusableView(withCollectible collectible: Collectible, earned: Bool = true) { guard collectible != self.collectible || self.collectibleEarned != earned else { return } self.preferredFramesPerSecond = 30 self.reset() self.cleanup() self.collectible = collectible self.collectibleEarned = earned self.localUsdzUrl = nil switch collectible.type { case .remote(let remote): if let usdzUrl = remote.usdzUrl { self.alpha = 0.0 loadRemoteUsdz(atUrl: usdzUrl) } default: break } } fileprivate func addPlaceholder() { DispatchQueue.main.async { self.placeholderImageView?.removeFromSuperview() self.placeholderImageView = UIImageView(image: UIImage(systemName: "shippingbox", withConfiguration: UIImage.SymbolConfiguration(weight: .light))) self.placeholderImageView?.alpha = 0.3 self.placeholderImageView?.contentMode = .scaleAspectFit self.placeholderImageView?.tintColor = .white self.superview?.addSubview(self.placeholderImageView!) self.placeholderImageView?.autoPinEdge(.leading, to: .leading, of: self) self.placeholderImageView?.autoPinEdge(.trailing, to: .trailing, of: self) self.placeholderImageView?.autoPinEdge(.top, to: .top, of: self) self.placeholderImageView?.autoPinEdge(.bottom, to: .bottom, of: self) } } private func loadRemoteUsdz(atUrl url: URL) { if !CollectibleDataCache.hasLoadedItem(atUrl: url) { addPlaceholder() } assetLoadTask?.cancel() assetLoadTask = Task(priority: .userInitiated) { let localUrl = await CollectibleDataCache.loadItem(atUrl: url) if let localUrl = localUrl, !Task.isCancelled { self.localUsdzUrl = localUrl self.setup(withLocalUsdzUrl: localUrl) } } } func setup(withLocalUsdzUrl url: URL) { Task { if let scene = await SceneLoader.loadScene(atUrl: url) { DispatchQueue.main.async { self.isSetup = true self.load(scene) } } } } func load(_ loadedScene: SCNScene) { #if targetEnvironment(simulator) return #endif CustomFiltersVendor.registerFilters() cleanup() if !(self is ARSCNView) { self.alpha = 0 backgroundColor = .clear } self.scene = loadedScene if !(self is ARSCNView) { scene?.background.contents = UIColor.clear } allowsCameraControl = true defaultCameraController.interactionMode = .orbitTurntable defaultCameraController.minimumVerticalAngle = -0.01 defaultCameraController.maximumVerticalAngle = 0.01 autoenablesDefaultLighting = true if (collectible?.itemType ?? .foundItem) != .medal && !(self is ARSCNView) { pointOfView = SCNNode() pointOfView?.camera = SCNCamera() scene?.rootNode.addChildNode(pointOfView!) } if !(self is ARSCNView) { pointOfView?.camera?.wantsHDR = true pointOfView?.camera?.wantsExposureAdaptation = false pointOfView?.camera?.exposureAdaptationBrighteningSpeedFactor = 20 pointOfView?.camera?.exposureAdaptationDarkeningSpeedFactor = 20 pointOfView?.camera?.motionBlurIntensity = 0.5 switch collectible?.type { case .remote(let remote): pointOfView?.camera?.bloomIntensity = CGFloat(remote.bloomIntensity) pointOfView?.position.z = remote.cameraDistance default: pointOfView?.camera?.bloomIntensity = 0.7 pointOfView?.position.z = defaultCameraDistance } pointOfView?.camera?.bloomBlurRadius = 5 pointOfView?.camera?.contrast = 0.5 pointOfView?.camera?.saturation = self.collectibleEarned ? 1.05 : 0 if collectible == nil { pointOfView?.camera?.focalLength = 40 } } antialiasingMode = .multisampling4X if !(self is ARSCNView) { let pinchGR = UIPinchGestureRecognizer(target: nil, action: nil) addGestureRecognizer(pinchGR) let panGR = UIPanGestureRecognizer(target: nil, action: nil) panGR.minimumNumberOfTouches = 2 panGR.maximumNumberOfTouches = 2 addGestureRecognizer(panGR) } if collectible?.itemType == .medal { let medalNode = scene?.rootNode.childNodes.first?.childNodes.first?.childNodes.first?.childNodes.first itemNode = medalNode medalNode?.opacity = 0 Task { let diffuseTexture = await generateTexture(fromCollectible: collectible!, engraveInitials: self.engraveInitials) DispatchQueue.main.async { var roughnessTexture = self.exposureAdjustedImage(diffuseTexture) let metalnessTexture = diffuseTexture if self.collectible!.medalImageHasBlackBackground { let roughnessCIImage = CIImage(cgImage: diffuseTexture.cgImage!) let invertedRoughness = roughnessCIImage .applyingFilter("CIExposureAdjust", parameters: [kCIInputEVKey: 4]) .applyingFilter("CIColorInvert") roughnessTexture = UIImage(ciImage: invertedRoughness).resized(withNewWidth: 1024, imageScale: 1) } medalNode?.geometry?.materials.first?.diffuse.contents = diffuseTexture medalNode?.geometry?.materials.first?.roughness.contents = roughnessTexture medalNode?.geometry?.materials.first?.metalness.contents = metalnessTexture medalNode?.geometry?.materials.first?.metalness.intensity = 1 medalNode?.geometry?.materials.first?.emission.contents = diffuseTexture medalNode?.geometry?.materials.first?.emission.intensity = 0.15 medalNode?.geometry?.materials.first?.selfIllumination.contents = diffuseTexture let normalTexture = CIImage(cgImage: roughnessTexture.cgImage!).applyingFilter("NormalMap") let normalImage = UIImage(ciImage: normalTexture).resized(withNewWidth: 1024, imageScale: 1) medalNode?.geometry?.materials.first?.normal.contents = normalImage if !(self is ARSCNView) { let opacityAction = SCNAction.fadeOpacity(by: 1, duration: 0.2) medalNode?.runAction(opacityAction) } } } } else { itemNode = scene?.rootNode.childNode(withName: "found_item_node", recursively: true) ?? scene?.rootNode.childNodes[safe: 0] //.childNodes[0].childNodes[0].childNodes[0].childNodes[0] } let spin = CABasicAnimation(keyPath: "rotation") spin.fromValue = NSValue(scnVector4: SCNVector4(x: 0, y: 1, z: 0, w: 0)) spin.toValue = NSValue(scnVector4: SCNVector4(x: 0, y: 1, z: 0, w: 2 * .pi)) spin.duration = 6 spin.repeatCount = .infinity spin.usesSceneTimeBase = true delegate = self if self is ARSCNView { allowsCameraControl = false if collectible?.itemType == .medal { itemNode?.scale = SCNVector3(0.02, 0.02, 0.02) } else if let itemNode = itemNode { let desiredHeight: Float = 0.4 let currentHeight = max(abs(itemNode.boundingBox.max.y - itemNode.boundingBox.min.y), abs(itemNode.boundingBox.max.x - itemNode.boundingBox.min.x), abs(itemNode.boundingBox.max.z - itemNode.boundingBox.min.z)) let scale = desiredHeight / currentHeight itemNode.scale = SCNVector3(scale, scale, scale) } itemNode?.position.z -= 1 itemNode?.position.y -= 1 switch collectible?.type { case .remote(let remote): if remote.shouldSpinInAR { itemNode?.addAnimation(spin, forKey: "rotation") } default: itemNode?.addAnimation(spin, forKey: "rotation") } (self as? GestureARView)?.addShadow() itemNode?.opacity = 0 } else if let itemNode = itemNode { if (collectible?.itemType ?? .foundItem) != .medal { let desiredHeight: Float = 30 let currentHeight = max(abs(itemNode.boundingBox.max.y - itemNode.boundingBox.min.y), abs(itemNode.boundingBox.max.x - itemNode.boundingBox.min.x), abs(itemNode.boundingBox.max.z - itemNode.boundingBox.min.z)) let scale = desiredHeight / currentHeight itemNode.scale = SCNVector3(scale, scale, scale) let centerY = (itemNode.boundingBox.min.y + itemNode.boundingBox.max.y) / 2 let centerX = (itemNode.boundingBox.min.x + itemNode.boundingBox.max.x) / 2 let centerZ = (itemNode.boundingBox.min.z + itemNode.boundingBox.max.z) / 2 itemNode.position = SCNVector3(-1 * centerX * scale, -1 * centerY * scale, -1 * centerZ * scale) pointOfView?.position.x = 0 pointOfView?.position.y = 0 } itemNode.addAnimation(spin, forKey: "rotation") scene?.rootNode.rotation = SCNVector4(x: 0, y: 1, z: 0, w: 1.75 * .pi) isPlaying = true UIView.animate(withDuration: 0.2) { self.alpha = self.collectibleEarned ? 1.0 : 0.45 } } UIView.animate(withDuration: 0.2) { self.placeholderImageView?.alpha = 0.0 } completion: { finished in self.placeholderImageView?.removeFromSuperview() self.placeholderImageView = nil } (self as? CollectibleARSCNView)?.initialSceneLoaded() } func cleanup() { isPlaying = false scene?.isPaused = true scene?.rootNode.cleanup() itemNode = nil delegate = nil scene = nil } func reset() { collectible = nil localUsdzUrl = nil } private func generateTexture(fromCollectible collectible: Collectible, engraveInitials: Bool = true, backgroundColor: UIColor = .black) async -> UIImage { let medalImage = await collectible.medalImage let borderColor = await collectible.medalBorderColor let medalBackImage = await generateBackImage(forCollectible: collectible, engraveInitials: engraveInitials) let options = UIGraphicsImageRendererFormat() options.opaque = true options.scale = 1 let size = CGSize(width: 1024, height: 1024) let renderer = UIGraphicsImageRenderer(size: size, format: options) return renderer.image { ctx in backgroundColor.setFill() ctx.fill(CGRect(origin: .zero, size: size)) let medalImgSize = CGSize(width: 512, height: 884) medalImage?.draw(in: CGRect(origin: CGPoint(x: 512, y: 0), size: medalImgSize) .insetBy(dx: 8, dy: 5) .offsetBy(dx: 0, dy: 5)) let backRect = CGRect(origin: .zero, size: medalImgSize) .insetBy(dx: 8, dy: 5) .offsetBy(dx: 0, dy: 5) medalBackImage?.sd_flippedImage(withHorizontal: true, vertical: true)?.draw(in: backRect) if let borderColor = borderColor { let borderFrame = CGRect(x: 0, y: 892, width: 716, height: 132) borderColor.setFill() ctx.fill(borderFrame) } } } private func generateBackImage(forCollectible collectible: Collectible, engraveInitials: Bool) async -> UIImage? { guard let medalImage = await collectible.medalImage, let borderColor = await collectible.medalBorderColor else { return nil } let isDarkBorder = borderColor.isBrightnessUnder(0.3) let medalBackImage = isDarkBorder ? UIImage(named: "medal_back_white")! : UIImage(named: "medal_back")! let textColor = isDarkBorder ? UIColor(white: 0.65, alpha: 1) : UIColor(white: 0.35, alpha: 1) let options = UIGraphicsImageRendererFormat() options.opaque = true options.scale = 1 let size = medalImage.size let renderer = UIGraphicsImageRenderer(size: size, format: options) let style = NSMutableParagraphStyle() style.alignment = .center style.lineBreakMode = .byWordWrapping return renderer.image { ctx in borderColor.setFill() let rect = CGRect(origin: .zero, size: size) ctx.fill(rect) medalBackImage.draw(in: rect) if engraveInitials { // Initial text let initialText = NSString(string: ADUser.current.initials) let initialFont = UIFont.presicav(size: 95, weight: .heavy) let initialAttributes: [NSAttributedString.Key : Any] = [.font: initialFont, .paragraphStyle: style, .foregroundColor: textColor] let initialTextSize = initialText.size(withAttributes: initialAttributes) let initialRect = CGRect(x: size.width / 2 - initialTextSize.width / 2, y: size.height / 2 - initialTextSize.height - 20, width: initialTextSize.width, height: initialTextSize.height) initialText.draw(in: initialRect, withAttributes: initialAttributes) // Earned Text let earnedDate = collectible.dateEarned.formatted(withStyle: .medium) let earnedText = NSString(string: "Earned on \(earnedDate)").uppercased let earnedFont = UIFont.presicav(size: 24) let earnedAttributes: [NSAttributedString.Key : Any] = [.font: earnedFont, .paragraphStyle: style, .foregroundColor: textColor, .kern: 3] let lrMargin: CGFloat = 100 let earnedRect = CGRect(x: lrMargin, y: size.height / 2 + 20, width: size.width - lrMargin * 2, height: 300) earnedText.draw(in: earnedRect, withAttributes: earnedAttributes) } else { let unearnedText = NSString(string: "#anydistancecounts").uppercased let font = UIFont.presicav(size: 24) let attributes: [NSAttributedString.Key : Any] = [.font: font, .paragraphStyle: style, .foregroundColor: textColor, .kern: 3] let lrMargin: CGFloat = 100 let rect = CGRect(x: lrMargin, y: size.height / 2 + 20, width: size.width - lrMargin * 2, height: 300) unearnedText.draw(in: rect, withAttributes: attributes) } } } func exposureAdjustedImage(_ image: UIImage) -> UIImage { let filter = CIFilter(name: "CIColorControls") let ciInputImage = CIImage(cgImage: image.cgImage!) filter?.setValue(ciInputImage, forKey: kCIInputImageKey) filter?.setValue(0.7, forKey: kCIInputContrastKey) filter?.setValue(-0.3, forKey: kCIInputBrightnessKey) if let output = filter?.outputImage { let context = CIContext() let cgOutputImage = context.createCGImage(output, from: ciInputImage.extent) return UIImage(cgImage: cgOutputImage!) } return image } } class NormalMapFilter: CIFilter { @objc dynamic var inputImage: CIImage? override var attributes: [String : Any] { return [ kCIAttributeFilterDisplayName: "Normal Map", "inputImage": [kCIAttributeIdentity: 0, kCIAttributeClass: "CIImage", kCIAttributeDisplayName: "Image", kCIAttributeType: kCIAttributeTypeImage] ] } let normalMapKernel = CIKernel(source: "float lumaAtOffset(sampler source, vec2 origin, vec2 offset)" + "{" + " vec3 pixel = sample(source, samplerTransform(source, origin + offset)).rgb;" + " float luma = dot(pixel, vec3(0.2126, 0.7152, 0.0722));" + " return luma;" + "}" + "kernel vec4 normalMap(sampler image) \n" + "{ " + " vec2 d = destCoord();" + " float northLuma = lumaAtOffset(image, d, vec2(0.0, -1.0));" + " float southLuma = lumaAtOffset(image, d, vec2(0.0, 1.0));" + " float westLuma = lumaAtOffset(image, d, vec2(-1.0, 0.0));" + " float eastLuma = lumaAtOffset(image, d, vec2(1.0, 0.0));" + " float horizontalSlope = ((westLuma - eastLuma) + 1.0) * 0.5;" + " float verticalSlope = ((northLuma - southLuma) + 1.0) * 0.5;" + " return vec4(horizontalSlope, verticalSlope, 1.0, 1.0);" + "}" ) override var outputImage: CIImage? { guard let inputImage = inputImage, let normalMapKernel = normalMapKernel else { return nil } return normalMapKernel.apply(extent: inputImage.extent, roiCallback: { (index, rect) in return rect }, arguments: [inputImage]) } } class CustomFiltersVendor: NSObject, CIFilterConstructor { func filter(withName name: String) -> CIFilter? { switch name { case "NormalMap": return NormalMapFilter() default: return nil } } static func registerFilters() { CIFilter.registerName("NormalMap", constructor: CustomFiltersVendor(), classAttributes: [ kCIAttributeFilterCategories: ["CustomFilters"] ]) } }

import Foundation import SceneKit import SceneKit.ModelIO import CoreImage import ARKit class Gear3DView: SCNView, SCNSceneRendererDelegate { var localUsdzUrl: URL? var sceneStartTime: TimeInterval? var latestTime: TimeInterval = 0 var itemNode: SCNNode? var isSetup: Bool = false var defaultCameraDistance: Float = 50.0 var color: GearColor = .white internal var assetLoadTask: Task<(), Never>? override func willMove(toSuperview newSuperview: UIView?) { super.willMove(toSuperview: newSuperview) scene?.background.contents = UIColor.clear backgroundColor = .clear if newSuperview != nil { SceneKitCleaner.shared.add(self) } } func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) { sceneStartTime = sceneStartTime ?? time latestTime = time if isPlaying, let startTime = sceneStartTime { sceneTime = time - startTime } } func cleanupOrSetupIfNecessary() { let frameInWindow = self.convert(self.frame, to: nil) guard let windowBounds = self.window?.bounds else { if self.isSetup { self.cleanup() self.alpha = 0 self.isSetup = false } return } let isVisible = frameInWindow.intersects(windowBounds) if isVisible, !self.isSetup, let localUsdzUrl = self.localUsdzUrl { self.isSetup = true self.setup(withLocalUsdzUrl: localUsdzUrl, color: color) } if !isVisible && self.isSetup { self.cleanup() self.alpha = 0 self.isSetup = false } } func setup(withLocalUsdzUrl url: URL, color: GearColor) { Task { self.localUsdzUrl = url if let scene = await SceneLoader.loadScene(atUrl: url) { DispatchQueue.main.async { self.isSetup = true self.color = color self.load(scene) } } } } func setColor(color: GearColor) { self.color = color let textureNode = itemNode?.childNode(withName: "Plane_2", recursively: true) Task(priority: .userInitiated) { if let cachedTexture = HealthDataCache.shared.texture(for: color) { textureNode?.geometry?.materials.first?.diffuse.contents = cachedTexture } else if let texture = self.generateSneakerTexture(forColor: color) { HealthDataCache.shared.cache(texture: texture, for: color) textureNode?.geometry?.materials.first?.diffuse.contents = texture } } } func load(_ loadedScene: SCNScene) { #if targetEnvironment(simulator) return #endif CustomFiltersVendor.registerFilters() cleanup() self.alpha = 0 backgroundColor = .clear self.scene = loadedScene scene?.background.contents = UIColor.clear allowsCameraControl = true defaultCameraController.interactionMode = .orbitTurntable defaultCameraController.minimumVerticalAngle = -0.01 defaultCameraController.maximumVerticalAngle = 0.01 autoenablesDefaultLighting = true pointOfView = SCNNode() pointOfView?.camera = SCNCamera() scene?.rootNode.addChildNode(pointOfView!) pointOfView?.camera?.wantsHDR = true pointOfView?.camera?.wantsExposureAdaptation = false pointOfView?.camera?.exposureAdaptationBrighteningSpeedFactor = 20 pointOfView?.camera?.exposureAdaptationDarkeningSpeedFactor = 20 pointOfView?.camera?.motionBlurIntensity = 0.5 pointOfView?.camera?.bloomIntensity = 0.7 pointOfView?.position.z = defaultCameraDistance pointOfView?.camera?.bloomBlurRadius = 5 pointOfView?.camera?.contrast = 0.5 pointOfView?.camera?.saturation = 1.05 pointOfView?.camera?.focalLength = 40 antialiasingMode = .multisampling4X // debugOptions = [.showBoundingBoxes, .renderAsWireframe, .showWorldOrigin] itemNode = scene?.rootNode.childNode(withName: "found_item_node", recursively: true) ?? scene?.rootNode.childNodes[safe: 0] setColor(color: color) let spin = CABasicAnimation(keyPath: "rotation") spin.fromValue = NSValue(scnVector4: SCNVector4(x: 0, y: 1, z: 0, w: 0)) spin.toValue = NSValue(scnVector4: SCNVector4(x: 0, y: 1, z: 0, w: 2 * .pi)) spin.duration = 6 spin.repeatCount = .infinity spin.usesSceneTimeBase = true delegate = self if let itemNode = itemNode { let desiredHeight: Float = 30 let currentHeight = max(abs(itemNode.boundingBox.max.y - itemNode.boundingBox.min.y), abs(itemNode.boundingBox.max.x - itemNode.boundingBox.min.x), abs(itemNode.boundingBox.max.z - itemNode.boundingBox.min.z)) let scale = desiredHeight / currentHeight itemNode.scale = SCNVector3(scale, scale, scale) let centerY = (itemNode.boundingBox.min.y + itemNode.boundingBox.max.y) / 2 let centerX = (itemNode.boundingBox.min.x + itemNode.boundingBox.max.x) / 2 let centerZ = (itemNode.boundingBox.min.z + itemNode.boundingBox.max.z) / 2 itemNode.position = SCNVector3(-1 * centerX * scale, -1 * centerY * scale, -1 * centerZ * scale) pointOfView?.position.x = 0 pointOfView?.position.y = 0 itemNode.addAnimation(spin, forKey: "rotation") } scene?.rootNode.rotation = SCNVector4(x: 0, y: 1, z: 0, w: 1.75 * .pi) isPlaying = true UIView.animate(withDuration: 0.2) { self.alpha = 1.0 } } func cleanup() { isPlaying = false scene?.isPaused = true scene?.rootNode.cleanup() itemNode = nil delegate = nil scene = nil } func reset() { localUsdzUrl = nil } private func generateSneakerTexture(forColor color: GearColor) -> UIImage? { let format = UIGraphicsImageRendererFormat() format.scale = 1.0 format.opaque = true let size = CGSize(width: 1024.0, height: 1024.0) let renderer = UIGraphicsImageRenderer(size: size, format: format) return renderer.image { ctx in color.mainColor.setFill() ctx.fill(CGRect(origin: .zero, size: size)) let texture1 = UIImage(named: "texture_sneaker_1")?.withTintColor(color.accent1) texture1?.draw(at: .zero) let texture2 = UIImage(named: "texture_sneaker_2")?.withTintColor(color.accent2) texture2?.draw(at: .zero) let texture3 = UIImage(named: "texture_sneaker_3")?.withTintColor(color.accent3) texture3?.draw(at: .zero) let texture4 = UIImage(named: "texture_sneaker_4")?.withTintColor(color.accent4) texture4?.draw(at: .zero) let texture5 = UIImage(named: "texture_sneaker_5")?.withTintColor(color.accent4) texture5?.draw(at: .zero) } } } extension UIColor { var rgbComponents: [UInt32] { var red: CGFloat = 0 var green: CGFloat = 0 var blue: CGFloat = 0 var alpha: CGFloat = 0 getRed(&red, green: &green, blue: &blue, alpha: &alpha) let redComponent = UInt32(red * 255) let greenComponent = UInt32(green * 255) let blueComponent = UInt32(blue * 255) return [redComponent, greenComponent, blueComponent] } }

#include <metal_stdlib> using namespace metal; #include <SceneKit/scn_metal> struct NodeBuffer { float4x4 modelTransform; float4x4 modelViewTransform; float4x4 normalTransform; float4x4 modelViewProjectionTransform; }; struct VertexIn { float2 position; }; struct VertexOut { float4 position [[position]]; float time; float2 viewSize; int page; }; struct Uniforms { int page; }; /// Passthrough vertex shader vertex VertexOut gradient_animation_vertex(const device packed_float3* in [[ buffer(0) ]], constant float &time [[buffer(1)]], const device packed_float2* viewSize [[buffer(2)]], constant int &page [[buffer(3)]], unsigned int vid [[ vertex_id ]]) { VertexOut out; out.position = float4(in[vid], 1); out.time = time + (float)page * 10.; out.viewSize = float2(viewSize->x, viewSize->y); out.page = page; return out; } float noise1(float seed1, float seed2){ return( fract(seed1+12.34567* fract(100.*(abs(seed1*0.91)+seed2+94.68)* fract((abs(seed2*0.41)+45.46)* fract((abs(seed2)+757.21)* fract(seed1*0.0171)))))) * 1.0038 - 0.00185; } float noise2(float seed1, float seed2, float seed3){ float buff1 = abs(seed1+100.81) + 1000.3; float buff2 = abs(seed2+100.45) + 1000.2; float buff3 = abs(noise1(seed1, seed2)+seed3) + 1000.1; buff1 = (buff3*fract(buff2*fract(buff1*fract(buff2*0.146)))); buff2 = (buff2*fract(buff2*fract(buff1+buff2*fract(buff3*0.52)))); buff1 = noise1(buff1, buff2); return(buff1); } float noise3(float seed1, float seed2, float seed3) { float buff1 = abs(seed1+100.813) + 1000.314; float buff2 = abs(seed2+100.453) + 1000.213; float buff3 = abs(noise1(buff2, buff1)+seed3) + 1000.17; buff1 = (buff3*fract(buff2*fract(buff1*fract(buff2*0.14619)))); buff2 = (buff2*fract(buff2*fract(buff1+buff2*fract(buff3*0.5215)))); buff1 = noise2(noise1(seed2,buff1), noise1(seed1,buff2), noise1(seed3,buff3)); return(buff1); } /// Fragment shader for gradient animation fragment float4 gradient_animation_fragment(VertexOut in [[stage_in]]) { float2 st = in.position.xy/in.viewSize.xy; st = float2(tan(st.x), sin(st.y)); st.x += (sin(in.time/2.1)+2.0)*0.12*sin(sin(st.y*st.x+in.time/6.0)*8.2); st.y -= (cos(in.time/1.73)+2.0)*0.12*cos(st.x*st.y*5.1-in.time/4.0); float3 bg = float3(0.0); float3 color1; float3 color2; float3 color3; float3 color4; float3 color5; if (in.page == 0) { color1 = float3(252.0/255.0, 60.0/255.0, 0.0/255.0); color2 = float3(253.0/255.0, 0.0/255.0, 12.0/255.0); color3 = float3(26.0/255.0, 0.5/255.0, 6.0/255.0); color4 = float3(128.0/255.0, 0.0/255.0, 17.0/255.0); color5 = float3(255.0/255.0, 15.0/255.0, 8.0/255.0); } else if (in.page == 1) { color1 = float3(183.0/255.0, 246.0/255.0, 254.0/255.0); color2 = float3(50.0/255.0, 160.0/255.0, 251.0/255.0); color3 = float3(3.0/255.0, 79.0/255.0, 231.0/255.0); color4 = float3(1.0/255.0, 49.0/255.0, 161.0/255.0); color5 = float3(3.0/255.0, 12.0/255.0, 47.0/255.0); } else if (in.page == 2) { color1 = float3(102.0/255.0, 231.0/255.0, 255.0/255.0); color2 = float3(4.0/255.0, 207.0/255.0, 213.0/255.0); color3 = float3(0.0/255.0, 160.0/255.0, 119.0/255.0); color4 = float3(0.0/255.0, 175.0/255.0, 139.0/255.0); color5 = float3(2.0/255.0, 37.0/255.0, 27.0/255.0); } else { color1 = float3(255.0/255.0, 50.0/255.0, 134.0/255.0); color2 = float3(236.0/255.0, 18.0/255.0, 60.0/255.0); color3 = float3(178.0/255.0, 254.0/255.0, 0.0/255.0); color4 = float3(0.0/255.0, 248.0/255.0, 209.0/255.0); color5 = float3(0.0/255.0, 186.0/255.0, 255.0/255.0); } float mixValue = smoothstep(0.0, 0.8, distance(st,float2(sin(in.time/5.0)+0.5,sin(in.time/6.1)+0.5))); float3 outColor = mix(color1,bg,mixValue); mixValue = smoothstep(0.1, 0.9, distance(st,float2(sin(in.time/3.94)+0.7,sin(in.time/4.2)-0.1))); outColor = mix(color2,outColor,mixValue); mixValue = smoothstep(0.1, 0.8, distance(st,float2(sin(in.time/3.43)+0.2,sin(in.time/3.2)+0.45))); outColor = mix(color3,outColor,mixValue); mixValue = smoothstep(0.14, 0.89, distance(st,float2(sin(in.time/5.4)-0.3,sin(in.time/5.7)+0.7))); outColor = mix(color4,outColor,mixValue); mixValue = smoothstep(0.01, 0.89, distance(st,float2(sin(in.time/9.5)+0.23,sin(in.time/3.95)+0.23))); outColor = mix(color5,outColor,mixValue); /// ---- mixValue = smoothstep(0.01, 0.89, distance(st,float2(cos(in.time/8.5)/2.+0.13,sin(in.time/4.95)-0.23))); outColor = mix(color1,outColor,mixValue); mixValue = smoothstep(0.1, 0.9, distance(st,float2(cos(in.time/6.94)/2.+0.7,sin(in.time/4.112)+0.66))); outColor = mix(color2,outColor,mixValue); mixValue = smoothstep(0.1, 0.8, distance(st,float2(cos(in.time/4.43)/2.+0.2,sin(in.time/6.2)+0.85))); outColor = mix(color3,outColor,mixValue); mixValue = smoothstep(0.14, 0.89, distance(st,float2(cos(in.time/10.4)/2.-0.3,sin(in.time/5.7)+0.8))); outColor = mix(color4,outColor,mixValue); mixValue = smoothstep(0.01, 0.89, distance(st,float2(cos(in.time/4.5)/2.+0.63,sin(in.time/4.95)+0.93))); outColor = mix(color5,outColor,mixValue); float2 st_unwarped = in.position.xy/in.viewSize.xy; float3 noise = float3(noise3(st_unwarped.x*0.000001, st_unwarped.y*0.000001, in.time * 1e-15)); outColor = (outColor * 0.85) - (noise * 0.1); return float4(outColor, 1.0); }

fileprivate struct TapAndHoldToStopView: View { @Binding var isPressed: Bool @State private var isVisible: Bool = false var drawerClosedHeight: CGFloat var body: some View { VStack { ZStack { Group { DarkBlurView() .mask(RoundedRectangle(cornerRadius: 30)) ToastText(text: "Tap and hold to stop", icon: Image(systemName: .stopFill), iconIncludesCircle: false) } ZStack { BlurView(style: .systemUltraThinMaterialLight, intensity: 0.3) .brightness(0.2) .mask(RoundedRectangle(cornerRadius: 30)) ToastText(text: "Tap and hold to stop", icon: Image(systemName: .stopFill), iconIncludesCircle: false, foregroundColor: .black) } .mask { GeometryReader { geo in HStack { Rectangle() .frame(width: isPressed ? geo.size.width : 0) Spacer() } } } } .frame(width: 260) .opacity(isVisible ? 1.0 : 0.0) .scaleEffect(isVisible ? 1.0 : 1.1) .frame(height: 60) .onChange(of: isPressed) { _ in withAnimation(isPressed ? .easeOut(duration: 0.15) : .easeIn(duration: 0.15)) { isVisible = isPressed } } Spacer() .height(drawerClosedHeight) } .ignoresSafeArea() } }

import SwiftUI fileprivate struct GradientAnimation: View { @Binding var animate: Bool private func rand18(_ idx: Int) -> [Float] { let idxf = Float(idx) return [sin(idxf * 6.3), cos(idxf * 1.3 + 48), sin(idxf + 31.2), cos(idxf * 44.1), sin(idxf * 3333.2), cos(idxf + 1.12 * pow(idxf, 3)), sin(idxf * 22), cos(idxf * 34)] } var body: some View { ZStack { ForEach(Array(0...50), id: \.self) { idx in let rands = rand18(idx) let fill = Color(hue: sin(Double(idx) * 5.12) + 1.1, saturation: 1, brightness: 1) Ellipse() .fill(fill) .frame(width: CGFloat(rands[1] + 2.0) * 50.0, height: CGFloat(rands[2] + 2.0) * 40.0) .blur(radius: 25.0 + CGFloat(rands[1] + rands[2]) / 2) .opacity(0.8) .offset(x: CGFloat(animate ? rands[3] * 150.0 : rands[4] * 150.0), y: CGFloat(animate ? rands[5] * 50.0 : rands[6] * 50.0)) .animation(.easeInOut(duration: TimeInterval(rands[7] + 3.0) * 1.3).repeatForever(autoreverses: true), value: animate) } } .offset(y: 0) .onAppear { animate = true } } } struct AccessCodeField: View { @Binding var accessCode: String var isFocused: FocusState<Bool>.Binding @State private var chars: [String] = [String](repeating: " ", count: 6) @State private var animateGradient: Bool = false @State private var showingPasteButton: Bool = false fileprivate struct CharacterText: View { @Binding var text: String var cursorVisible: Bool @State private var animateCursor: Bool = false var body: some View { ZStack { Text(text) .multilineTextAlignment(.center) .font(.system(size: 29, weight: .light, design: .monospaced)) .foregroundColor(.white) .maxHeight(.infinity) .allowsHitTesting(false) RoundedRectangle(cornerRadius: 1.5) .frame(width: 3) .frame(height: 40) .opacity(animateCursor ? 1 : 0) .opacity(cursorVisible ? 1 : 0) .animation(.easeInOut(duration: 0.6).repeatForever(autoreverses: true), value: animateCursor) } .onAppear { animateCursor = true } } } struct GridSeparator: View { var body: some View { VStack(spacing: 0) { Rectangle() .fill(LinearGradient(colors: [.black, .clear, .clear, .black], startPoint: .leading, endPoint: .trailing)) .frame(height: 2) HStack(spacing: 0) { Group { Rectangle() .fill(Color.black) Rectangle() .fill(Color.black.opacity(0.3)) .frame(width: 2) Rectangle() .fill(Color.black) Rectangle() .fill(Color.clear) .frame(width: 2) Rectangle() .fill(Color.black) Rectangle() .fill(Color.clear) .frame(width: 2) } Group { Rectangle() .fill(Color.black) Rectangle() .fill(Color.clear) .frame(width: 2) Rectangle() .fill(Color.black) Rectangle() .fill(Color.black.opacity(0.3)) .frame(width: 2) Rectangle() .fill(Color.black) } } } } } var pasteButton: some View { Button { accessCode = String(UIPasteboard.general.string?.prefix(6) ?? "") showingPasteButton = false } label: { ZStack { VStack { RoundedRectangle(cornerRadius: 8, style: .continuous) .fill(Color(white: 0.2)) .frame(width: 75, height: 40) Rectangle() .rotation(.degrees(45)) .fill(Color(white: 0.2)) .frame(width: 20, height: 20) .offset(y: -25) } Text("Paste") .font(.system(size: 16, weight: .regular, design: .default)) .foregroundColor(.white) .offset(y: -14) } } .opacity(showingPasteButton ? 1 : 0) .animation(.easeInOut(duration: 0.2), value: showingPasteButton) .offset(y: -45) } var body: some View { GeometryReader { geo in ZStack { Color.black Image(uiImage: UIImage(named: "dot_bg")!.resized(withNewWidth: 4)) .resizable(resizingMode: .tile) .opacity(0.15) .mask { GridSeparator() } GradientAnimation(animate: $animateGradient) .frame(height: 60.0) .frame(maxWidth: .infinity) .drawingGroup() .saturation(1.2) .brightness(0.1) .mask { LinearGradient(colors: [.black, .black.opacity(0.1)], startPoint: .top, endPoint: .bottom) } .onChange(of: isFocused.wrappedValue) { _ in animateGradient = !animateGradient } GridSeparator() .opacity(0.45) TextField("", text: $accessCode) .disableAutocorrection(true) .textInputAutocapitalization(.characters) .focused(isFocused) .opacity(0.01) HStack(spacing: 0) { ForEach(Array(0...5), id: \.self) { idx in CharacterText(text: .constant("0"), cursorVisible: false) .frame(width: geo.size.width / 6, height: 60) } } .opacity((isFocused.wrappedValue || !accessCode.isEmpty) ? 0.0 : 0.4) .allowsHitTesting(false) HStack(spacing: 0) { ForEach(Array(0...5), id: \.self) { idx in CharacterText(text: $chars[idx], cursorVisible: accessCode.count == idx && isFocused.wrappedValue) .frame(width: geo.size.width / 6.0, height: 60.0) } } .contentShape(Rectangle()) .onLongPressGesture(minimumDuration: 0.4) { showingPasteButton = true } .simultaneousGesture(TapGesture().onEnded({ _ in accessCode = "" isFocused.wrappedValue = true showingPasteButton = false })) } } .frame(height: 60.0) .mask { RoundedRectangle(cornerRadius: 12.0, style: .continuous) } .background { RoundedRectangle(cornerRadius: 12.0, style: .continuous) .fill(Color.white.opacity(0.25)) .offset(y: 1.0) } .overlay { pasteButton } .onChange(of: accessCode) { newValue in if newValue.count >= 6 { isFocused.wrappedValue = false } showingPasteButton = false chars = newValue.padding(toLength: 6, withPad: " ", startingAt: 0).map { String($0).capitalized } } } } #Preview { @FocusState var focused: Bool AccessCodeField(accessCode: .constant(""), isFocused: $focused) }

fileprivate struct MapView: UIViewRepresentable { @ObservedObject var model: ActivityProgressGraphModel @Binding var selectedClusterIdx: Int func makeUIView(context: Context) -> MKMapView { let mapView = MKMapView() mapView.mapType = .mutedStandard mapView.preferredConfiguration.elevationStyle = .flat mapView.isPitchEnabled = false mapView.showsUserLocation = false mapView.showsBuildings = false mapView.overrideUserInterfaceStyle = .dark mapView.pointOfInterestFilter = MKPointOfInterestFilter.excludingAll mapView.setUserTrackingMode(.none, animated: false) mapView.delegate = context.coordinator mapView.alpha = 0.0 context.coordinator.mkView = mapView model.$coordinateClusters .receive(on: DispatchQueue.main) .sink { _ in selectedClusterIdx = 0 }.store(in: &context.coordinator.subscribers) model.$viewVisible .receive(on: DispatchQueue.main) .sink { visible in if visible { addPolylines(mapView) } else { mapView.removeOverlays(mapView.overlays) } }.store(in: &context.coordinator.subscribers) return mapView } private func addPolylines(_ mapView: MKMapView) { if model.coordinateClusters.isEmpty { return } Task(priority: .userInitiated) { mapView.removeOverlays(mapView.overlays) model.coordinateClusters[selectedClusterIdx].coordinates.forEach { coordinates in coordinates.withUnsafeBufferPointer { pointer in if let base = pointer.baseAddress { let newPolyline = MKPolyline(coordinates: base, count: coordinates.count) mapView.addOverlay(newPolyline) } } } } } func updateUIView(_ uiView: MKMapView, context: Context) { if model.coordinateClusters.count > selectedClusterIdx { addPolylines(uiView) let rect = model.coordinateClusters[selectedClusterIdx].rect if rect != context.coordinator.displayedRect { let edgePadding = UIEdgeInsets(top: 180.0, left: 25.0, bottom: UIScreen.main.bounds.height * 0.4, right: 25.0) uiView.setVisibleMapRect(rect, edgePadding: edgePadding, animated: context.coordinator.hasSetInitialRegion) context.coordinator.displayedRect = rect context.coordinator.resetAnimationTimer() context.coordinator.hasSetInitialRegion = true } context.coordinator.shouldAnimateIn = true } else if model.coordinateClusters.isEmpty { uiView.removeOverlays(uiView.overlays) if context.coordinator.hasSetInitialRegion && model.hasPerformedInitialLoad { context.coordinator.shouldAnimateIn = true } } } func makeCoordinator() -> Coordinator { Coordinator(parent: self) } final class Coordinator: NSObject, MKMapViewDelegate { private var parent: MapView var mkView: MKMapView? var subscribers: Set<AnyCancellable> = [] var hasSetInitialRegion: Bool = false var hasInitialFinishedRender: Bool = false var displayedRect: MKMapRect? var shouldAnimateIn: Bool = false var willRender: Bool = false private lazy var displayLink = CADisplayLink(target: self, selector: #selector(displayLinkFire)) private var polylineProgress: CGFloat = 0 private let lineColor = UIColor.white.withAlphaComponent(0.6) init(parent: MapView) { self.parent = parent super.init() self.displayLink.add(to: .main, forMode: .common) self.displayLink.add(to: .main, forMode: .tracking) self.displayLink.isPaused = false } func resetAnimationTimer() { polylineProgress = -0.05 displayLinkFire() displayLink.isPaused = true } @objc func displayLinkFire() { if polylineProgress <= 1 { for overlay in mkView!.overlays { if !overlay.boundingMapRect.intersects(mkView?.visibleMapRect ?? MKMapRect()) { continue } if let polylineRenderer = mkView!.renderer(for: overlay) as? MKPolylineRenderer { polylineRenderer.strokeEnd = RouteScene.easeOutQuad(x: polylineProgress).clamped(to: 0...1) polylineRenderer.strokeColor = polylineProgress <= 0.01 ? .clear : lineColor polylineRenderer.blendMode = .destinationAtop polylineRenderer.setNeedsDisplay() } } polylineProgress += 0.01 } } func lineWidth(for mapView: MKMapView) -> CGFloat { let visibleWidth = mapView.visibleMapRect.width return CGFloat(-0.00000975 * visibleWidth + 2.7678715).clamped(to: 1.5...2.5) } func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer { let stroke = lineWidth(for: mapView) if let routePolyline = overlay as? MKPolyline { let renderer = MKPolylineRenderer(polyline: routePolyline) renderer.strokeColor = displayLink.isPaused ? .clear : lineColor renderer.lineWidth = stroke renderer.strokeEnd = displayLink.isPaused ? 0 : 1 renderer.blendMode = .destinationAtop renderer.lineJoin = .round renderer.lineCap = .round return renderer } return MKOverlayRenderer() } func mapViewDidChangeVisibleRegion(_ mapView: MKMapView) { let stroke = lineWidth(for: mapView) for overlay in mkView!.overlays { if !overlay.boundingMapRect.intersects(mkView?.visibleMapRect ?? MKMapRect()) { continue } if let polylineRenderer = mkView!.renderer(for: overlay) as? MKPolylineRenderer { polylineRenderer.lineWidth = stroke } } } func mapViewWillStartRenderingMap(_ mapView: MKMapView) { willRender = true } func mapView(_ mapView: MKMapView, regionDidChangeAnimated animated: Bool) { if willRender { return } displayLink.isPaused = false } func mapViewDidFinishRenderingMap(_ mapView: MKMapView, fullyRendered: Bool) { if fullyRendered { displayLink.isPaused = false willRender = false if shouldAnimateIn { UIView.animate(withDuration: 0.3) { mapView.alpha = 1.0 } shouldAnimateIn = false } } } } }

import SwiftUI struct AppleHealthPermissionsView: View { @State var dismissing: Bool = false @State var isPresented: Bool = false var nextAction: (() -> Void)? var body: some View { ZStack { Color.black.opacity(0.4) .ignoresSafeArea() .opacity(isPresented ? 1 : 0) .animation(.easeInOut(duration: 0.2), value: isPresented) VStack(spacing: 0) { Text("Permissions for Apple Health") .padding([.leading, .trailing, .top], 16) .padding([.bottom], 4) .multilineTextAlignment(.center) .font(.system(size: 17, weight: .semibold)) Text("To sync your Activities, Any Distance needs permission to view your Apple Health data. The data is only read, it's never stored or shared elsewhere.\n\nOn the next screen, tap “Turn On All” and “Allow” to continue with your setup.") .padding([.leading, .trailing, .bottom], 16) .multilineTextAlignment(.center) .font(.system(size: 13)) LoopingVideoView(videoUrl: Bundle.main.url(forResource: "health-how-to", withExtension: "mp4"), videoGravity: .resizeAspect) .frame(width: UIScreen.main.bounds.width * 0.7, height: UIScreen.main.bounds.width * 0.55) .background(Color.white) Rectangle() .fill(Color.white.opacity(0.35)) .frame(height: 0.5) HStack(spacing: 0) { Button { dismissing = true isPresented = false DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) { UIApplication.shared.topViewController?.dismiss(animated: false) } } label: { Text("Cancel") .foregroundColor(.blue) .brightness(0.1) .frame(width: (UIScreen.main.bounds.width * 0.35) - 1, height: 46) } .buttonStyle(AlertButtonStyle()) Rectangle() .fill(Color.white.opacity(0.35)) .frame(width: 0.5, height: 46) Button { nextAction?() } label: { Text("Next") .foregroundColor(.blue) .brightness(0.1) .frame(width: (UIScreen.main.bounds.width * 0.35) - 1, height: 46) } .buttonStyle(AlertButtonStyle()) } } .background { BlurView() } .cornerRadius(14, style: .continuous) .frame(width: UIScreen.main.bounds.width * 0.7) .opacity(isPresented ? 1 : 0) .scaleEffect(dismissing ? 1 : (isPresented ? 1 : 1.15)) .animation(.easeOut(duration: 0.25), value: isPresented) } .onAppear { isPresented = true } } } struct AppleHealthPermissionsView_Previews: PreviewProvider { static var previews: some View { AppleHealthPermissionsView() } }

import UIKit class SyncAnimationView: UIView { // MARK: - Images let supportedActivitiesIcons = UIImage(named: "sync_supported_activities")! let sourceIcons: [UIImage] = [UIImage(named: "icon_garmin")!, UIImage(named: "icon_runkeeper")!, UIImage(named: "icon_peloton")!, UIImage(named: "icon_nrc")!, UIImage(named: "icon_strava")!, UIImage(named: "icon_fitness")!] let healthIcon = UIImage(named: "glyph_applehealth_100px")! let syncIcon = UIImage(named: "glyph_sync")! // MARK: - Colors let sourceColors: [UIColor] = [UIColor(hex: "00B0F3")!, UIColor(hex: "00CCDA")!, UIColor(hex: "FF003D")!, UIColor(hex: "464646")!, UIColor(hex: "FF5700")!, UIColor(hex: "CCFF00")!] let trackColor = UIColor(hex: "2B2B2B")! let healthDotColor = UIColor(hex: "FFC100")! // MARK: - Layout let headerHeight: CGFloat = 50 let sourceIconSize: CGFloat = 61 let sourceIconSpacing: CGFloat = 14 let sourceTrackSpacing: CGFloat = 10 let sourceStartY: CGFloat = 142 let trackWidth: CGFloat = 4.5 let trackCornerRadius: CGFloat = 32 let dotRadius: CGFloat = 7.5 var sourceHealthSpacing: CGFloat = 110 let healthIconSize: CGFloat = 100 let verticalLineLength: CGFloat = 400 let syncIconSize: CGFloat = 113 let iconCarouselSpeed: CGFloat = 0.5 let dotSpeed: CGFloat = 0.6 let dotSpawnRate: Int = 40 let verticalDotSpeed: CGFloat = 0.4 let verticalDotSpawnRate: Int = 120 let syncIconRotationRate: CGFloat = 0.05 let translateAnimationDuration: CGFloat = 1.5 var finalTranslateY: CGFloat = -650 // MARK: - Variables private var displayLink: CADisplayLink! private var t: Int = 0 private var dots: [Dot] = [] private var verticalDots: [VerticalDot] = [] private var dotSpawn: Int = 0 private var verticalDotSpawn: Int = 0 private var translateY: CGFloat = 0 private var syncIconRotate: CGFloat = 0 private var prevDotSpawnIdx: Int = 0 private var animProgress: CGFloat = 0 private var animatingTranslate: Bool = false // MARK: - Setup override func awakeFromNib() { super.awakeFromNib() // adjust spacing between source icons and health icon for smaller screens let sizeDiff = (844 - UIScreen.main.bounds.height).clamped(to: -30...60) sourceHealthSpacing -= sizeDiff finalTranslateY += sizeDiff // make dots spawn immediately dotSpawn = dotSpawnRate - 1 verticalDotSpawn = verticalDotSpawnRate - 30 layer.masksToBounds = false clipsToBounds = false displayLink = CADisplayLink(target: self, selector: #selector(update)) displayLink.preferredFramesPerSecond = 60 displayLink.add(to: .main, forMode: .common) } func animateTranslate() { animatingTranslate = true } func translateWithoutAnimating() { translateY = finalTranslateY } @objc private func update() { t += 1 incrementDots() spawnNewDots() spawnNewVerticalDots() setNeedsDisplay() if animatingTranslate { animProgress += 1 / translateAnimationDuration / 60 let easedProgress = easeInOutQuart(x: animProgress) translateY = easedProgress * finalTranslateY if easedProgress >= 1 { animatingTranslate = false } } } private func easeInOutQuart(x: CGFloat) -> CGFloat { return x < 0.5 ? 8 * pow(x, 4) : 1 - pow(-2 * x + 2, 4) / 2 } private func incrementDots() { var i = 0 while i < dots.count { dots[i].percent += dotSpeed / 100 dots[i].pathStartX -= iconCarouselSpeed if dots[i].percent >= 1 { dots.remove(at: i) } else { i += 1 } } i = 0 while i < verticalDots.count { verticalDots[i].percent += verticalDotSpeed / 100 if verticalDots[i].percent >= 1 { verticalDots.remove(at: i) } else { i += 1 } } } private func spawnNewDots() { guard dotSpawn == dotSpawnRate else { dotSpawn += 1 return } dotSpawn = 0 var i = 0 var startX = (-1 * iconCarouselSpeed * CGFloat(t)) - 150 while startX < 0 { startX += (sourceIconSize + sourceIconSpacing) i += 1 } var rand = prevDotSpawnIdx while rand == prevDotSpawnIdx { rand = Int(arc4random_uniform(5)) } prevDotSpawnIdx = rand startX += CGFloat(rand) * (sourceIconSize + sourceIconSpacing) startX += sourceIconSize / 2 i += rand let newDot = Dot(percent: 0, pathStartX: startX, color: sourceColors[i % sourceColors.count]) dots.append(newDot) } private func spawnNewVerticalDots() { guard verticalDotSpawn == verticalDotSpawnRate else { verticalDotSpawn += 1 return } verticalDotSpawn = 0 let newVerticalDot = VerticalDot(percent: 0) verticalDots.append(newVerticalDot) } // MARK: - Draw override func draw(_ rect: CGRect) { let ctx = UIGraphicsGetCurrentContext() ctx?.translateBy(x: 0, y: headerHeight) ctx?.translateBy(x: 0, y: translateY) // Draw Source Icons + Tracks + Dots var i = 0 var startX = (-1 * iconCarouselSpeed * CGFloat(t)) - 150 func inc() { i += 1 startX += (sourceIconSize + sourceIconSpacing) } let pathStartY: CGFloat = sourceStartY + sourceIconSize + sourceTrackSpacing let pathEndY: CGFloat = sourceStartY + sourceIconSize + sourceHealthSpacing + (healthIconSize / 2) trackColor.setStroke() // Draw horizonal line let horizontalPath = UIBezierPath() horizontalPath.lineCapStyle = .round horizontalPath.lineWidth = trackWidth horizontalPath.move(to: CGPoint(x: -20, y: pathEndY)) horizontalPath.addLine(to: CGPoint(x: bounds.width + 20, y: pathEndY)) horizontalPath.stroke() var sourceIconsToDraw: [UIImage] = [] var sourceIconRects: [CGRect] = [] ctx?.setShadow(offset: .zero, blur: 10, color: nil) while startX < rect.width + (2 * sourceIconSize) { if startX < -2 * sourceIconSize { inc() continue } // Draw Path let path = UIBezierPath() path.lineCapStyle = .round path.lineWidth = trackWidth path.move(to: CGPoint(x: startX + sourceIconSize / 2, y: pathStartY)) path.addLine(to: CGPoint(x: startX + sourceIconSize / 2, y: pathEndY - trackCornerRadius)) let isRightSide = (startX + sourceIconSize / 2) > (bounds.width / 2) let centerX = isRightSide ? startX + (sourceIconSize / 2) - trackCornerRadius : startX + (sourceIconSize / 2) + trackCornerRadius path.addArc(withCenter: CGPoint(x: centerX, y: pathEndY - trackCornerRadius), radius: trackCornerRadius, startAngle: isRightSide ? 0 : .pi, endAngle: .pi / 2, clockwise: isRightSide) path.stroke() // Queue source icon drawing for after we draw the dots let icon = sourceIcons[i % sourceIcons.count] let rect = CGRect(x: startX, y: sourceStartY, width: sourceIconSize, height: sourceIconSize) sourceIconsToDraw.append(icon) sourceIconRects.append(rect) inc() } // Draw Dots for dot in dots { let centerPoint = pointOnPath(forDot: dot) dot.color.setFill() ctx?.setShadow(offset: .zero, blur: 10, color: dot.color.cgColor) UIBezierPath(ovalIn: CGRect(x: centerPoint.x - dotRadius, y: centerPoint.y - dotRadius, width: dotRadius * 2, height: dotRadius * 2)).fill() } // Draw Source Icons ctx?.setShadow(offset: .zero, blur: 10, color: nil) for (icon, rect) in zip(sourceIconsToDraw, sourceIconRects) { icon.draw(in: rect) } // Draw vertical line let verticalPath = UIBezierPath() verticalPath.lineWidth = trackWidth verticalPath.move(to: CGPoint(x: bounds.width / 2, y: pathEndY)) verticalPath.addLine(to: CGPoint(x: bounds.width / 2, y: pathEndY + verticalLineLength)) verticalPath.stroke() // Draw vertical dots ctx?.setShadow(offset: .zero, blur: 10, color: healthDotColor.cgColor) for dot in verticalDots { let y = pathEndY + (verticalLineLength * dot.percent) let centerPoint = CGPoint(x: bounds.width / 2, y: y) let dotFrame = CGRect(x: centerPoint.x - dotRadius, y: centerPoint.y - dotRadius, width: dotRadius * 2, height: dotRadius * 2) healthDotColor.setFill() UIBezierPath(ovalIn: dotFrame).fill() } // Draw Health Icon ctx?.setShadow(offset: .zero, blur: 10, color: nil) let healthIconFrame = CGRect(x: (bounds.width / 2) - (healthIconSize / 2), y: pathEndY - (healthIconSize / 2), width: healthIconSize, height: healthIconSize) healthIcon.draw(in: healthIconFrame) // Draw Sync Icon ctx?.translateBy(x: (bounds.width / 2), y: (pathEndY + verticalLineLength)) ctx?.rotate(by: syncIconRotate) ctx?.translateBy(x: -1 * (syncIconSize / 2), y: -1 * (syncIconSize / 2)) syncIcon.draw(in: CGRect(origin: .zero, size: CGSize(width: syncIconSize, height: syncIconSize))) syncIconRotate += syncIconRotationRate } private func pointOnPath(forDot dot: Dot) -> CGPoint { let percent = dot.percent let isRightSide = dot.pathStartX > (bounds.width / 2) let centerX = isRightSide ? dot.pathStartX - trackCornerRadius : dot.pathStartX + trackCornerRadius let pathStartY: CGFloat = sourceStartY + (sourceIconSize / 2) let pathEndY: CGFloat = sourceStartY + sourceIconSize + sourceHealthSpacing + (healthIconSize / 2) let verticalLineLength = pathEndY - pathStartY - trackCornerRadius let curveLength = .pi * trackCornerRadius / 2 let horizontalLineLength = abs((bounds.width / 2) - centerX) let totalLineLength = verticalLineLength + curveLength + horizontalLineLength let vertPercent = percent / (verticalLineLength / totalLineLength) let curvePercent = (percent - (verticalLineLength / totalLineLength)) / (curveLength / totalLineLength) let horizontalPercent = (percent - ((verticalLineLength + curveLength) / totalLineLength)) / (horizontalLineLength / totalLineLength) var dotPoint: CGPoint = .zero if percent <= verticalLineLength / totalLineLength { // Dot is on vertical line dotPoint = CGPoint(x: dot.pathStartX, y: pathStartY + (verticalLineLength * vertPercent)) } else if percent <= (verticalLineLength + curveLength) / totalLineLength { // Dot is on curve if abs((bounds.width / 2) - dot.pathStartX) < healthIconSize / 3 { // Make dot go straight down if its under the Health icon dotPoint = CGPoint(x: bounds.width / 2, y: pathEndY) } else if isRightSide { let angle = ((.pi / 2) * (1 - curvePercent)) dotPoint = CGPoint(x: centerX + (trackCornerRadius * sin(angle)), y: (pathEndY - trackCornerRadius) + (trackCornerRadius * cos(angle))) } else { let angle = ((.pi / 2) * curvePercent) - (.pi / 2) dotPoint = CGPoint(x: centerX + (trackCornerRadius * sin(angle)), y: (pathEndY - trackCornerRadius) + (trackCornerRadius * cos(angle))) } } else { // Dot is on horizontal line if abs((bounds.width / 2) - dot.pathStartX) < healthIconSize / 3 { // Make dot go straight down if its under the Health icon dotPoint = CGPoint(x: bounds.width / 2, y: pathEndY) } else { let clampedPercent = horizontalPercent.clamped(to: 0...1) let x = isRightSide ? centerX - (clampedPercent * horizontalLineLength) : centerX + (clampedPercent * horizontalLineLength) dotPoint = CGPoint(x: x, y: pathEndY) } } return dotPoint } } fileprivate struct Dot { var percent: CGFloat var pathStartX: CGFloat var color: UIColor } fileprivate struct VerticalDot { var percent: CGFloat }

import UIKit import QuartzCore public final class ConfettiView: UIView { public var colors = GoalProgressIndicator().trackGradientColors public var intensity: Float = 0.8 public var style: ConfettiViewStyle = .large private(set) var emitter: CAEmitterLayer? private var active = false private var image = UIImage(named: "confetti")?.cgImage public func startConfetti(beginAtTimeZero: Bool = true) { emitter?.removeFromSuperlayer() emitter = CAEmitterLayer() if beginAtTimeZero { emitter?.beginTime = CACurrentMediaTime() } emitter?.emitterPosition = CGPoint(x: frame.size.width / 2.0, y: -10) emitter?.emitterShape = .line emitter?.emitterSize = CGSize(width: frame.size.width, height: 1) var cells = [CAEmitterCell]() for color in colors { cells.append(confettiWithColor(color: color)) } emitter?.emitterCells = cells switch style { case .large: emitter?.birthRate = 4 DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) { self.emitter?.birthRate = 0.6 } case .small: emitter?.birthRate = 0.35 } layer.addSublayer(emitter!) active = true } public func stopConfetti() { emitter?.birthRate = 0 active = false } public override func layoutSubviews() { super.layoutSubviews() emitter?.emitterPosition = CGPoint(x: frame.size.width / 2.0, y: -10) emitter?.emitterSize = CGSize(width: frame.size.width, height: 1) } func confettiWithColor(color: UIColor) -> CAEmitterCell { let confetti = CAEmitterCell() confetti.birthRate = 12.0 * intensity confetti.lifetime = 14.0 * intensity confetti.lifetimeRange = 0 confetti.color = color.cgColor confetti.velocity = CGFloat(350.0 * intensity) confetti.velocityRange = CGFloat(80.0 * intensity) confetti.emissionLongitude = CGFloat(Double.pi) confetti.emissionRange = CGFloat(Double.pi) confetti.spin = CGFloat(3.5 * intensity) confetti.spinRange = CGFloat(4.0 * intensity) confetti.scaleRange = CGFloat(intensity) confetti.scaleSpeed = CGFloat(-0.1 * intensity) confetti.contents = image confetti.contentsScale = 1.5 confetti.setValue("plane", forKey: "particleType") confetti.setValue(Double.pi, forKey: "orientationRange") confetti.setValue(Double.pi / 2, forKey: "orientationLongitude") confetti.setValue(Double.pi / 2, forKey: "orientationLatitude") if style == .small { confetti.contentsScale = 3.0 confetti.velocity = CGFloat(70.0 * intensity) confetti.velocityRange = CGFloat(20.0 * intensity) } return confetti } public func isActive() -> Bool { return self.active } } public enum ConfettiViewStyle { case large case small }

import UIKit import PureLayout protocol RecentPhotoPickerDelegate: AnyObject { func recentPhotoPickerPickedPhoto(_ photo: UIImage) } final class RecentPhotoPicker: UIView { // MARK: - Constants let buttonSize: CGSize = CGSize(width: 46, height: 68) let collapsedOverlap: CGFloat = 12 let expandedSpacing: CGFloat = 8 let deselectedBorderColor: UIColor = UIColor(white: 0.15, alpha: 1) let inactiveBorderColor: UIColor = UIColor(white: 0.08, alpha: 1) // MARK: - Variables weak var delegate: RecentPhotoPickerDelegate? private var activityIndicator: UIActivityIndicatorView? private var loadingSquare: UIImageView? private var buttons: [ScalingPressButton] = [] private var widthConstraint: NSLayoutConstraint? private var buttonLeadingConstraints: [NSLayoutConstraint] = [] private var state: RecentPhotoPickerState = .collapsed // MARK: - Setup override func awakeFromNib() { super.awakeFromNib() setup() } private func setup() { layer.masksToBounds = false backgroundColor = .black loadingSquare = UIImageView(image: UIImage(named: "button_editor_empty")?.withRenderingMode(.alwaysTemplate)) loadingSquare?.tintColor = inactiveBorderColor addSubview(loadingSquare!) loadingSquare?.autoPinEdge(toSuperviewEdge: .top, withInset: 18) loadingSquare?.autoAlignAxis(.vertical, toSameAxisOf: self, withOffset: 0) loadingSquare?.autoSetDimensions(to: buttonSize) activityIndicator = UIActivityIndicatorView(style: .medium) activityIndicator?.startAnimating() addSubview(activityIndicator!) activityIndicator?.autoAlignAxis(.horizontal, toSameAxisOf: loadingSquare!) activityIndicator?.autoAlignAxis(.vertical, toSameAxisOf: loadingSquare!) widthConstraint = self.autoSetDimension(.width, toSize: buttonSize.width + expandedSpacing * 2) } func addButtonsWithPhotos(_ photos: [UIImage]) { var prevButton: ScalingPressButton? for i in 0..<photos.count { let button = ScalingPressButton() button.imageView?.contentMode = .scaleAspectFill button.imageView?.layer.cornerRadius = 5.5 button.imageView?.layer.cornerCurve = .continuous button.imageView?.layer.masksToBounds = true button.imageView?.layer.minificationFilter = .trilinear button.imageView?.layer.minificationFilterBias = 0.06 button.imageEdgeInsets = UIEdgeInsets(top: 2.5, left: 2.5, bottom: 2.5, right: 2.5) let grayBorder = UIImage(named: "button_editor_empty")?.withRenderingMode(.alwaysTemplate) button.setBackgroundImage(grayBorder, for: .normal) button.tintColor = deselectedBorderColor button.setImage(photos[i], for: .normal) button.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside) button.alpha = 0 button.transform = CGAffineTransform(scaleX: 0.5, y: 0.5) addSubview(button) sendSubviewToBack(button) buttons.append(button) button.autoPinEdge(toSuperviewEdge: .top, withInset: 18) button.autoSetDimensions(to: buttonSize) if let prev = prevButton { let constraint = button.autoPinEdge(.leading, to: .leading, of: prev, withOffset: collapsedOverlap) buttonLeadingConstraints.append(constraint) } else { button.autoPinEdge(.leading, to: .leading, of: self) } prevButton = button } layoutIfNeeded() if !buttons.isEmpty { self.widthConstraint?.constant = CGFloat(buttons.count - 1) * collapsedOverlap + buttonSize.width + (expandedSpacing * 2) hideLoadingView() for (i, button) in self.buttons.enumerated() { UIView.animate(withDuration: 0.5, delay: TimeInterval(i) * 0.05, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.1, options: [.curveEaseIn], animations: { button.alpha = 1 button.transform = .identity }, completion: nil) } } else { self.widthConstraint?.constant = 0 hideLoadingView() } } private func hideLoadingView() { UIView.animate(withDuration: 0.6, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0.1, options: [.curveEaseIn], animations: { self.activityIndicator?.alpha = 0 self.loadingSquare?.alpha = 0 self.superview?.layoutIfNeeded() }, completion: nil) } private func expand() { buttonLeadingConstraints.forEach { constraint in constraint.constant = buttonSize.width + expandedSpacing } widthConstraint?.constant = CGFloat(buttons.count) * (buttonSize.width + expandedSpacing) UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.85, initialSpringVelocity: 0.1, options: [.curveEaseIn, .allowUserInteraction], animations: { self.superview?.layoutIfNeeded() }, completion: nil) state = .expanded } func deselectAllButtons() { buttons.forEach { button in button.tintColor = deselectedBorderColor } } @objc private func buttonTapped(_ button: ScalingPressButton) { if state == .collapsed && buttons.count > 1 { expand() return } if let image = button.image(for: .normal) { delegate?.recentPhotoPickerPickedPhoto(image) } for b in buttons { UIView.transition(with: button, duration: 0.2, options: [.transitionCrossDissolve], animations: { b.tintColor = (b === button) ? .white : self.deselectedBorderColor }, completion: nil) } } } enum RecentPhotoPickerState { case collapsed case expanded }

import UIKit import PureLayout class HitTestView: UIView { override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? { return outsideBoundsHitTest(point, with: event) } } class HitTestScrollView: UIScrollView { override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? { return outsideBoundsHitTest(point, with: event) } } extension UIView { func outsideBoundsHitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? { guard isUserInteractionEnabled else { return nil } guard !isHidden else { return nil } guard alpha >= 0.01 else { return nil } for subview in subviews.reversed() { let convertedPoint = subview.convert(point, from: self) if let candidate = subview.hitTest(convertedPoint, with: event) { return candidate } } return nil } } final class VerticalPicker: HitTestView { private var label: UILabel! private var backgroundView: UIView! private var buttons: [UIButton] = [] private var buttonBottomConstraints: [NSLayoutConstraint] = [] private var selectedIdx: Int = 0 private var state: VerticalPickerState = .contracted private let generator = UIImpactFeedbackGenerator(style: .medium) private var panGR: UIPanGestureRecognizer? private let expandedWidth: CGFloat = 77.0 private let contractedWidth: CGFloat = 60.0 var tapHandler: ((_ selectedIdx: Int) -> Void)? init(title: String, buttonImages: [UIImage]) { super.init(frame: .zero) backgroundColor = .clear layer.masksToBounds = false clipsToBounds = false label = UILabel() label.text = title label.font = UIFont.systemFont(ofSize: 12.0, weight: .semibold) label.textColor = .white addSubview(label) backgroundView = UIView() backgroundView.layer.cornerRadius = 12.0 backgroundView.layer.cornerCurve = .continuous backgroundView.layer.masksToBounds = true addSubview(backgroundView) let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterial)) backgroundView.addSubview(visualEffectView) visualEffectView.autoPinEdgesToSuperviewEdges() for (i, image) in buttonImages.enumerated() { let button = ScalingPressButton() button.setImage(image, for: .normal) button.alpha = (i == selectedIdx) ? 1.0 : 0.0 button.tag = i button.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside) button.addTarget(self, action: #selector(buttonTouchDown(_:)), for: .touchDown) buttons.append(button) backgroundView.addSubview(button) button.autoPinEdge(toSuperviewEdge: .leading) button.autoPinEdge(toSuperviewEdge: .trailing) button.autoSetDimensions(to: CGSize(width: expandedWidth, height: expandedWidth)) let bottomConstraint = button.autoPinEdge(toSuperviewEdge: .bottom) buttonBottomConstraints.append(bottomConstraint) } backgroundView.autoSetDimension(.width, toSize: expandedWidth) backgroundView.autoAlignAxis(toSuperviewAxis: .vertical) backgroundView.autoPinEdge(toSuperviewEdge: .bottom, withInset: 20.0) backgroundView.autoPinEdge(.top, to: .top, of: buttons.last!) backgroundView.transform = CGAffineTransform(scaleX: contractedWidth / expandedWidth, y: contractedWidth / expandedWidth) label.autoPinEdge(toSuperviewEdge: .top, withInset: 94.0) label.autoPinEdge(toSuperviewEdge: .bottom) label.autoAlignAxis(toSuperviewAxis: .vertical) panGR = UIPanGestureRecognizer(target: self, action: #selector(panGestureHandler(_:))) addGestureRecognizer(panGR!) } @objc private func buttonTouchDown(_ button: UIButton) { expand() } @objc private func buttonTapped(_ button: UIButton) { if (state == .expanding || state == .contracting) && button.tag == selectedIdx { return } selectedIdx = button.tag tapHandler?(button.tag) contract() generator.impactOccurred() } @objc func panGestureHandler(_ recognizer: UIPanGestureRecognizer) { if recognizer.state == .ended || recognizer.state == .cancelled || recognizer.state == .failed { contract() return } let location = recognizer.location(in: backgroundView) let closestButton = buttons.min { button1, button2 in let distance1 = location.distance(to: button1.center) let distance2 = location.distance(to: button2.center) return distance1 < distance2 } guard let closestButton = closestButton, closestButton.tag != selectedIdx else { return } selectedIdx = closestButton.tag tapHandler?(closestButton.tag) generator.impactOccurred() updateButtonSelection() } func selectIdx(_ idx: Int) { guard idx != selectedIdx else { return } selectedIdx = idx for button in buttons { button.alpha = (button.tag == selectedIdx) ? 1.0 : 0.0 } } func expand() { guard state == .contracted || state == .contracting else { return } state = .expanding for (i, constraint) in buttonBottomConstraints.enumerated() { constraint.constant = -0.8 * expandedWidth * CGFloat(i) } UIView.animate(withDuration: 0.45, delay: 0.0, usingSpringWithDamping: 0.92, initialSpringVelocity: 1.0, options: [.curveEaseIn, .allowUserInteraction, .allowAnimatedContent], animations: { self.layoutIfNeeded() self.backgroundView.transform = .identity }, completion: { _ in self.state = .expanded }) updateButtonSelection() } func updateButtonSelection() { UIView.animate(withDuration: 0.3, delay: 0, options: [.allowUserInteraction, .curveEaseOut], animations: { for button in self.buttons { button.alpha = (button.tag == self.selectedIdx) ? 1.0 : 0.5 } }, completion: nil) } func contract() { guard state == .expanded || state == .expanding else { return } state = .contracting for constraint in buttonBottomConstraints { constraint.constant = 0 } let scale = contractedWidth / expandedWidth UIView.animate(withDuration: 0.45, delay: 0.0, usingSpringWithDamping: 0.92, initialSpringVelocity: 1, options: [.curveEaseIn, .allowUserInteraction], animations: { self.layoutIfNeeded() self.backgroundView.transform = CGAffineTransform(scaleX: scale, y: scale) }, completion: { _ in self.state = .contracted }) UIView.animate(withDuration: 0.17) { for button in self.buttons { button.alpha = (button.tag == self.selectedIdx) ? 1.0 : 0.0 } } } required init?(coder: NSCoder) { super.init(coder: coder) } } private enum VerticalPickerState { case expanding case expanded case contracting case contracted }

import Foundation import UIKit class CanvasShareImageGenerator { static let backgroundRouteAlpha: CGFloat = 0.1 static let rescale: CGFloat = 4 static func generateShareImages(canvas: LayoutCanvas, design: ActivityDesign, cancel: @escaping (() -> Bool), progress: @escaping ((Float) -> Void), completion: @escaping ((_ images: ShareImages) -> Void)) { makeBaseImage(canvas: canvas) { (p) in progress(p * 0.5) } completion: { (baseImageInstaStory, baseImageInstaPost, baseImageTwitter) in if cancel() { return } let layoutIsFullscreen = design.cutoutShape == .fullScreen let scrollViewFrame = canvas.cutoutShapeView.photoFrame let zoomScale = CGFloat(design.photoZoom) let contentOffset = design.photoOffset var imageViewFrame = canvas.cutoutShapeView.photoFrame.insetBy(dx: -0.5 * scrollViewFrame.width * (zoomScale - 1.0), dy: -0.5 * scrollViewFrame.height * (zoomScale - 1.0)) imageViewFrame.origin.x = -1 * contentOffset.x imageViewFrame.origin.y = -1 * contentOffset.y let userImage = canvas.mediaType != .none ? canvas.cutoutShapeView.image : nil let userImageFrame = CGSize.aspectFit(aspectRatio: userImage?.size ?? .zero, inRect: imageViewFrame) let userImageFrameMultiplier = CGRect(x: userImageFrame.origin.x / canvas.cutoutShapeView.photoFrame.width, y: userImageFrame.origin.y / canvas.cutoutShapeView.photoFrame.height, width: userImageFrame.width / canvas.cutoutShapeView.photoFrame.width, height: userImageFrame.height / canvas.cutoutShapeView.photoFrame.height) progress(0.6) let opaque = (canvas.mediaType != .video) let instagramStory = makeImage(withAspectRatio: 9/16, palette: design.palette, baseImage: baseImageInstaStory, padTop: true, opaque: opaque, userImage: userImage, userImageFrameMultiplier: userImageFrameMultiplier, layoutIsFullscreen: layoutIsFullscreen) if cancel() { return } progress(0.75) let instagramFeed = makeImage(withAspectRatio: 1, palette: design.palette, baseImage: baseImageInstaPost, padTop: false, opaque: opaque, userImage: userImage, userImageFrameMultiplier: userImageFrameMultiplier, layoutIsFullscreen: layoutIsFullscreen) if cancel() { return } progress(0.9) let twitter = makeImage(withAspectRatio: 3 / 4, palette: design.palette, baseImage: baseImageTwitter, padTop: false, opaque: opaque, userImage: userImage, userImageFrameMultiplier: userImageFrameMultiplier, layoutIsFullscreen: layoutIsFullscreen) if cancel() { return } progress(1) let images = ShareImages(base: baseImageInstaStory, instagramStory: instagramStory, instagramFeed: instagramFeed, twitter: twitter) DispatchQueue.main.async { completion(images) } } } static func renderInstaStoryBaseImage(_ canvas: LayoutCanvas, include3DRoute: Bool = false, completion: @escaping ((UIImage) -> Void)) { if NSUbiquitousKeyValueStore.default.shouldShowAnyDistanceBranding { canvas.watermark.isHidden = false } if canvas.mediaType == .none { canvas.cutoutShapeView.isHidden = true } canvas.cutoutShapeView.prepareForExport(true) // Rescale the canvas UIView.scaleView(canvas.view, scaleFactor: rescale) let frame = canvas.view.frame let layer = canvas.view.layer let opaque = (canvas.mediaType != .video) func finish(finalImage: UIImage) { DispatchQueue.main.async { completion(finalImage) canvas.watermark.isHidden = true canvas.cutoutShapeView.prepareForExport(false) canvas.cutoutShapeView.addMediaButtonImage.isHidden = canvas.mediaType == .none canvas.cutoutShapeView.isHidden = false } } renderLayer(layer, frame: frame, rescale: rescale, opaque: opaque) { (baseImageInstaStory) in if include3DRoute { // Include a static image of the 3D route UIGraphicsBeginImageContextWithOptions(baseImageInstaStory.size, opaque, 1) baseImageInstaStory.draw(at: .zero) let routeFrame = canvas.route3DView.convert(canvas.route3DView.frame, to: canvas) let scaledRouteFrame = CGRect(x: routeFrame.origin.x * rescale, y: routeFrame.origin.y * rescale, width: routeFrame.width * rescale, height: routeFrame.height * rescale) let snapshot = canvas.route3DView.snapshot() snapshot.draw(in: scaledRouteFrame) let image = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() finish(finalImage: image) } else { finish(finalImage: baseImageInstaStory) } } } static func renderBackgroundAndOverlay(_ canvas: LayoutCanvas, completion: @escaping ((UIImage) -> Void)) { // Rescale the canvas 4x let rescale: CGFloat = 4 UIView.scaleView(canvas.view, scaleFactor: rescale) let frame = canvas.view.frame let layer = canvas.view.layer let viewsToHide: [UIView] = [canvas.stackView, canvas.goalProgressIndicator, canvas.goalProgressYearLabel, canvas.goalProgressDistanceLabel, canvas.locationActivityTypeView] let previousViewHiddenStates: [Bool] = viewsToHide.map { $0.isHidden } viewsToHide.forEach { view in view.isHidden = true } renderLayer(layer, frame: frame, rescale: rescale, opaque: true) { image in DispatchQueue.main.async { zip(viewsToHide, previousViewHiddenStates).forEach { view, hidden in view.isHidden = hidden } completion(image) } } } static func renderStats(_ canvas: LayoutCanvas, completion: @escaping ((UIImage) -> Void)) { // Rescale the canvas 4x let rescale: CGFloat = 4.0 UIView.scaleView(canvas.view, scaleFactor: rescale) let frame = canvas.view.frame let layer = canvas.view.layer let viewsToHide: [UIView] = [canvas.cutoutShapeView, canvas.goalProgressIndicator, canvas.goalProgressYearLabel, canvas.goalProgressDistanceLabel] let previousViewHiddenStates: [Bool] = viewsToHide.map { $0.isHidden } viewsToHide.forEach { view in view.isHidden = true } renderLayer(layer, frame: frame, rescale: rescale, opaque: false) { image in DispatchQueue.main.async { completion(image) zip(viewsToHide, previousViewHiddenStates).forEach { view, hidden in view.isHidden = hidden } } } } /// Renders base images (canvas aspect ratio) for Instagram story, post, and Twitter fileprivate static func makeBaseImage(canvas: LayoutCanvas, progress: @escaping ((Float) -> Void), completion: @escaping ((_ baseImageInstaStory: UIImage, _ baseImageInstaPost: UIImage, _ baseImageTwitter: UIImage) -> Void)) { if NSUbiquitousKeyValueStore.default.shouldShowAnyDistanceBranding { canvas.watermark.isHidden = false } canvas.cutoutShapeView.prepareForExport(true) let layoutIsFullscreen = canvas.cutoutShapeView.cutoutShape == .fullScreen if canvas.mediaType == .none || layoutIsFullscreen { // Hide the user image view so we can draw it later & extend // the image to the edges for Instagram posts. canvas.cutoutShapeView.isHidden = true } if layoutIsFullscreen { canvas.tintView.isHidden = true } // Rescale the canvas 4x let rescale: CGFloat = 4.0 UIView.scaleView(canvas.view, scaleFactor: rescale) let frame = canvas.view.frame let layer = canvas.view.layer let prevWatermark = canvas.watermark.image // Render Instagram story base image renderLayer(layer, frame: frame, rescale: rescale, opaque: false) { (baseImageInstaStory) in progress(0.33) // Render Instagram post base image renderLayer(layer, frame: frame, rescale: rescale, opaque: false) { (baseImageInstaPost) in progress(0.66) DispatchQueue.main.async { // Render Twitter post base image renderLayer(layer, frame: frame, rescale: rescale, opaque: false) { (baseImageTwitter) in progress(0.99) DispatchQueue.main.async { canvas.watermark.image = prevWatermark canvas.cutoutShapeView.prepareForExport(false) canvas.cutoutShapeView.addMediaButtonImage.isHidden = canvas.mediaType == .none canvas.cutoutShapeView.isHidden = false canvas.tintView.isHidden = false canvas.watermark.isHidden = true } completion(baseImageInstaStory, baseImageInstaPost, baseImageTwitter) } } } } } internal static func renderLayer(_ layer: CALayer, frame: CGRect, rescale: CGFloat, opaque: Bool = true, completion: @escaping ((_ image: UIImage) -> Void)) { DispatchQueue.global(qos: .userInitiated).async { let bigSize = CGSize(width: frame.size.width * rescale, height: frame.size.height * rescale) UIGraphicsBeginImageContextWithOptions(bigSize, opaque, 1) let context = UIGraphicsGetCurrentContext()! context.scaleBy(x: rescale, y: rescale) layer.render(in: context) let image = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() completion(image) } } fileprivate static func makeImage(withAspectRatio aspectRatio: CGFloat, palette: Palette = .dark, baseImage: UIImage, padTop: Bool = false, opaque: Bool = true, userImage: UIImage?, userImageFrameMultiplier: CGRect, layoutIsFullscreen: Bool) -> UIImage { let maxDimension = max(baseImage.size.width, baseImage.size.height) let topPadding = padTop ? ((baseImage.size.width * (1 / aspectRatio)) - baseImage.size.height) / 2 : 0 let size = CGSize(width: (maxDimension + topPadding) * aspectRatio, height: maxDimension + topPadding) UIGraphicsBeginImageContextWithOptions(size, opaque, 1) let context = UIGraphicsGetCurrentContext()! if opaque { context.setFillColor(palette.backgroundColor.cgColor) context.fill(CGRect(origin: .zero, size: size)) } if layoutIsFullscreen { if let backgroundUserImage = userImage { let xOffset: CGFloat = (size.width - baseImage.size.width) / 2 let userImageFrame: CGRect = CGRect(x: userImageFrameMultiplier.origin.x * baseImage.size.width + xOffset, y: userImageFrameMultiplier.origin.y * baseImage.size.height + topPadding, width: userImageFrameMultiplier.size.width * baseImage.size.width, height: userImageFrameMultiplier.size.height * baseImage.size.height) let aspectFilledUserImageFrame = CGSize.aspectFill(aspectRatio: CGSize(width: backgroundUserImage.size.width, height: backgroundUserImage.size.height), minimumSize: size) if aspectFilledUserImageFrame.size.width > userImageFrame.size.width && aspectFilledUserImageFrame.size.height > userImageFrame.size.height { backgroundUserImage.draw(in: aspectFilledUserImageFrame) } else { backgroundUserImage.draw(in: userImageFrame) } let topGradient = UIImage(named: "layout_top_gradient") topGradient?.draw(in: CGRect(x: 0, y: 0, width: size.width, height: size.height * 0.3), blendMode: .normal, alpha: 0.4) let bottomGradient = UIImage(named: "layout_gradient") bottomGradient?.draw(in: CGRect(x: 0, y: size.height * 0.5, width: size.width, height: size.height * 0.5), blendMode: .normal, alpha: 0.5) if !palette.backgroundColor.isReallyDark { palette.backgroundColor.withAlphaComponent(0.3).setFill() context.fill(CGRect(origin: .zero, size: size)) } } } let baseImageRect = CGRect(x: (size.width / 2) - baseImage.size.width / 2, y: topPadding + (size.height / 2) - baseImage.size.height / 2, width: baseImage.size.width, height: baseImage.size.height) baseImage.draw(in: baseImageRect) let finalImage = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() return finalImage } }

import SwiftUI import UIKit public enum VariableBlurDirection { case blurredTopClearBottom case blurredBottomClearTop } public struct VariableBlurView: UIViewRepresentable { public var maxBlurRadius: CGFloat = 2 public var direction: VariableBlurDirection = .blurredTopClearBottom public var startOffset: CGFloat = 0 public func makeUIView(context: Context) -> VariableBlurUIView { VariableBlurUIView(maxBlurRadius: maxBlurRadius, direction: direction, startOffset: startOffset) } public func updateUIView(_ uiView: VariableBlurUIView, context: Context) {} } open class VariableBlurUIView: UIVisualEffectView { public init(maxBlurRadius: CGFloat = 20, direction: VariableBlurDirection = .blurredTopClearBottom, startOffset: CGFloat = 0) { super.init(effect: UIBlurEffect(style: .regular)) // Same but no need for `CAFilter.h`. let CAFilter = NSClassFromString("CAFilter")! as! NSObject.Type let variableBlur = CAFilter.self.perform(NSSelectorFromString("filterWithType:"), with: "variableBlur").takeUnretainedValue() as! NSObject // The blur radius at each pixel depends on the alpha value of the corresponding pixel in the gradient mask. // An alpha of 1 results in the max blur radius, while an alpha of 0 is completely unblurred. let gradientImage = direction == .blurredTopClearBottom ? UIImage(named: "layout_top_gradient")?.cgImage : UIImage(named: "layout_gradient")?.cgImage variableBlur.setValue(maxBlurRadius, forKey: "inputRadius") variableBlur.setValue(gradientImage, forKey: "inputMaskImage") variableBlur.setValue(true, forKey: "inputNormalizeEdges") // We use a `UIVisualEffectView` here purely to get access to its `CABackdropLayer`, // which is able to apply various, real-time CAFilters onto the views underneath. let backdropLayer = subviews.first?.layer // Replace the standard filters (i.e. `gaussianBlur`, `colorSaturate`, etc.) with only the variableBlur. backdropLayer?.filters = [variableBlur] // Get rid of the visual effect view's dimming/tint view, so we don't see a hard line. for subview in subviews.dropFirst() { subview.alpha = 0 } } override open func layoutSubviews() { subviews.first?.layer.frame = self.bounds } required public init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") } deinit { subviews.first?.layer.filters = nil } open override func didMoveToWindow() { // fixes visible pixelization at unblurred edge (https://github.com/nikstar/VariableBlur/issues/1) guard let window, let backdropLayer = subviews.first?.layer else { return } backdropLayer.setValue(window.screen.scale, forKey: "scale") } open override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {} } fileprivate struct TopGradient: View { @Binding var scrollViewOffset: CGFloat var body: some View { VStack(spacing: 0) { Color.black .frame(height: 80.0) Image("gradient_bottom_ease_in_out") .resizable(resizingMode: .stretch) .scaleEffect(y: -1) .frame(width: UIScreen.main.bounds.width, height: 60.0) .overlay { VariableBlurView() .offset(y: -10.0) } Spacer() } .opacity((1.0 - (scrollViewOffset / 50.0)).clamped(to: 0...1)) .ignoresSafeArea() } } fileprivate struct TitleView: View { @Binding var scrollViewOffset: CGFloat var body: some View { VStack(alignment: .leading) { Spacer() .frame(height: 45.0) let p = (scrollViewOffset / -80.0) HStack { Text("Any Distance") .font(Font(UIFont.systemFont(ofSize: 23.0, weight: .bold, width: .expanded))) .foregroundStyle(Color(white: 0.6)) .scaleEffect((0.6 + ((1.0 - p) * 0.4)).clamped(to: 0.6...1.0), anchor: .leading) .offset(y: scrollViewOffset < 0 ? 0 : (0.3 * scrollViewOffset)) .offset(y: (-22.0 * p).clamped(to: -22.0...0.0)) Spacer() } .overlay { HStack { Spacer() Button { // } label: { Image(systemName: "gear") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 24.0, height: 24.0) .foregroundStyle(Color.white) .padding() .contentShape(Rectangle()) .opacity((1.0 - (scrollViewOffset / -70)).clamped(to: 0...1) * 0.6) .blur(radius: (10 * scrollViewOffset / -70).clamped(to: 0...10)) } .offset(x: 16.0) .offset(y: scrollViewOffset < 0 ? 0 : (0.3 * scrollViewOffset)) } } } .padding(.top, -22.5) .padding([.leading, .trailing], 20.0) } } struct HeaderView: View { @Binding var scrollViewOffset: CGFloat var body: some View { ZStack { TopGradient(scrollViewOffset: $scrollViewOffset) VStack { TitleView(scrollViewOffset: $scrollViewOffset) Spacer() } } } } struct ReadableScrollView<Content: View>: View { struct CGFloatPreferenceKey: PreferenceKey { static var defaultValue: CGFloat { 0.0 } static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {} } struct CGSizePreferenceKey: PreferenceKey { static var defaultValue: CGSize { .zero } static func reduce(value: inout CGSize, nextValue: () -> CGSize) {} } @Binding var offset: CGFloat @Binding var contentSize: CGSize var presentedInSheet: Bool = false var showsIndicators: Bool = true var content: Content init(offset: Binding<CGFloat>, contentSize: Binding<CGSize>? = nil, presentedInSheet: Bool = false, showsIndicators: Bool = true, @ViewBuilder contentBuilder: () -> Content) { self._offset = offset self._contentSize = contentSize ?? .constant(.zero) self.presentedInSheet = presentedInSheet self.showsIndicators = showsIndicators self.content = contentBuilder() } var scrollReader: some View { GeometryReader { geometry in Color.clear .preference(key: CGFloatPreferenceKey.self, value: geometry.frame(in: .named("scroll")).minY) .preference(key: CGSizePreferenceKey.self, value: geometry.size) } } var body: some View { ScrollView(showsIndicators: showsIndicators) { VStack { content } .background(scrollReader.ignoresSafeArea()) .onPreferenceChange(CGFloatPreferenceKey.self) { value in self.offset = value - (presentedInSheet ? 10.0 : 0.0) } .onPreferenceChange(CGSizePreferenceKey.self) { value in self.contentSize = value } } } } struct HeaderDemoView: View { @State var scrollViewOffset: CGFloat = 0.0 var body: some View { ZStack { ReadableScrollView(offset: $scrollViewOffset) { VStack { ForEach(1..<20) { _ in RoundedRectangle(cornerRadius: 10.0) .foregroundStyle(Color(white: 0.8)) .frame(height: 60.0) } } .padding(.top, 100.0) .padding(.horizontal, 20.0) } HeaderView(scrollViewOffset: $scrollViewOffset) } .background(Color.black) } } #Preview { HeaderDemoView() }

import SwiftUI struct RefreshableScrollView<Content: View>: View { @Binding var offset: CGFloat @Binding var isRefreshing: Bool var presentedInSheet: Bool = false var content: Content @State private var refreshControlVisible: Bool = false private let feedbackGenerator = UIImpactFeedbackGenerator(style: .medium) private let refreshOffset: CGFloat = 150.0 init(offset: Binding<CGFloat>, isRefreshing: Binding<Bool>, presentedInSheet: Bool = false, @ViewBuilder contentBuilder: () -> Content) { self._offset = offset self._isRefreshing = isRefreshing self.presentedInSheet = presentedInSheet self.content = contentBuilder() } var scrollReader: some View { GeometryReader { geometry in Color.clear .preference(key: CGFloatPreferenceKey.self, value: geometry.frame(in: .named("scroll")).minY) } } var body: some View { ScrollView(showsIndicators: false) { LazyVStack { content } .if(!presentedInSheet) { view in view .overlay { VStack { ZStack { ProgressView() .opacity(isRefreshing ? 1.0 : 0.0) .offset(y: -12.0) Text("PULL TO REFRESH") .font(.system(size: 11, weight: .medium, design: .monospaced)) .foregroundColor(.white) .opacity((offset / refreshOffset).clamped(to: 0...1) * 0.6) .opacity(isRefreshing ? 0.0 : 1.0) .offset(y: -6.0) } .offset(y: -0.9 * offset) .animation(.spring(response: 0.3, dampingFraction: 0.6), value: isRefreshing) Spacer() } } } .offset(y: isRefreshing ? 30.0 : 0.0) .animation(.spring(response: 0.5, dampingFraction: 0.6), value: isRefreshing) .background(scrollReader.ignoresSafeArea()) .onPreferenceChange(CGFloatPreferenceKey.self) { value in guard let window = UIApplication.shared.windows.first else { self.offset = value return } self.offset = value - window.safeAreaInsets.top - (presentedInSheet ? 10.0 : 0.0) if offset >= refreshOffset && !isRefreshing && !presentedInSheet { isRefreshing = true feedbackGenerator.impactOccurred() } } } .introspectScrollView { scrollView in scrollView.delaysContentTouches = false } } }

import SwiftUI fileprivate struct GradientAnimation: View { @Binding var animate: Bool @Binding var pageIdx: Int private var firstPageColors: [Color] { return [Color(hexadecimal: "#F98425"), Color(hexadecimal: "#E82840"), Color(hexadecimal: "#4A0D21"), Color(hexadecimal: "#B12040"), Color(hexadecimal: "#F4523B")] } private var secondPageColors: [Color] { return [Color(hexadecimal: "#B7F6FE"), Color(hexadecimal: "#32A0FB"), Color(hexadecimal: "#034EE7"), Color(hexadecimal: "#0131A1"), Color(hexadecimal: "#030C2F")] } private var thirdPageColors: [Color] { return [Color(hexadecimal: "#66E7FF"), Color(hexadecimal: "#04CFD5"), Color(hexadecimal: "#00A077"), Color(hexadecimal: "#00Af8B"), Color(hexadecimal: "#02251B")] } private func rand18(_ idx: Int) -> [Float] { let idxf = Float(idx) return [sin(idxf * 6.3), cos(idxf * 1.3 + 48), sin(idxf + 31.2), cos(idxf * 44.1), sin(idxf * 3333.2), cos(idxf + 1.12 * pow(idxf, 3)), sin(idxf * 22), cos(idxf * 34)] } func gradient(withColors colors: [Color], seed: Int = 0) -> some View { return ZStack { let maxXOffset = Float(UIScreen.main.bounds.width) / 2 let maxYOffset = Float(UIScreen.main.bounds.height) / 2 ForEach(Array(0...9), id: \.self) { idx in let rands = rand18(idx + seed) let fill = colors[idx % colors.count] Ellipse() .fill(fill) .frame(width: CGFloat(rands[1] + 2) * 250, height: CGFloat(rands[2] + 2) * 250) .blur(radius: 45 * 1 + CGFloat(rands[1] + rands[2]) / 2) .opacity(1) .offset(x: CGFloat(animate ? rands[3] * maxXOffset : rands[4] * maxXOffset), y: CGFloat(animate ? rands[5] * maxYOffset : rands[6] * maxYOffset)) .animation(.easeInOut(duration: TimeInterval(rands[7] + 3) * 2.5).repeatForever(autoreverses: true), value: animate) } } .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height+100) .drawingGroup() } var body: some View { ZStack { gradient(withColors: firstPageColors, seed: 5) .opacity(pageIdx == 0 ? 1 : 0) .animation(.easeInOut(duration: 1.5), value: pageIdx) gradient(withColors: secondPageColors, seed: 5) .opacity(pageIdx == 1 ? 1 : 0) .animation(.easeInOut(duration: 1.5), value: pageIdx) gradient(withColors: thirdPageColors, seed: 6) .opacity(pageIdx == 2 ? 1 : 0) .animation(.easeInOut(duration: 1.5), value: pageIdx) Image("noise") .resizable(resizingMode: .tile) .scaleEffect(0.25) .ignoresSafeArea() .luminanceToAlpha() .frame(width: UIScreen.main.bounds.width * 4, height: UIScreen.main.bounds.height * 5) .opacity(0.15) } .onAppear { animate = true } } } fileprivate struct InfiniteScroller<Content: View>: View { var contentWidth: CGFloat var reversed: Bool = true var content: (() -> Content) @State var xOffset: CGFloat = 0 var body: some View { ScrollView(.horizontal, showsIndicators: false) { HStack(spacing: 0) { content() content() } .offset(x: xOffset, y: 0) } .disabled(true) .onAppear { if reversed { xOffset = -1 * contentWidth } withAnimation(.linear(duration: 20).repeatForever(autoreverses: false)) { if reversed { xOffset = 0 } else { xOffset = -contentWidth } } } } } fileprivate struct AppIcons: View { let iconWidth: CGFloat = 61 let iconSpacing: CGFloat = 16 var firstRow: some View { HStack(spacing: iconSpacing) { Image("icon_fitness") .frame(width: iconWidth, height: iconWidth) Image("icon_strava") .frame(width: iconWidth, height: iconWidth) Image("icon_garmin") .frame(width: iconWidth, height: iconWidth) Image("icon_nrc") .frame(width: iconWidth, height: iconWidth) Image("icon_peloton") .frame(width: iconWidth, height: iconWidth) Image("icon_runkeeper") .frame(width: iconWidth, height: iconWidth) Image("icon_wahoo") .frame(width: iconWidth, height: iconWidth) Image("icon_fitbod") .frame(width: iconWidth, height: iconWidth) Image("icon_ot") .frame(width: iconWidth, height: iconWidth) Rectangle() .frame(width: 0) } } var secondRow: some View { HStack(spacing: iconSpacing) { Image("icon_strava") .frame(width: iconWidth, height: iconWidth) Image("icon_fitbod") .frame(width: iconWidth, height: iconWidth) Image("icon_garmin") .frame(width: iconWidth, height: iconWidth) Image("icon_runkeeper") .frame(width: iconWidth, height: iconWidth) Image("icon_nrc") .frame(width: iconWidth, height: iconWidth) Image("icon_future") .frame(width: iconWidth, height: iconWidth) Image("icon_fitness") .frame(width: iconWidth, height: iconWidth) Image("icon_peloton") .frame(width: iconWidth, height: iconWidth) Image("icon_wahoo") .frame(width: iconWidth, height: iconWidth) Rectangle() .frame(width: 0) } } var thirdRow: some View { HStack(spacing: iconSpacing) { Image("icon_future") .frame(width: iconWidth, height: iconWidth) Image("icon_peloton") .frame(width: iconWidth, height: iconWidth) Image("icon_fitbod") .frame(width: iconWidth, height: iconWidth) Image("icon_garmin") .frame(width: iconWidth, height: iconWidth) Image("icon_nrc") .frame(width: iconWidth, height: iconWidth) Image("icon_runkeeper") .frame(width: iconWidth, height: iconWidth) Image("icon_ot") .frame(width: iconWidth, height: iconWidth) Image("icon_fitness") .frame(width: iconWidth, height: iconWidth) Image("icon_strava") .frame(width: iconWidth, height: iconWidth) Rectangle() .frame(width: 0) } } var body: some View { VStack { InfiniteScroller(contentWidth: iconWidth * 10 + iconSpacing * 10, reversed: true) { firstRow } .frame(height: iconWidth) InfiniteScroller(contentWidth: iconWidth * 10 + iconSpacing * 10, reversed: false) { secondRow } .frame(height: iconWidth) InfiniteScroller(contentWidth: iconWidth * 10 + iconSpacing * 10, reversed: true) { thirdRow } .frame(height: iconWidth) InfiniteScroller(contentWidth: iconWidth * 10 + iconSpacing * 10, reversed: false) { firstRow } .frame(height: iconWidth) } .mask { LinearGradient(colors: [.clear, .black, .black, .black, .black, .black, .clear], startPoint: .leading, endPoint: .trailing) } } } fileprivate var screenshotSize: CGSize { let aspect: CGFloat = 2.052 let verticalSafeArea = (UIApplication.shared.topWindow?.safeAreaInsets.top ?? 0) + (UIApplication.shared.topWindow?.safeAreaInsets.bottom ?? 0) let height = (UIScreen.main.bounds.height - verticalSafeArea) * 0.435 return CGSize(width: height / aspect, height: height) } fileprivate struct Carousel: View { @Binding var pageIdx: Int @Binding var dragging: Bool @State var offset: CGFloat = 0 @State private var startOffset: CGFloat? fileprivate struct CarouselItem: View { var body: some View { RoundedRectangle(cornerRadius: 16, style: .continuous) .frame(width: screenshotSize.width, height: screenshotSize.height) .foregroundColor(Color.black.opacity(0.5)) } } var item: some View { GeometryReader { geo in CarouselItem() .scaleEffect((1 - ((geo.frame(in: .global).minX) / UIScreen.main.bounds.width * 0.3)).clamped(to: 0...1)) .offset(x: pow(geo.frame(in: .global).minX / UIScreen.main.bounds.width, 2) * -60) } .frame(width: screenshotSize.width, height: screenshotSize.height) } func item(forScreen screen: Int) -> some View { GeometryReader { geo in ZStack { switch screen { case 1: Image("onboarding-screen-1") .resizable() .aspectRatio(contentMode: .fill) case 2: LoopingVideoView(videoUrl: Bundle.main.url(forResource: "onboarding-screen-2", withExtension: "mp4")!, videoGravity: .resizeAspectFill) EmptyView() case 3: Image("onboarding-screen-3") .resizable() .aspectRatio(contentMode: .fill) case 4: LoopingVideoView(videoUrl: Bundle.main.url(forResource: "onboarding-screen-4", withExtension: "mp4")!, videoGravity: .resizeAspectFill) EmptyView() case 5: Image("onboarding-screen-5") .resizable() .aspectRatio(contentMode: .fill) case 6: Image("onboarding-screen-6") .resizable() .aspectRatio(contentMode: .fill) default: EmptyView() } } .frame(width: screenshotSize.width, height: screenshotSize.height) .cornerRadius(12, style: .continuous) .scaleEffect((1 - ((geo.frame(in: .global).minX) / UIScreen.main.bounds.width * 0.3)).clamped(to: 0...1)) .offset(x: pow(geo.frame(in: .global).minX / UIScreen.main.bounds.width, 2) * -60) } .frame(width: screenshotSize.width, height: screenshotSize.height) } var contentWidth: CGFloat { return (screenshotSize.width * 6) + UIScreen.main.bounds.width + (16 * 7) } var secondPageOffset: CGFloat { return (screenshotSize.width * 3) + (16 * 3) } var thirdPageOffset: CGFloat { return (screenshotSize.width * 6) + (16 * 6) } var body: some View { HStack(spacing: 16) { item(forScreen: 1) item(forScreen: 2) item(forScreen: 3) item(forScreen: 4) item(forScreen: 5) item(forScreen: 6) AppIcons() .frame(width: UIScreen.main.bounds.width) } .id(0) .frame(height: screenshotSize.height) .offset(x: (contentWidth / 2) - (UIScreen.main.bounds.width / 2) - offset) .onChange(of: pageIdx) { newValue in print(newValue) withAnimation(smoothCurveAnimation) { switch newValue { case 0: offset = 0 case 1: offset = secondPageOffset default: offset = thirdPageOffset } } } .gesture( DragGesture() .onChanged { gesture in if startOffset == nil { startOffset = offset } let gestureOffset = gesture.location.x - gesture.startLocation.x offset = startOffset! - gestureOffset dragging = true } .onEnded { gesture in let finalOffset = startOffset! - (gesture.predictedEndLocation.x - gesture.startLocation.x) let closestOffset = [0, secondPageOffset, thirdPageOffset].min(by: { abs($0 - finalOffset) < abs($1 - finalOffset) })! let closestPage = [0, secondPageOffset, thirdPageOffset].firstIndex(of: closestOffset)!.clamped(to: (pageIdx-1)...(pageIdx+1)) let clampedClosestOffset = [0, secondPageOffset, thirdPageOffset][closestPage] pageIdx = closestPage withAnimation(.interactiveSpring(response: 0.6)) { offset = clampedClosestOffset } startOffset = nil dragging = false } ) } } struct Onboarding2022View: View { @State private var animate: Bool = false @State private var pageIdx: Int = 0 @State private var pageTimer: Timer? @State private var dragging: Bool = false private func setupPageTimer() { pageTimer = Timer.scheduledTimer(withTimeInterval: 4.0, repeats: true) { _ in pageIdx = (pageIdx + 1) % 3 } } private func signInAction() {} private func getStartedAction() { let syncVC = UIStoryboard(name: "Onboarding", bundle: nil).instantiateViewController(withIdentifier: "sync") UIApplication.shared.topViewController?.present(syncVC, animated: true) } private func headlineText(forPageIdx pageIdx: Int) -> AttributedString { let string = ["**Privacy-driven**\nActivity Tracking and\n**safety-first** sharing.", "Track your goals &\nearn **motivational\nCollectibles.**", "**Easily Connect** the\nactive life apps\n**you already use.**"][pageIdx % 3] return try! AttributedString(markdown: string, options: .init(interpretedSyntax: .inlineOnlyPreservingWhitespace)) } private func subtitleText(forPageIdx pageIdx: Int) -> String { return ["No leaderboards. No comparison.\nAny Distance Counts.", "Celebrate your active lifestyle.", "Connect with Garmin, Wahoo,\nand Apple Health."][pageIdx % 3] } struct BlurModifier: ViewModifier { var radius: CGFloat func body(content: Content) -> some View { content.blur(radius: radius) } } var body: some View { ZStack { GradientAnimation(animate: $animate, pageIdx: $pageIdx) .frame(width: 20, height: 20) VStack(alignment: .leading) { HStack { Image("wordmark") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 130) Spacer() Button(action: signInAction) { Text("Sign In") .font(.system(size: 17, weight: .medium)) .foregroundColor(.white) } } Spacer() HStack { if #available(iOS 16.0, *) { Text(headlineText(forPageIdx: pageIdx)) .font(.system(size: UIScreen.main.bounds.height * 0.041, weight: .regular)) .lineSpacing(0) .tracking(-1) .padding(.bottom, 1) } else { Text(headlineText(forPageIdx: pageIdx)) .font(.system(size: UIScreen.main.bounds.height * 0.041, weight: .semibold)) .lineSpacing(0) } } .transition(.modifier(active: BlurModifier(radius: 8), identity: BlurModifier(radius: 0)) .combined(with: .opacity) .combined(with: .scale(scale: 0.9)) .animation(smoothCurveAnimation)) .id(pageIdx) Text(subtitleText(forPageIdx: pageIdx)) .font(.system(size: (UIScreen.main.bounds.height * 0.02).clamped(to: 0...14), weight: .semibold, design: .monospaced)) .foregroundColor(.white) .opacity(0.7) .transition(.modifier(active: BlurModifier(radius: 8), identity: BlurModifier(radius: 0)) .combined(with: .opacity) .combined(with: .scale(scale: 0.9)) .animation(smoothCurveAnimation)) .id(pageIdx) Carousel(pageIdx: $pageIdx, dragging: $dragging) .frame(width: UIScreen.main.bounds.width - 40) .padding([.top, .bottom], 16) Button(action: getStartedAction) { ZStack { RoundedRectangle(cornerRadius: 10, style: .continuous) .fill(Color.white) Text("Get Started") .font(.system(size: 17, weight: .semibold)) .foregroundColor(.black) } .frame(height: 55) } Text("No sign-up required unless you want to\nstore your goals and Collectibles.") .font(.system(size: 14, weight: .regular)) .multilineTextAlignment(.center) .foregroundColor(.white) .frame(maxWidth: .infinity) .frame(height: 50) .opacity(0.7) } .padding([.leading, .trailing], 20) } .onAppear { animate = true setupPageTimer() } .onChange(of: dragging) { newValue in if newValue == true { pageTimer?.invalidate() } else { setupPageTimer() } } } } struct Onboarding2022View_Previews: PreviewProvider { static var previews: some View { Onboarding2022View() } }

import SwiftUI import SwiftUIX fileprivate struct ProgressLine: Shape { var data: [Float] var dataMaxValue: Float var totalCount: Int func path(in rect: CGRect) -> Path { guard !data.isEmpty else { return Path() } let max = dataMaxValue * 1.1 var path = Path() let points = data.enumerated().map { (i, datum) in let x = (rect.width * CGFloat(i) / CGFloat(totalCount-1)).clamped(to: 4.0...(rect.width-4.0)) let y = (rect.height - (rect.height * CGFloat(datum / max))).clamped(to: 4.0...(rect.height-4.0)) return CGPoint(x: x, y: y) } path.move(to: points[0]) var p1 = points[0] var p2 = CGPoint.zero for i in 0..<(points.count-1) { p2 = points[i+1] let midPoint = CGPoint(x: (p1.x + p2.x)/2.0, y: (p1.y + p2.y)/2.0) path.addQuadCurve(to: midPoint, control: p1) p1 = p2 } path.addLine(to: points.last!) return path } } struct ProgressLineGraph: View { var data: [Float] var dataMaxValue: Float var fullDataCount: Int var strokeStyle: StrokeStyle var color: Color var showVerticalLine: Bool var showDot: Bool var animateProgress: Bool @Binding var dataSwipeIdx: Int @State private var lineAnimationProgress: Float = 1.0 @State private var dotOpacity: Double = 0.0 var body: some View { ZStack { color .maxWidth(.infinity) .mask { ProgressLine(data: data, dataMaxValue: dataMaxValue, totalCount: fullDataCount) .stroke(style: strokeStyle) } .mask { GeometryReader { geo in HStack(spacing: 0.0) { let width = (geo.size.width * (CGFloat(data.count-1) / CGFloat(fullDataCount-1)) * CGFloat(lineAnimationProgress)).clamped(to: 4.0...(geo.size.width-4.0)) Rectangle() .frame(width: width) Spacer() .frame(minWidth: 0.0) } } } .if(showVerticalLine && data.count > 1) { view in view .background { GeometryReader { geo in HStack(spacing: 0.0) { let width: CGFloat = { if dataSwipeIdx != -1 { return (geo.size.width * (CGFloat(dataSwipeIdx) / CGFloat(fullDataCount-1))).clamped(to: 4.0...(geo.size.width-4.0)) } else { return (geo.size.width * (CGFloat(data.count-1) / CGFloat(fullDataCount-1)) * CGFloat(lineAnimationProgress)).clamped(to: 4.0...(geo.size.width-4.0)) } }() Spacer() .frame(width: width) ZStack { Color.black Rectangle() .foregroundColor(color) .opacity(0.4) } .frame(width: 2.0) .cornerRadius(2.0) Spacer() .frame(minWidth: 0.0) } .offset(x: -1.5) .animation(dataSwipeIdx == -1 ? .timingCurve(0.42, 0.27, 0.34, 0.96, duration: 0.2) : .none, value: dataSwipeIdx) } } } .if(showDot) { view in view .overlay { GeometryReader { geo in let x = (geo.size.width * CGFloat(data.count-1) / CGFloat(fullDataCount-1)).clamped(to: 4.0...(geo.size.width-4.0)) let y = (geo.size.height - (geo.size.height * CGFloat((data.last ?? 0.0) / (dataMaxValue * 1.1)))).clamped(to: 4.0...(geo.size.height-4.0)) ZStack { TimelineView(.animation) { timeline in Canvas { context, size in let duration: CGFloat = 1.4 let time = timeline.date.timeIntervalSince1970.truncatingRemainder(dividingBy: duration) / duration let diameter = 12.0 + (20.0 * time) let rect = CGRect(x: 21.0 - (diameter / 2), y: 21.0 - (diameter / 2), width: diameter, height: diameter) let shape = Circle().path(in: rect) let color = color.opacity(1.0 - time) context.fill(shape, with: .color(color)) } } .frame(width: 42.0, height: 42.0) Circle() .fill(color) .width(12.0) .shadow(color: .black.opacity(0.1), radius: 2, x: 0, y: 0) } .scaleEffect(x: dotOpacity, y: dotOpacity) .position(x: x, y: y) .opacity(dotOpacity) } } } .opacity(Double(lineAnimationProgress)) .onAppear { if !animateProgress { lineAnimationProgress = 1.0 dotOpacity = 1.0 return } lineAnimationProgress = 0.0 let duration = (0.3 + ((CGFloat(data.count-1) / CGFloat(fullDataCount-1)) * 0.9)).clamped(to: 0.0...0.9) withAnimation(.timingCurve(0.42, 0.27, 0.34, 0.96, duration: duration)) { lineAnimationProgress = 1.0 } DispatchQueue.main.asyncAfter(deadline: .now() + duration - 0.13) { withAnimation(.easeInOut(duration: 0.5)) { self.dotOpacity = 1.0 } } } } } } struct ProgressLineGraphXLabels: View { var labelStrings: [(idx: Int, string: String)] = [] var fullDataCount: Int var lrPadding: CGFloat var body: some View { Color.clear .overlay { GeometryReader { geo in ZStack(alignment: .leading) { ForEach(labelStrings, id: \.idx) { (idx, string) in let xPos: CGFloat = (lrPadding + ((geo.size.width - (lrPadding * 2.0)) * CGFloat(idx) / CGFloat(fullDataCount - 1))).clamped(to: (lrPadding+4.0)...(geo.size.width-lrPadding-4.0)) HStack { Text(string) .font(.system(size: 12.0, weight: .medium, design: .monospaced)) .foregroundColor(.white) .multilineTextAlignment(.center) .opacity(0.6) .frame(width: 50.0) .offset(x: xPos - 25.0) Spacer() } } } } } } } struct ProgressLineGraphSwipeOverlay: View { var field: PartialKeyPath<Activity> var data: [Float] var prevPeriodData: [Float] var dataFormat: (Float) -> String var startDate: Date var endDate: Date var prevPeriodStartDate: Date var prevPeriodEndDate: Date var alternatePrevPeriodLabel: String? @Binding var dataSwipeIdx: Int @Binding var showingOverlay: Bool @State private var dragLocation: CGPoint = .zero @State private var touchingDown: Bool = false @State private var longPressTimer: Timer? private let longPressDuration: TimeInterval = 0.1 private let feedbackGenerator = UIImpactFeedbackGenerator(style: .light) var percentChangeLabel: some View { ZStack { let percent = ((data[dataSwipeIdx.clamped(to: 0...(data.count-1))] / (prevPeriodData[dataSwipeIdx.clamped(to: 0...(prevPeriodData.count-1))]) .clamped(to: 0.01...Float.greatestFiniteMagnitude)) - 1.0) .clamped(to: -10.0...100.0) let glyphName: SFSymbolName = { switch abs(percent) { case 0.0: return .minusCircleFill default: return percent > 0.0 ? .arrowUpRightCircleFill : .arrowDownRightCircleFill } }() let percentString: String = { switch abs(percent) { case 100.0: return "∞" case 0.0: return "0" default: return String(Int((abs(percent) * 100).rounded())) } }() let color = ActivityProgressGraphModel.color(for: percent, field: field) HStack(spacing: 3.0) { Image(systemName: glyphName) .font(.system(size: 12.0, weight: .medium)) HStack(spacing: 0.0) { if percentString == "∞" { Text(percentString) .font(.system(size: 12.0, weight: .medium)) } else { Text(percentString) .font(.system(size: 12.0, weight: .medium, design: .monospaced)) } Text("%") .font(.system(size: 12.0, weight: .medium, design: .monospaced)) } } .foregroundColor(color) } } var body: some View { Color.clear .overlay { GeometryReader { geo in VStack { Spacer() if showingOverlay { let overlayWidth: CGFloat = dataSwipeIdx >= data.count ? 110.0 : 155.0 let xOffset = (CGFloat(dataSwipeIdx) * (geo.size.width / CGFloat(max(data.count, prevPeriodData.count) - 1)) - (overlayWidth / 2.0)) .clamped(to: 0...(geo.size.width - overlayWidth)) HStack(spacing: 0.0) { VStack(alignment: .leading, spacing: 8.0) { if dataSwipeIdx < data.count { VStack(alignment: .leading, spacing: 1.0) { HStack { Text(dataFormat(data[dataSwipeIdx.clamped(to: 0...(data.count-1))])) .font(.system(size: 13.0, weight: .medium, design: .monospaced)) .lineLimit(1) .minimumScaleFactor(0.5) Spacer() percentChangeLabel } Text(Calendar.current.date(byAdding: .day, value: dataSwipeIdx, to: startDate)!.formatted(withFormat: "MMM d YYYY")) .font(.system(size: 10.0, design: .monospaced)) .opacity(0.5) } } VStack(alignment: .leading, spacing: 1.0) { let idx = dataSwipeIdx.clamped(to: 0...(prevPeriodData.count-1)) Text(dataFormat(prevPeriodData[idx])) .font(.system(size: 13.0, weight: .medium, design: .monospaced)) .lineLimit(1) .minimumScaleFactor(0.5) if let alternatePrevPeriodLabel = alternatePrevPeriodLabel { Text(alternatePrevPeriodLabel) .font(.system(size: 10.0, design: .monospaced)) .opacity(0.5) } else { Text(Calendar.current.date(byAdding: .day, value: idx, to: prevPeriodStartDate)!.formatted(withFormat: "MMM d YYYY")) .font(.system(size: 10.0, design: .monospaced)) .opacity(0.5) } } } if dataSwipeIdx >= data.count { Spacer() } } .padding(8.0) .frame(width: overlayWidth) .background { DarkBlurView() .cornerRadius(11.0) .brightness(0.1) } .modifier(BlurOpacityTransition(speed: 2.5, anchor: UnitPoint(x: (xOffset + (overlayWidth / 2.0)) / overlayWidth, y: -2.5))) .offset(x: xOffset, y: (-1.0 * geo.size.height) - 8.0) } } } } .overlay { TouchEventView { location, view in guard let location = location else { return } touchingDown = true longPressTimer?.invalidate() longPressTimer = Timer.scheduledTimer(withTimeInterval: longPressDuration, repeats: false) { _ in guard touchingDown else { return } longPressTimer?.invalidate() longPressTimer = nil view.findContainingScrollView()?.isScrollEnabled = false dataSwipeIdx = Int(location.x / (view.bounds.width / CGFloat(max(data.count, prevPeriodData.count)))) .clamped(to: 0...max(prevPeriodData.count-1, data.count-1)) showingOverlay = true dragLocation = location } } touchMoved: { location, view in guard let location = location, showingOverlay else { return } let prevIdx = dataSwipeIdx dataSwipeIdx = Int(location.x / (view.bounds.width / CGFloat(prevPeriodData.count))) .clamped(to: 0...max(prevPeriodData.count-1, data.count-1)) if dataSwipeIdx != prevIdx { feedbackGenerator.impactOccurred() } dragLocation = location } touchCancelled: { location, view in showingOverlay = false view.findContainingScrollView()?.isScrollEnabled = true touchingDown = false dataSwipeIdx = -1 } touchEnded: { location, view in showingOverlay = false view.findContainingScrollView()?.isScrollEnabled = true touchingDown = false dataSwipeIdx = -1 } } } }

import UIKit final class FlickeringImageView: UIImageView { // MARK: - Variables private var isLowered: Bool = false private var flickerCount: Int = 0 // MARK: - Constants private let NUM_FLICKERS: Int = 8 // MARK: - Setup override func awakeFromNib() { super.awakeFromNib() prepareForAnimation() } override func didMoveToSuperview() { super.didMoveToSuperview() startAnimation() } func prepareForAnimation() { alpha = 0.0 } func startAnimation() { self.startGlowing() self.continueFlickering() } func startFloating() { let yTranslation: CGFloat = isLowered ? -7 : 7 isLowered = !isLowered UIView.animate(withDuration: 2.0, delay: 0.0, options: [.curveEaseInOut, .beginFromCurrentState], animations: { self.transform = CGAffineTransform(translationX: 0.0, y: yTranslation) }, completion: { [weak self] (finished) in if finished { self?.startFloating() } }) } func flicker() { let newAlpha: CGFloat = (alpha < 1.0) ? 1.0 : 0.2 alpha = newAlpha flickerCount += 1 if alpha == 1.0 && flickerCount >= NUM_FLICKERS { continueFlickering() DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) { [weak self] in self?.startGlowing() } } else { let delay = TimeInterval.random(in: 0.05...0.07) - (0.03 * TimeInterval(flickerCount) / TimeInterval(NUM_FLICKERS)) DispatchQueue.main.asyncAfter(deadline: .now() + delay) { [weak self] in self?.flicker() } } } func continueFlickering() { let newAlpha: CGFloat = (alpha < 1.0) ? 1.0 : 0.2 alpha = newAlpha var delay: TimeInterval { if alpha < 1.0 { return TimeInterval.random(in: 0.01...0.03) } return TimeInterval.random(in: 0.03...0.4) } DispatchQueue.main.asyncAfter(deadline: .now() + delay) { [weak self] in self?.continueFlickering() } } func startGlowing(delay: TimeInterval = 0.0) { let duration = TimeInterval.random(in: 0.4...0.8) let newAlpha: CGFloat = (alpha < 1.0) ? 1.0 : 0.8 UIView.animate(withDuration: duration, delay: delay, options: [.curveEaseInOut, .beginFromCurrentState], animations: { self.alpha = newAlpha }) { [weak self] (finished) in if finished { self?.startGlowing() } } } }