Synchronize a group of shimmer animations
Opened this issue · 4 comments
Hi,
The shimmer effect from this package is pretty cool, however I would like more control.
Here are a few things I thought:
Delay
In my home screen, I would like to highlight some parts of my app but not all at the same time, to let the user see them one after each other.
The interval will not do it for this use case since everything will start at the same time
More precise angle on the shimmer effect
There is an angle on the shimmer effect that we can tweak with predefined values, would it be possible to chose more precisely the angle instead of predefined values only?
I saw that it relies on the Alignment object so I guess it can be 🤔
Adding some randomness
This is more an open though than a feature request, but I wondered if you had an idea to make it less repetitive.
For instance, there could be an interval of 500 ms twice then one of 3 sec. Later, it might come back to an interval of 500 ms or something different.
I though about changing the interval value after some delay but I am not sure it will be really intuitive / smooth, and others might benefit from this feature if it was directly in the package.
I might do a PR for the delay and the angle, not sure about the randomness 🤔
I like your ideas very much and I have some preliminary ideas on how to implement them
Delay
What about a, lets say, GroupShimmer widget which would take multiple Shimmer widgets as children and act as a controller to them. This could be done without any major tweaks in the current Shimmer object and thus avoiding breaking changes for people already using it. This would also open doors to, not just delay, but a number of custom synchronizations among the Shimmer widgets
More Precise Angle
The angle is produced using the begin and end parameters in the LinearGradient object which gives me an approximate angle in that direction. I've tried to fine tune this by modifying the size of the box in which the gradient is displayed with a recent fix improving angle accuracy. This also gives the edge to edge feel which would not be there with original box size.
So what I plan is tweaking the size of box based on angle entered but this would require some testing before actually rolling out.
Adding some randomness
This might not be as intuitive for the end user as it sounds because the user is expecting an animation every, lets say, x seconds but when that doesn't appear, the user might consider the app as stuck/frozen. This can be implemented using sets maybe, like a set of shimmers, then delay, then a set but I don't feel that would be intuitive and this feels like a very specific use case to be put in a generic widget. I will still give a thought to this and see if I can figure out a way to implement this while keeping it intuitive.
I'll work on this over the weekend and also split this into two issues, one for delay and one for angle as angle thing would take more time than the group feature
Delay
I am not sure I understood very well the proposed GroupShimmer. All the Shimmer in this group would start at the same time?
Would this GroupShimmer widget have a delay property?
For the specific delay thing, I just though to change the controller.forward(); in the initState() method by Future.delayed(widget.interval, () => mounted ? controller.forward() : null); similar to what you did with the interval.
Randomness
I think it can be useful in games (that's what I am developing atm) where there might have different standards than regular apps which are maybe more predictable.
In games, I see regularly things animated at different rates that feels "random" because sometimes it points me toward the shop, sometimes to a specific feature, to a new friend request, etc...
Having a different delay for each might solve this.
I still think that there is something to do however, but I might try it out on my own first and come back to show/explain it better. I will try putting a loop like Shimmer > 500ms delay > Shimmer > 2 sec delay and see how it looks!
I will fork the repo and try doing a few things with it and eventually make a PR. Feel free to accept/reject it :)
Yup, group shimmer will have delay. It could also have properties like going forward, or forward then back, or backward.
Also, I get your point of randomness, hadn't thought of this use case. And yes this is pretty common in games. Would be a good idea to implement!