Skip to content

Commit

Permalink
[a11y] Adding reduce motion logic to LottieAnimation for compose usage (
Browse files Browse the repository at this point in the history
#2542)

Our changes in #2536 didn't work for `LottieAnimation` in compose. While LottieAnimation does use LottieDrawable, it has it's own animator and draws on canvas directly. 

This PR addresses that issue by making some logic of reduce motion readable outside LottieDrawable and consuming that logic in `LottieAnimation` 

I tested this by adding a sample lottie file with reduce motion marker locally, see the attached video. 

https://github.com/user-attachments/assets/eb33333f-86b8-46fa-9bbb-82bff8a8c7fe

Co-authored-by: Pranay Airan <pranay.airan@airbnb.com>
  • Loading branch information
pranayairan and Pranay Airan authored Aug 30, 2024
1 parent a1fb304 commit 66bc2fb
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
import androidx.compose.ui.graphics.nativeCanvas
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.ScaleFactor
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.IntSize
import com.airbnb.lottie.AsyncUpdates
import com.airbnb.lottie.LottieComposition
Expand Down Expand Up @@ -101,6 +102,7 @@ fun LottieAnimation(
if (composition == null || composition.duration == 0f) return Box(modifier)

val bounds = composition.bounds
val context = LocalContext.current
Canvas(
modifier = modifier
.lottieSize(bounds.width(), bounds.height())
Expand Down Expand Up @@ -131,7 +133,12 @@ fun LottieAnimation(
drawable.maintainOriginalImageBounds = maintainOriginalImageBounds
drawable.clipToCompositionBounds = clipToCompositionBounds
drawable.clipTextToBoundingBox = clipTextToBoundingBox
drawable.progress = progress()
val markerForAnimationsDisabled = drawable.markerForAnimationsDisabled
if (!drawable.animationsEnabled(context) && markerForAnimationsDisabled != null) {
drawable.progress = markerForAnimationsDisabled.startFrame
} else {
drawable.progress = progress()
}
drawable.setBounds(0, 0, bounds.width(), bounds.height())
drawable.draw(canvas.nativeCanvas, matrix)
}
Expand Down
15 changes: 8 additions & 7 deletions lottie/src/main/java/com/airbnb/lottie/LottieDrawable.java
Original file line number Diff line number Diff line change
Expand Up @@ -823,15 +823,15 @@ public void playAnimation() {
}

computeRenderMode();
if (animationsEnabled() || getRepeatCount() == 0) {
if (animationsEnabled(getContext()) || getRepeatCount() == 0) {
if (isVisible()) {
animator.playAnimation();
onVisibleAction = OnVisibleAction.NONE;
} else {
onVisibleAction = OnVisibleAction.PLAY;
}
}
if (!animationsEnabled()) {
if (!animationsEnabled(getContext())) {
Marker markerForAnimationsDisabled = getMarkerForAnimationsDisabled();
if (markerForAnimationsDisabled != null) {
setFrame((int) markerForAnimationsDisabled.startFrame);
Expand All @@ -853,7 +853,8 @@ public void playAnimation() {
*
* @return The first non-null marker from the list of allowed reduced motion markers, or null if no such marker is found.
*/
private Marker getMarkerForAnimationsDisabled() {
@RestrictTo(RestrictTo.Scope.LIBRARY)
public Marker getMarkerForAnimationsDisabled() {
Marker marker = null;
for (String markerName : ALLOWED_REDUCED_MOTION_MARKERS) {
marker = composition.getMarker(markerName);
Expand Down Expand Up @@ -885,15 +886,15 @@ public void resumeAnimation() {
}

computeRenderMode();
if (animationsEnabled() || getRepeatCount() == 0) {
if (animationsEnabled(getContext()) || getRepeatCount() == 0) {
if (isVisible()) {
animator.resumeAnimation();
onVisibleAction = OnVisibleAction.NONE;
} else {
onVisibleAction = OnVisibleAction.RESUME;
}
}
if (!animationsEnabled()) {
if (!animationsEnabled(getContext())) {
setFrame((int) (getSpeed() < 0 ? getMinFrame() : getMaxFrame()));
animator.endAnimation();
if (!isVisible()) {
Expand Down Expand Up @@ -1244,12 +1245,12 @@ boolean isAnimatingOrWillAnimateOnVisible() {
}
}

private boolean animationsEnabled() {
public boolean animationsEnabled(Context context) {
if (ignoreSystemAnimationsDisabled) {
return true;
}
return systemAnimationsEnabled &&
L.getReducedMotionOption().getCurrentReducedMotionMode(getContext()) == ReducedMotionMode.STANDARD_MOTION;
L.getReducedMotionOption().getCurrentReducedMotionMode(context) == ReducedMotionMode.STANDARD_MOTION;
}

/**
Expand Down

0 comments on commit 66bc2fb

Please sign in to comment.