[a11y] Check for reduced motion frame names #2451

bassettsj · 2024-01-22T22:25:19Z

Brings parity to the android for the changes in iOS airbnb/lottie-ios/pull/2110

This PR adds support for respecting the system "reduction motion" option.

Animations Enabled

screen-20240122-155931.mp4

Animations Disabled

screen-20240122-160034.mp4

- brings parity to the android for the changes in iOS github.com/airbnb/lottie-ios/pull/2110

calda · 2024-01-22T22:38:09Z

lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java

-      setFrame((int) (getSpeed() < 0 ? getMinFrame() : getMaxFrame()));
+      Marker markerForAnimationsDisabled = getMarkerForAnimationsDisabled();
+      if (markerForAnimationsDisabled != null) {
+        setFrame((int) markerForAnimationsDisabled.startFrame);


On iOS we also support reduced motion markers with both a start frame and an end frame. If the marker provides an end frame, we play the animation from the start / end of the reduced motion marker as opposed to just only displaying the first frame.

@calda Thanks for the quick reply, Is there a way to play from the start to end frame? Sorry for not knowing from looking at this code.

@gpeal should be able to help :) just giving my drive-by review from an iOS perspective

@gpeal How would I play the animation from start to end here per @calda 's comment?

calda · 2024-01-22T22:39:28Z

lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java

@@ -794,14 +795,52 @@ public void playAnimation() {
      }
    }
    if (!animationsEnabled()) {
-      setFrame((int) (getSpeed() < 0 ? getMinFrame() : getMaxFrame()));
+      Marker markerForAnimationsDisabled = getMarkerForAnimationsDisabled();
+      if (markerForAnimationsDisabled != null) {


What should determine if "reduced motion" mode is enabled? Reading the code it seems like the reduced motion marker is always used if present, as opposed to only using it when the app / OS "reduced motion" toggle is enabled.

@calda It seems odd that we don't check to see if the animations are disabled in accessibility settings, it seems like it is set by the consumer application with: https://github.com/airbnb/lottie-android/blob/master/lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java#L1190

It defaults to this which can be set if battery saver is on or if you turn off animations in developer settings. It's not an a11y setting on Android afaik though.

Oh I see, I missed that this is gated by a animationsEnabled() check, which can be configured via setSystemAnimationsAreEnabled.

It doesn't feel quite right to take a specific a11y setting on iOS and use the same name on Android when it maps to different things.

@gpeal In the a11y community, "reduced motion" is the more common term even if it comes from Apple. I think the same is applied to lottie-web as well, so designers can produce one asset to share across platform.

It's not an a11y setting on Android afaik though.

It is available under accessibility then Color and Motion

I think that's reasonable. It's worth noting that this would affect non a11y use cases like battery saver and developer settings but this behavior may still be better if the designer was explicit about it.

Could you:

Double check that the utils function I linked to returns 0 for animation scale when this a11y setting is enabled

Add documentation for setSystemAnimationsAreEnabled in case anybody else calls it so they can learn about this without reading the source?

Checked Accessibility setting in the utils function, it returns false when running in the debugger.

Add documentation for setSystemAnimationsAreEnabled in case anybody else calls it so they can learn about this without reading the source?

I added the document comment, thanks for the suggestion

lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java

calda

Thanks for working on this! Looks great from an iOS perspective, especially after adding support for markers with an end frame

gpeal

Thanks for doing this. I also raised this with the lottie spec team and they created lottie/lottie-spec#7 for visibility and awareness for other platforms.

lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java

github-actions · 2024-01-23T16:54:39Z

Snapshot Tests
API 23: Report Diff
API 31: Report Diff

gpeal · 2024-01-23T17:32:51Z

If you want to create a ReducedMotionTestCase, that would be great 😄
https://github.com/airbnb/lottie-android/tree/master/snapshot-tests/src/androidTest/java/com/airbnb/lottie/snapshots/tests

…motion

bassettsj · 2024-01-23T20:58:43Z

@gpeal I think I added the test case that might work. Wasn't able to run locally, but we will see with the workflow here.

gpeal · 2024-01-23T21:32:04Z

Could you apply this patch to fix the test:

diff --git a/snapshot-tests/src/androidTest/java/com/airbnb/lottie/snapshots/SnapshotTestCaseContext.kt b/snapshot-tests/src/androidTest/java/com/airbnb/lottie/snapshots/SnapshotTestCaseContext.kt
index c5693a82..92df041d 100644
--- a/snapshot-tests/src/androidTest/java/com/airbnb/lottie/snapshots/SnapshotTestCaseContext.kt
+++ b/snapshot-tests/src/androidTest/java/com/airbnb/lottie/snapshots/SnapshotTestCaseContext.kt
@@ -56,7 +56,7 @@ suspend fun SnapshotTestCaseContext.withDrawable(
     assetName: String,
     snapshotName: String,
     snapshotVariant: String,
-    callback: (LottieDrawable) -> Unit,
+    callback: suspend (LottieDrawable) -> Unit,
 ) {
     val result = LottieCompositionFactory.fromAssetSync(context, assetName)
     val composition = result.value ?: throw IllegalArgumentException("Unable to parse $assetName.", result.exception)
@@ -254,4 +254,4 @@ private suspend fun View.awaitFrame() {
             cont.resume(Unit)
         }
     }
-}
\ No newline at end of file
+}
diff --git a/snapshot-tests/src/androidTest/java/com/airbnb/lottie/snapshots/tests/DisabledAnimationsTestCase.kt b/snapshot-tests/src/androidTest/java/com/airbnb/lottie/snapshots/tests/DisabledAnimationsTestCase.kt
index f535ae8e..b669635b 100644
--- a/snapshot-tests/src/androidTest/java/com/airbnb/lottie/snapshots/tests/DisabledAnimationsTestCase.kt
+++ b/snapshot-tests/src/androidTest/java/com/airbnb/lottie/snapshots/tests/DisabledAnimationsTestCase.kt
@@ -3,17 +3,23 @@ package com.airbnb.lottie.snapshots.tests
 import com.airbnb.lottie.snapshots.SnapshotTestCase
 import com.airbnb.lottie.snapshots.SnapshotTestCaseContext
 import com.airbnb.lottie.snapshots.withDrawable
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.withContext
 
 class DisabledAnimationsTestCase : SnapshotTestCase {
     override suspend fun SnapshotTestCaseContext.run() {
         withDrawable("Tests/ReducedMotion.json", "System Animations", "Disabled") { drawable ->
-            drawable.setSystemAnimationsAreEnabled(false)
-            drawable.playAnimation()
+            withContext(Dispatchers.Main) {
+                drawable.setSystemAnimationsAreEnabled(false)
+                drawable.playAnimation()
+            }
         }
 
         withDrawable("Tests/ReducedMotion.json", "System Animations", "Enabled") { drawable ->
-            drawable.setSystemAnimationsAreEnabled(false)
-            drawable.playAnimation()
+            withContext(Dispatchers.Main) {
+                drawable.setSystemAnimationsAreEnabled(false)
+                drawable.playAnimation()
+            }
         }
     }
 }

