Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
169 views

Disable Animations On A Specific View in SwiftUI Using Transactions

Uploaded by

iphonewsro
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
169 views

Disable Animations On A Specific View in SwiftUI Using Transactions

Uploaded by

iphonewsro
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

NEWSLETTER ABOUT SPONSORSHIP

53,093 followers

A weekly blog about Swift, iOS and Xcode Tips and Tricks
Every Tuesday, curated Swift content from the community for free.
Your email address Follow

Win a iOSKonf '24 conference ticket with this free giveaway


SwiftLee > SwiftUI > Disable animations on a specific view in SwiftUI using transactions

SwiftUI Apr 05, 2022 • 3 min read

Disable animations on a specific view


in SwiftUI using transactions
Animations in SwiftUI look great and make your app shine, but sometimes you
want to disable animations on a specific view since it doesn’t look great when
animating.
Compared to UIKit, SwiftUI makes it easier to create animated transitions
between two states using the animation view modifier. You can see each
animation as a transaction between a from and to state. We can alter this
transaction using the transaction view modifier, which we’ll use in this article.
FREE iOS Architect Crash Course for a limited time! SPONSOR
If you’re a mid/senior iOS developer looking to improve your skills and salary level, join this
100% free online crash course. It's available only until April 28th, so click to get it now!

The problem definition


While I was working on a soon to be released Stock Analyzer app, I ran into the
following animation for a bar chart graph:

The legend text animation does not look as great as we hoped.


The bar chart animation is also applied to the menu button, resulting in an
animating button title. The “General and Administrative” text is too long for the
button to put in one line, making the button grow in height.
I was not too fond of this animation, and I was looking for a way to disable
animations for this specific menu button. A straightforward approach would be to
disable the bar chart animation altogether, but I liked that one! Let’s dive into the
solutions that I found.
Using the .animation(nil) view modifier
When searching on sites like Stack Overflow, you’ll soon get an old answer
suggesting using the .animation(nil) view modifier to disable animations.
However, when used in the latest version of Xcode, you’ll see the following
warning:

The animation(nil) view modifier is deprecated, and you should no longer use it.
The deprecation warning makes it clear to us that we should try to use this
method no longer. Since it’s deprecated, we’ll sooner or later have to replace this
code, and we also want a warning-free project.
The suggestion is to use the animation(_:value:) modifier instead. It wasn’t
immediately clear how the old view modifier would transform into this new one.
Once again, suggested by others, I tried out the following modifier:
.animation(nil, value: UUID())

I couldn’t make this solution work, and I wouldn’t say I liked it. A view redraw will
update the UUID, which means our modifier might run for no reason. Using a
UUID in this way also makes it feel like a hack to me. Therefore, I continued my
journey.

Using the transaction view modifier


RocketSim:
An Essential Developer Tool
as recommended by Apple In
I finally stumbled on the transaction view modifier that allows you to adjust a Th
Us
transaction between two states. A transaction contains the context of the current mo
state-processing update, animated or not, meaning that this modifier calls even Us
when you’re not animating the changes. You can verify this as follows:
.transaction { transaction in
print(transaction.animation) // Prints: nil when not animated.
}
We can use this same transaction modifier to disable the animation as we would
before:
.transaction { transaction in
transaction.animation = nil
}

Any adjustments we make to the given transaction only apply to the animations
used within the view containing the modifier.
The final result looks much better to me!

The legend animation is now disabled using the transaction modifier.

FREE iOS Architect Crash Course for a limited time! SPONSOR


If you’re a mid/senior iOS developer looking to improve your skills and salary level, join this
100% free online crash course. It's available only until April 28th, so click to get it now!

Conclusion
You can no longer disable animations in SwiftUI using the deprecated
animation(nil) modifier. We can use the transaction modifier to create the
same result and disable animations for a specific view in SwiftUI.
If you like to improve your SwiftUI knowledge even more, check out the SwiftUI
category page. Feel free to contact me or tweet me on Twitter if you have any
additional tips or feedback.
Thanks!

Stay Updated with the Latest in SwiftUI


The 2nd largest newsletter in the Apple development community with
18,327 developers. Don't miss out – Join today:
Your email address Stay Informed

Featured SwiftLee Jobs


Lead Software Engineer @ M7 Health • $105K - $185K
Senior Android Engineer @ Speechify
Test Automation Lead, Engineering Productivity @ Ordergroove • $140K -
$170K
Find your next Swift career step at world-class companies with impressive apps
by joining the SwiftLee Talent Collective. I'll match engineers in my collective with
exciting app development companies. SwiftLee Jobs

WRITTEN BY GitHub Sponsor Follow


ANTOINE VAN DER LEE
iOS Developer since 2010. Lead developer of the Collect by WeTransfer app.
Writing a new blog post every week related to Swift, iOS and Xcode. Regular
speaker and workshop host.
Debugging SwiftUI views: what caused that change?
Debugging SwiftUI views is an essential skill when writing dynamic views with several redrawing triggers. Property wrappers
like @State and ...
Nov 13, 2023 Debugging SwiftUI

Localization testing in Xcode


Localization testing becomes vital if your apps are localized in multiple languages. You want to ensure your UI looks good ...
Aug 01, 2023 Xcode

#Preview SwiftUI Views using Macros


Starting with Xcode 15 and Swift 5.9, you can create previews for your SwiftUI view using the new #preview Macro. ...
Jun 27, 2023 Xcode

Categories Follow Info


Swift Newsletter About
Xcode Twitter Shop
Optimization LinkedIn Sponsor
Debugging GitHub Contact
Workflow RocketSim
RSS

Copyright © 2015-2024 SwiftLee. All Rights Reserved.

You might also like