Hello everyone, in my website I need to give users the ability to choose a color via input type=“color”. I don't understand why it works fine on desktop (even on Safari for Mac) but doesn't open the color picker on iPhone. How can I solve this? Thank you, Andrea

I found that there is such a click-to-expand horizontally and smoothly effect in the system application called "message", which is good. I wonder if I can add a similar effect to my own app. If possible, are there any implementation ideas or examples that I can refer to? Thanks!

Does anyone have any idea why withAnimation is buggy when you apply a clip shape to an image? I've attached a screenshot of what happens below. Sometimes when hovering, it looks like the item gets drawn at the wrong location for a frame or two and then is placed back into position and the animation starts. It doesn't happen when the hover state ends, only the very initial hover event. This also doesn't happen without the .clipShape. I've also tried using .mask, but the same issue occurs. Has anyone ran into this?

Hi Friends! I’m facing an issue with SceneKit. I’m developing a 3D mobile game. I have a character 3D model and several skeletal animations CAAnimation. I import both the model and the animations from Maya in *.dae format. The character’s animations play continuously one after the other, with each new animation being triggered randomly. The transition between animations makes smoothly by setting the fadeInDuration and fadeOutDuration properties. Here’s an example of the code: import UIKit import QuartzCore import SceneKit class TestAnimationController: UIViewController { var bodyNode: SCNNode? override func viewDidLoad() { super.viewDidLoad() let scnView = SCNView(frame: self.view.bounds) scnView.backgroundColor = .black // Set your desired background color scnView.autoresizingMask = [.flexibleWidth, .flexibleHeight] let scene = SCNScene(named: "art.scnassets/scene/Base_room/ROOM5.scn")! bodyNode = collada2SCNNode(filepath: "art.scnassets/female/girl_body_races.dae")! bodyNode?.renderingOrder = 10 scene.rootNode.addChildNode(bodyNode!) playIdleAnimation() scnView.scene = scene // Assign the scene to the SCNView self.view.addSubview(scnView) // Add the SCNView to your main view) } func collada2SCNNode(filepath:String) -> SCNNode? { if let scene = SCNScene(named: filepath) { let node = scene.rootNode.childNodes[0] return node } else { return nil } } func playIdleAnimation() { let array = [ "art.scnassets/female/animations/idle/girl_idle_4.dae", "art.scnassets/female/animations/idle/girl_idle1.dae", "art.scnassets/female/animations/idle/girl_idle2.dae", "art.scnassets/female/animations/idle/Girl_idle3.dae", ] let animation = CAAnimation.animationWithSceneNamed(array.randomElement() ?? "")! self.setAnimationAdd( fadeInDuration: 1.0, fadeOutDuration: 1.0, keyTime: 0.99, animation, isLooped: false ) { [weak self] in guard let self = self else { return } try? self.playBoringAnimations() } } func playBoringAnimations() { let array = [ "art.scnassets/female/animations/boring/girl_boring1.dae", "art.scnassets/female/animations/boring/girl_boring2.dae", "art.scnassets/female/animations/boring/girl_boring3.dae", "art.scnassets/female/animations/boring/girl_boring4.dae", "art.scnassets/female/animations/boring/girl_boring5.dae", "art.scnassets/female/animations/boring/girl_boring6.dae", "art.scnassets/female/animations/boring/girl_boring8.dae" ] let animation = CAAnimation.animationWithSceneNamed(array.randomElement() ?? "")! self.setAnimationAdd( fadeInDuration: 1.0, fadeOutDuration: 1.0, keyTime: 0.99, animation, isLooped: false ) { [weak self] in guard let self = self else { return } try? self.playIdleAnimation() } } func setAnimationAdd(fadeInDuration : CGFloat, fadeOutDuration : CGFloat, keyTime : CGFloat, _ animation: CAAnimation, isLooped: Bool, completion: (() -> Void)?) { animation.fadeInDuration = fadeInDuration animation.fadeOutDuration = fadeOutDuration if !isLooped { animation.repeatCount = 1 } else { animation.repeatCount = Float.greatestFiniteMagnitude } animation.animationEvents = [ SCNAnimationEvent(keyTime: keyTime, block: { _, _, _ in completion?() }) ] bodyNode?.addAnimation(animation, forKey: "avatarAnimation") } } Everything worked perfectly until I updated to iOS 18. On a physical device, the animations now transition abruptly without the smooth blending that was present in earlier iOS versions. The switch between them is very noticeable, as if the fadeInDuration and fadeOutDuration parameters are being ignored. However, in the iOS 18 simulator, the animations still transition smoothly as before. Here two example videos - IOS 17.5 and IOS 18 https://youtube.com/shorts/jzoMRF4skAQ - IOS 17,5 smooth https://youtube.com/shorts/VJXrZzO9wl0 - IOS 18 not smooth I try this code in IOS 17.5, everything works fine Does anyone have any ideas on how to fix this issue?

Hi all, I’m working on a custom action sheet in SwiftUI that slides in and out from the bottom using .transition(.move(edge: .bottom)). However, I’ve encountered an issue where the transition doesn’t respect my specified animation duration. Here’s the basic structure of my action sheet: ZStack { Color.black .opacity(0.5) VStack { SomeActionSheetContent() } .transition(.move(edge: .bottom)) .zIndex(1) } Each button inside the action sheet triggers a dismissal using this code: Button { withAnimation(onDismissAnimation) { isPresented = false } } onDismissAnimation can be any Animation, but for demonstration, I’m using .linear(duration: 5). The problem is that when dismissing the action sheet, the animation is significantly faster than expected, around 5 times faster. For example, a 0.35-second animation finishes in just a fraction of that time. To investigate further, I tested with .transition(.move(edge: .top)), and in that case, the transition respects the specified animation duration perfectly. Does anyone know why the transition behaves differently when dismissing to the bottom versus the top?

I have been playing around with the page layout on my IPad Pro and discovered that is is impossible to group apps if you leave an empty space in the page. I found the option fun to finally place my apps where i want and not just lined up from top to bottom. I discovered if you leave gaps in the page layout it is impossible to groupe apps. The moment you hover the app over the groupe, the groupe shifts back to fill the empty space. Once I filled up all the empty space then the groupe stops moving. It is pretty annoying. The was excited to see the new feature to finally hate it completely. I do hope someone will fix this problem.

I have an iPhone/iPad application for which there is no watchOS target and as such no separate Watch app. I do not have separate watchOS app icons included as well in Assets. However, an Apple Watch is supposed to receive push notifications for the application. Do we as app developers need to provide watchOS app icons, with different resolutions as suggested by Apple in HIG, in app's Assets for the app logo to appear properly in the notification coming in watch, for both short look and long look? As of now, my app's icon appear pixelated in short look and I am not sure whether it is an app icon issue or because I did not include watchOS app icons in Assets.

I can't for the life of me get transitions and animations to work well with SwiftData and List on MacOS 15 and iOS 18. I've included an example below, where I define several animations and a transition type, but they are all ignored. How do I animate items being added to / removed from a List()? I am attached to List() due to its support for selection, context menu, keyboard shortcuts, etc. If I would switch to ScrollView with VStack I would have to rebuild all of that. Also, this is super basic and should just work, right? Thanks for reading. import SwiftUI import SwiftData struct ContentView: View { @Environment(\.modelContext) private var modelContext /// Issues on iOS: /// Items animate into and out of view, but I seem to have no control over the animation. /// In the code here I've specified a 'bouncy' and a slow 'easeIn' animation: both are not triggered. /// The code also specifies using a 'slide' transition, but it is ignored. /// -> How do I control the transition and animation timing on iOS? /// /// Issues on MacOS: /// Items do not animate at all on MacOS! They instantly appear and are instantly removed. /// -> How do I control the transition and animation timing on MacOS? // animation added here -> has no effect? @Query(animation: .bouncy) private var items: [Item] var body: some View { VStack { Button("Add to list") { // called without 'withAnimation' -> no animation let newItem = Item(timestamp: Date()) modelContext.insert(newItem) } List() { ForEach(items, id: \.self) { item in Text(item.timestamp, format: Date.FormatStyle(date: .numeric, time: .standard)) .transition(.slide) // items do not slide in/out of view .onTapGesture { // called with 'withAnimation' -> no animation withAnimation(.easeIn(duration: 2)) { modelContext.delete(item) } } } .animation(.spring(duration: 3), value: items) } } .padding() } } #Preview { ContentView() .modelContainer(for: Item.self, inMemory: true) }

Hi, I made a macOS app that automatically sets the correct input/output devices depending on the connected speakers/microphones. The App is supposed to live in the background and act automatically, only allowing the users to change through settings which is accessible through the toolbar or through clicking on the toolbar icon to cycle between modes. However, my app was just rejected for not providing UI beyond this. Guideline 4 - Design "Menu items are not visible, except by right-clicking. Users should not have to right click to access menu items." I don't think that this app needs a UI beyond that for something which it is supposed to do automatically. I'm having a hard time to understand what's expected here, should I invent a UI to pass the review and give option to the user to disable that?

As iPadOS 18 shows Tab Bar on top (tvOS'esq), can someone please tell me what changes do I need to make to get tab bar shown as a regular one (Pre iPadOS 18 style)? Tab bar being at the bottom is easily accessible. And, it being on top needs too much of hands movement. That being on top is is occupying, in a way, more screen real estate. Any ideas appreciated. Thank you.

Hello! I'm trying to play an animation with a toggle button. When the button is toggled the animation either plays forward from the first frame (.speed = 1) OR plays backward from the last frame (.speed = -1), so if the button is toggled when the animation is only halfway through, it 'jumps' to the first or last frame. The animation is 120 frames, and I want the position in playback to be preserved when the button is toggled - so the animation reverses or continues forward from whatever frame the animation was currently on. Any tips on implementation? Thanks! import RealityKit import RealityKitContent struct ModelView: View { var isPlaying: Bool @State private var scene: Entity? = nil @State private var unboxAnimationResource: AnimationResource? = nil var body: some View { RealityView { content in // Specify the name of the Entity you want scene = try? await Entity(named: "TestAsset", in: realityKitContentBundle) scene!.generateCollisionShapes(recursive: true) scene!.components.set(InputTargetComponent()) content.add(scene!) } .installGestures() .onChange(of: isPlaying) { if (isPlaying){ var playerDefinition = scene!.availableAnimations[0].definition playerDefinition.speed = 1 playerDefinition.repeatMode = .none playerDefinition.trimDuration = 0 let playerAnimation = try! AnimationResource.generate(with: playerDefinition) scene!.playAnimation(playerAnimation) } else { var playerDefinition = scene!.availableAnimations[0].definition playerDefinition.speed = -1 playerDefinition.repeatMode = .none playerDefinition.trimDuration = 0 let playerAnimation = try! AnimationResource.generate(with: playerDefinition) scene!.playAnimation(playerAnimation) } } } } Thanks!

I know that the general San Francisco (SF) fonts (Text, Display, Pro, etc.) are exclusive to Apple, its products, and its affiliates. But when it comes to SF Mono, I am unsure of its official status. Is it open source? I know many companies often release their monospace font under the OFL license (i.e., Twilio Sans Mono, Intel One Mono, Ubuntu Mono (et al), Roboto Mono (et al), and more). As I've previously said, I also know that Apple is very protective it its brand. The thing that really confuses me is that the page for Microsoft's Open Source projects (opensource.microsoft.com) actually uses SF Mono! Are Apple and MS collaborating on this? There is no repository on GitHub or the Apple Developer website, but why is a competitor to Apple using their font? (I am using Windows, so the SF fonts aren't installed on my device, they use the font from their own CDN on their website)

Hi! Is there a way to increase the color contrast of the calendar version of the SwiftUI DatePicker? Even with high contrast turned on in the general IOS settings, the contrast between the "Sun", "Mon", "Tue" etc and a plain white background is only 3.86:1, which is less than the WCAG AA recommendations of 4:5:1. The contrast with the text for non-selectable dates is even lower. I tried a couple of different options - setting tint, foregroundColor and so on, but they don't change the text color. Thanks in advance!

I have several views I want to animate in concert. I plan to use keyframe animation. I want to keep the .keyFrameAnimator modifier code small; I have a lot of ...Keyframes inside several KeyframeTracks. It seems like I should be able to isolate the body of the keyframes parameter into a func or var. Builders are such a pain, I can't grok the right way to refactor their bodies out. I've tried to make a standalone @KeyframeTrackContentBuilder<MyValue> function but cannot figure out the right syntax/incantation to stuff it with KeyframeTracks. My latest attempt is to create a func that returns a KeyframeTimeline, but that's been a deadend too. let k: KeyframeTimeline<MyValue> = timeline(...) CartoonCardView(color: .yellow) .keyframeAnimator( initialValue: k.value(time: 0) ) { content, value in content .rotationEffect(value.angle) .scaleEffect(value.scale) .offset(value.offset) } keyframes: { _ in k } The error on k in the last line is "No exact matches in call to static method 'buildExpression'" with the sub-error "Candidate requires that 'KeyframeTimeline' conform to 'KeyframeTrackContent' (requirement specified as 'K' : 'KeyframeTrackContent') (SwiftUICore.KeyframesBuilder)"

I'm looking for someone who can make me such a design. I just want this large text to work as a preview for pictures and videos at the top and the comment field at the bottom has the same design as in the picture and that it is together with the keyboard and that should all be only for the post-constitution. Maybe someone can do something like in this picture with exactly the same design and in the comment field there should also be this small Siri icon from Apple Intelligence. It doesn't have to work, but it just looks chic. In addition, I would like that on the main page where post is displayed like on TikTok and Instagram, is with a 3-D floating postcard and I have a sketch (see picture)

On the WWDC24 session video 'Enhance your UI animations and transitions', Appls shows these new animation methods for UIKIT: switch gesture.state { case .changed: UIView. animate(.interactiveSpring) { bead.center = gesture.translation } case .ended: UIView. animate(spring) { bead.center = endOfBracelet ｝ ｝ As of iOS 18 Beta 2, I get an error for `UIView. animate(.interactiveSpring)` These new methods are not available yet?

👋 Hey, folks. Does Apple convert app screenshots uploaded to App Store Connect before displaying them on the App Store? In other words, is it better to upload PNG files for better quality or JPG files for lower file size and faster loading?

Please consider simple example below. I am trying to put a timer in the upper right corner of a live activity. I am done, it works, but I'm trying to get the timer to look better. If I take a regular text, I can get it to align properly by adjusting the .frame(), , but for a text with a timer inside it, alignment is ignored from what I can see. Text("Hello").frame(width: 90, alignment: .trailing).border(.red) /*Text(timerInterval: timeRange, countsDown: false) .monospacedDigit().font(.subheadline).frame(width: 90, alignment: .trailing).border(.red)*/ } Is there any way to fix this? Right now, I have a fixed width so that HH:mm:ss will fit, but that doesn't look super great if it's just minutes and seconds for example, there's an empty block to the right

Having a traditional 'NavigationSplitView' setup, I am looking for a way to animate it the same as the sidebarView, where there is a button to toggle and it animates by sliding out from the right side of the view, however the closest I have gotten was manipulating the 'navigationSplitViewColumnWidth' but that always results in the view instantly appearing / disappearing. I am using SwiftUI for a MacOS specific app. Here is just a general idea of what I am currently doing, it is by no means a reflection of my real code but serves the purpose of this example. struct ContentView: View { @State private var columnWidth: CGFloat = 300 var body: some View { NavigationSplitView { List { NavigationLink(destination: DetailView(item: "Item 1")) { Text("Item 1") } NavigationLink(destination: DetailView(item: "Item 2")) { Text("Item 2") } NavigationLink(destination: DetailView(item: "Item 3")) { Text("Item 3") } } .navigationTitle("Items") } detail: { VStack { DetailView(item: "Select an item") Button(action: toggleColumnWidth) { Text(columnWidth == 300 ? "Collapse" : "Expand") } .padding() } } .navigationSplitViewColumnWidth(columnWidth) } private func toggleColumnWidth() { withAnimation { columnWidth = columnWidth == 300 ? 0 : 300 } } } struct DetailView: View { var item: String var body: some View { Text("Detail view for \(item)") .navigationTitle(item) .padding() } } @main struct MyApp: App { var body: some Scene { WindowGroup { ContentView() } } }

I want to create a Project Template with an icon that matches the default Xcode templates. I created a vector example icon and saved it as TemplateIcon.svg and it gets displayed for my .xcodetemplate. I would like it to blend in with Apple's default icons (which I know are assets contained inside Xcode bundles). I have tried with fill="currentColor" in my svg xml but it doesn't work. I couldn't find any technical documentation about this. It would be great to know how to design an icon that gets dynamically tinted by Xcode like the default ones. Thanks 🙂