Add Thunder setting to reduce animations throughout the app

[hjiangsu]

Pull Request Description

This PR introduces a new settings section "Accessibility" which holds a single option (at this time) which reduces the animations used in Thunder. Currently, the following things have changed:

• Bottom navigation bar animation is removed when the setting is toggled on
• Navigation change (e.g., loading post) animation has been reduced drastically
• Overscroll stretching effects have been removed from the feed and post pages (replaced with the iOS equivalent)

Issue Being Fixed

Issue Number: #163

Screenshots / Recordings

Checklist

• Did you update CHANGELOG.md?
• Did you use localized strings where applicable?
• Did you add semanticLabels where applicable for accessibility?

[micahmo]

Ooh very nice! I actually quite like the faster navigation animation.

Unfortunately, the overscroll is still there on Android. 😞

qemu-system-x86_64_HD6w0uTtdb.mp4

[hjiangsu]

Dang, does turning on the setting reduce the overscroll effect then? Or is it the same as if the setting was off?

I thought this would help, but maybe its specific to iOS: https://stackoverflow.com/questions/58645048/how-to-remove-overscroll-on-ios

[micahmo]

does turning on the setting reduce the overscroll effect then?

No, it doesn't appear to be any less. 😞 Let me know if you need a hand looking into this.

[hjiangsu]

Looking into this a bit deeper, it seems like this is what is being applied on Android to show the stretching from the overscrolling effects: https://api.flutter.dev/flutter/widgets/StretchingOverscrollIndicator-class.html

For us to potentially remove this effect, we would need to switch over to using https://api.flutter.dev/flutter/widgets/GlowingOverscrollIndicator-class.html when the reduce animation setting is toggle on. This is only an Android specific issue, as iOS does not have the overscroll effects when scrolling so we need to keep that in mind!

I haven't been able to implement the change yet but it seems like this should do the trick

[hjiangsu]

Just tested it out with the GlowingOverscrollIndicator and it did not work as I expected it to work. Instead, I changed the physics to use BouncingScrollPhysics when reduced animations are on. What this does is that it allows you to scroll past the content of the page, without activating the overscroll stretch effect. This is how iOS seems to handle it by default!

@micahmo could you test this out and see if this makes sense and removes the overscroll effects?

[micahmo]

Nice, seems to work fine for me on Android!

As for whether it's better, I guess that's a question for @Coffee-Viking or someone else who has an idea of animations as it relates to accessibility. On the one hand, this change introduces much more motion on the screen, but on the other hand, things aren't stretching. So I can't say which is better.

[hjiangsu]

I think the main thing here is to remove that stretching effect that is caused when overscrolling because it causes some users to become nauseous when seeing that.

If everything is uniform and all the content moves uniformly across the screen, I think that would reduce that motion effect and hopefully reduce the nauseating feeling! My guess (but feel free to correct me here) is that reduce motion should reduce any "non-user" generated motion such as the stretch motion and navigation motion!

[micahmo]

That all makes sense to me!

[hjiangsu]

@micahmo This should be ready for review now! Could I also get you to test something out when you have the chance?

Could you try to change your system animation/motion settings on Android and see if that affects the general animation speed for parts of the app? This includes the native animations for widgets such as expanding/collapsing sidebar, opening up bottom modals, etc (so nothing where we set the duration of a animation or transition)

Thanks! :D

[micahmo]

This should be ready for review now!

The code LGTM! Very nice!

Could you try to change your system animation/motion settings on Android and see if that affects the general animation speed for parts of the app?

You bet. I actually run with my animations at .5x on my physical device and haven't noticed that Thunder follows this. Just tested again and can confirm nothing changes with relation to the animation multiplier in Android (either in develop or in this branch with animations disabled).

[micahmo]

Actually, found one more place you might want to change when animations are disabled. This is when pressing the back button on Android, we scroll through the pages to the home feed.

thunder/lib/thunder/pages/thunder_page.dart

Line 116 in adde240

pageController.animateToPage(0, duration: const Duration(milliseconds: 500), curve: Curves.ease);

[hjiangsu]

You bet. I actually run with my animations at .5x on my physical device and haven't noticed that Thunder follows this.

Yeah, it seems like developer settings to set animation speed is not available in Flutter: flutter/flutter#10101 (comment)

Does Android have any accessibility settings (outside of the developer settings) which reduces motion in any way? For example, iOS has Reduce Motion setting in Accessibility. If so, does setting any of those settings affect the animations within Thunder?

Actually, found one more place you might want to change when animations are disabled.

Nice catch! I'll add some logic in there as well to handle this

[micahmo]

Does Android have any accessibility settings (outside of the developer settings) which reduces motion in any way?

Yes, I just found a setting called "Remove animations". The funny thing is, when I first turned it on, Thunder did respect it (e.g., the bottom modal popped up immediately). But then after restarting Thunder, it went back to animations again. So I'm not sure what to make of that. 🤷

[hjiangsu]

Actually, found one more place you might want to change when animations are disabled.

This should be good now! If you could test this out yourself, that would be helpful (I tested on emulator and it seemed to be okay)

But then after restarting Thunder, it went back to animations again.

Hmm, might just be a Flutter thing then. I think we can leave that be for now. Thanks for testing it by the way!

[micahmo]

Looks good to go!