Re: animating gradients
- Hi guys,
I know this thread is ancient history but as I'm off the Web lately for very long periods of time,
I just recently discovered it, so if I may mumble a bit...
Jake, first let me join the congratulations for your elegant solution, cheers!
Judging from your last post on the linear, I still cannot tell if you got what you wanted.
just In case, I set the following demo:
Chaals advice was good but only partly - push a copy of the first stop to be the last
and use "repeat", but instead of messing with offsets > 1, just set the offsets to be
equally spaced to 1, that's it.
Jake and Thomas, one drawback of using r>.5 in this case (circle with bbox units)
is that some of the colors are always missing.
Following demo simulate what is happening beyond the edge of the circle.
White circle marks the edge of the original circle (0.8333 offset), black marks
the 1.0 offset and the large circle edge is the 1.2 offset:
(Code adjusted to support ASV also).
As can be clearly seen, all colors currently between the white and black circles,
are missing from the original circle.
Second drawback is that the innermost ring is not really moving but instead, "stretching".
From the instance the center stop-color is set (periodically), it is fixed, thus the center
gradient-ring is only stretching to its final offset-gap size, and only then, start to really move.
Same is happening also with the outer ring (shrinking instead of stretching) but is clipped.
To avoid those two drawbacks In the following demo, I set two fixed-offset boundary stops
at 0 and 1 offsets. Rest of the stops are exactly like in your code - fixed color and offset
The color of the two boundary stops is the same on both and continuously changing,
calculated by interpolating between the first and last inner-stops colors (inner-stops are
the non-boundary stops), based on the distance of the first inner-stop from the center.
The result is that at any given instance, the combined edge and center gradient-rings
complement each other to form a full offset-gap gradient, thus mimic the movement
of that gradient from the edge to the center.
Chaals, I think your code is very nice and could present a skeleton for a SMIL solution
had you only adopt your own advice to Jake - push a copy of first stop to be the last :)
As for your request
>>>...adjust it to make everything seem beautiful...as your code actually works (with an extra stop) I guess by "beautiful" you mean
finer granularity, which is the goal of the following demo based on your suggestion:
My personal take on the SMIL is much like Chaals suggestion, but instead of manipulating
color-values while keeping a single begin-time, I keep a single colors-vector (thus, simple)
and manipulate the begin-times:
Seems to me like the last two demos are ok as proof-of-concept, but not really practical.
I would love to see a SMIL solution which does not involve so many tags
(hopefully no one think I actually hard-code those tags :) )
Cannot do without playing, I hope you like these two:
And a pronounced optical illusion every time animation is paused (or maybe it's just me?):
In all the demos, you can click anywhere to toggle the animation.
Thanks for your time