Wesley de Groot's Blog
Supporting Reduced Motion accessibility setting in SwiftUI

Back

In this post, we will explore how to support the Reduced Motion accessibility setting in SwiftUI applications.

What is Reduced Motion accessibility setting in SwiftUI?

The Reduced Motion accessibility setting in iOS allows users to minimize the amount of motion and animation in the user interface. This is particularly helpful for individuals who may experience discomfort or distraction from excessive motion.

Supporting Reduced Motion accessibility setting in SwiftUI

In a SwiftUI application, you can respect the user's preference for reduced motion by using the @Environment property wrapper to access the colorScheme and accessibilityReduceMotion environment values. This allows you to conditionally adjust your animations and transitions based on the user's settings.

Get the reduced motion setting

To get the current reduced motion setting, you can use the following code snippet:

@Environment(\.accessibilityReduceMotion) var reduceMotion

Implementation

struct ContentView: View {
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Image(systemName: "star")
            .rotationEffect(reduceMotion ? .zero : .degrees(360))
            .animation(
                reduceMotion ? nil : .linear(duration: 1).repeatForever(autoreverses: false),
                value: reduceMotion
            )
    }
}

Note: If we also wanted to check whether Prefer Cross-Fade Transitions is enabled, we can use UIAccessibility.prefersCrossFadeTransitions. There's currently no environment value available for that setting in SwiftUI.

Wrap up

In summary, supporting the Reduced Motion accessibility setting in SwiftUI is essential for creating a more inclusive user experience. By leveraging the @Environment property wrapper and being mindful of animation duration and user preferences, you can ensure that your app respects the needs of all users.

Resources:

Read more

Share


Share Bluesky Mastodon Twitter LinkedIn Facebook
x-twitter mastodon github linkedin discord threads instagram whatsapp bluesky square-rss sitemap