github-actions · 2024-01-23T22:40:10Z

Snapshot Tests
API 23: Report Diff
API 31: Report Diff

gpeal

Looks good! Just one small last comment

lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java

Co-authored-by: Gabriel Peal <[email protected]>

github-actions · 2024-01-23T22:58:58Z

Snapshot Tests
API 23: Report Diff
API 31: Report Diff

[a11y] check for reduced motion frame names

70283f8

- brings parity to the android for the changes in iOS github.com/airbnb/lottie-ios/pull/2110

calda reviewed Jan 22, 2024

View reviewed changes

lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java Show resolved Hide resolved

calda approved these changes Jan 22, 2024

View reviewed changes

AliT3 mentioned this pull request Jan 23, 2024

[For Consideration] - Prefers reduced motion fallback lottie/lottie-spec#7

Open

gpeal reviewed Jan 23, 2024

View reviewed changes

lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java Outdated Show resolved Hide resolved

Steven Bassett added 3 commits January 23, 2024 12:29

Move ALLOWS_REDUCED_MOTION_MARKERS to other statics

1e1bb59

Add a document comment to the setSystemAnimationsEnabled for reduced …

dcf5305

…motion

Add a reduced motion test case

3873a33

Fix snapshot tests

54245d6

bassettsj marked this pull request as ready for review January 23, 2024 21:35

gpeal reviewed Jan 23, 2024

View reviewed changes

lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java Outdated Show resolved Hide resolved

Update lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java

d15fed3

Co-authored-by: Gabriel Peal <[email protected]>

gpeal approved these changes Jan 23, 2024

View reviewed changes

gpeal changed the title ~~[a11y] check for reduced motion frame names~~ [a11y] Check for reduced motion frame names Jan 23, 2024

gpeal merged commit 6185eda into airbnb:master Jan 23, 2024
6 checks passed

bassettsj deleted the a11y-remove-animations branch January 24, 2024 17:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[a11y] Check for reduced motion frame names #2451

[a11y] Check for reduced motion frame names #2451

bassettsj commented Jan 22, 2024 •

edited

Loading

calda Jan 22, 2024

bassettsj Jan 22, 2024

calda Jan 22, 2024 •

edited

Loading

bassettsj Jan 22, 2024

calda Jan 22, 2024

bassettsj Jan 22, 2024

gpeal Jan 22, 2024

calda Jan 22, 2024 •

edited

Loading

gpeal Jan 22, 2024

bassettsj Jan 22, 2024

bassettsj Jan 22, 2024 •

edited

Loading

gpeal Jan 23, 2024

bassettsj Jan 23, 2024

bassettsj Jan 23, 2024

calda left a comment

gpeal left a comment

github-actions bot commented Jan 23, 2024

gpeal commented Jan 23, 2024

bassettsj commented Jan 23, 2024

gpeal commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

gpeal left a comment

github-actions bot commented Jan 23, 2024

[a11y] Check for reduced motion frame names #2451

[a11y] Check for reduced motion frame names #2451

Conversation

bassettsj commented Jan 22, 2024 • edited Loading

Animations Enabled

Animations Disabled

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calda Jan 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calda Jan 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bassettsj Jan 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calda left a comment

Choose a reason for hiding this comment

gpeal left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 23, 2024

gpeal commented Jan 23, 2024

bassettsj commented Jan 23, 2024

gpeal commented Jan 23, 2024

github-actions bot commented Jan 23, 2024

gpeal left a comment

Choose a reason for hiding this comment

github-actions bot commented Jan 23, 2024

bassettsj commented Jan 22, 2024 •

edited

Loading

calda Jan 22, 2024 •

edited

Loading

calda Jan 22, 2024 •

edited

Loading

bassettsj Jan 22, 2024 •

edited

Loading