uhabits icon indicating copy to clipboard operation
uhabits copied to clipboard

introducing confetti animation using konfetti library

Open gokulk16 opened this issue 1 year ago • 2 comments

  • Added Konfetti library: https://github.com/DanielMartinus/Konfetti

Test cases when confetti will be shown for habit type - boolean(Yes/No):

  • Toggling with the short press
  • Toggling inside the checkmark pop-up

Test cases when confetti will be shown for habit type - measurable:

  • Adding an entry using the number pop-up. animation shows even when the number doesn't match the target for the day respecting the progress made on the day for the user.

Settings combinations tested with:

  • skip days disabled; toggle with short press disabled
  • skip days disabled; toggle with short press enabled
  • skip days enabled; toggle with short press disabled
  • skip days enabled; toggle with short press enabled

Screen recording of confetti animation:

https://github.com/iSoron/uhabits/assets/8376313/e95ec5db-297e-4f74-8905-1a764840246b

gokulk16 avatar Jun 16 '23 13:06 gokulk16

  1. I think we'd need a new setting to allow users to disable this if they don't want this
  2. what happens if you interact with the UI while the animation is working, does it still work? Does it interrupt the animation?
  3. maybe something a bit more discrete would be better

I don't want to tell you to do 1. yet because I'm still not sure @iSoron is open to this new UI feature, better to wait for a confirmation first. @iSoron can you give us your opinion (e.g. based on the video) before @gokulk16 continues working on this?

hiqua avatar Aug 10 '23 22:08 hiqua

Just wanted to chip in that the lack of a strong blue colour (e.g. 0000FF) in that confetti would make me not use it. It's not confetti without all primary colours. (Only half-joking)

neube3 avatar Jan 01 '24 18:01 neube3

Thank you for the PR, @gokulk16. I have merged it to dev (06090e238a6f9dc6887fc01d920f252fe2c0e7c0) with the following major changes:

  • Move the Konfetti code to ListHabitsScreen
  • Make the confetti originate from the button, instead of the center of the screen
  • Use the color of the habit as the base color for the confetti, but add some randomization, so we still get multiple colors
  • Tweak some animations, layout and the conditions in which the confetti is shown.

Feel free to submit other PRs to tweak it further or fix any remaining issues. At this point, I think the animation is subtle enough for it to be enable by default. If users complain about it, we can add an option in the settings to disable it, or even make it opt-in.

iSoron avatar Apr 03 '24 00:04 iSoron

@iSoron Thanks for the tweaks and also merging the PR. 🙏

gokulk16 avatar Apr 03 '24 05:04 gokulk16