Well, I seem to have found a work around.. Instead of multiplying the
position by the number of colors, I divide the duration by the number
of colors, and then on the finish callback, I restart the effect, so
that it's always just doing an effect from one color to the other. It
seems to work fine this way.
-patrick
On Nov 14, 11:39 am, patrick <patrick99...@gmail.com> wrote:
> I've always noticed that occasionally when doing effects, the browser
> flickers or does funky stuff.. Yesterday I started writing my own
> visual effect using scriptaculous' engine, and I have been having a
> lot of problems.
>
> Basically what I am finding is that the animation loop's position
> variable is not a smooth transition from 0.0 to 1.0, and this has been
> the source of all my frustrations. See, what I am trying to do is
> cycle through an array of colors, transitioning from one to the next,
> and I was hoping I could just multiply the position variable by the
> number of colors in the array and then whenever a whole number is hit,
> it would change to the next color....
>
> This will not work.. Neither will simply doing a color check to see
> if the current color has reached it's color destination.. And it all
> comes back to the position variable being weird...
>
> I am doing basically new_pos = position - Math.floor(position), so
> that I can detect when the new_pos >= 1, then it should change to the
> new color.. However... If you look at my log when trying to change
> from ['#ff0000', '#00ff00', '#0000ff', '#ffff00']
>
> (position) ---------------------------(new_pos)
> ...etc...
> 0.8762930095412139 - 0.8762930095412139
> 0.9245239398860153 - 0.9245239398860153
> 0.9734630272614679 - 0.9734630272614679
> 1.0237947520904933 - 0.02379475209049331
> changing current_color to: #00ff00
> changing dest_color to: #0000ff
> 1.1224026769972542 - 0.12240267699725416
> changing current_color to: #0000ff
> changing dest_color to: #ffff00
> 1.2081348640123648 - 0.2081348640123648
> 1.2513958157578204 - 0.25139581575782044
> 1.3042107116699224 - 0.3042107116699224
> 1.3572737826319323 - 0.3572737826319323
> etc...
>
> Everything was perfect from red to green, and then from green to blue,
> it got one frame in, and then the position variable jumped up to
> something over 1, and it skipped to the next color.
>
> If I run the code again, it will not do the same thing though it will
> be inconsistent in some other way.
>
> ... can anyone shed some light on this problem, and how I can fix
> it???
>
> Here is my code...
>
> new Effect('blah', {sequence: ['#ff0000', '#00ff00', '#0000ff',
> '#ffff00'], duration: 3 })
>
> Effect.Glow = Class.create();
> Object.extend(Object.extend(Effect.Glow.prototype,
> Effect.Base.prototype), {
> initialize: function(element) {
> this.element = $(element);
>
> if (!this.element) {
> throw(Effect._elementDoesNotExistError);
> }
>
> var options = Object.extend({'css': 'color'},
> arguments[1] || {});
>
> this.start(options);
> },
>
> setup: function() {
> // Prevent executing on elements not in the layout
> flow
> if (this.element.getStyle('display') == 'none') {
> this.cancel();
> return;
> }
>
> // glow params to_glow can be either string or array
> of css styles
> this.to_glow = (typeof(this.options.css) == 'string')
> ?
> [ this.options.css.camelize() ] : this.options.css.map(function(e)
> { return e.camelize() });
>
> // store the original style values before changing
> them...
> this.original_style =
> Object.clone(this.element.style);
>
> this.multiple = this.options.sequence.length - 1;
> this.sequence_index = 0;
> this.setBaseDelta();
> },
>
> setBaseDelta: function() {
> this.frame_target = (this.totalFrames /
> this.options.sequence.length) * (this.sequence_index + 1);
> console.log('changing current_olor to: ' +
> this.options.sequence
> [this.sequence_index]);
> this.color =
> this.options.sequence[this.sequence_index].parseColor
> ();
> this.dest_color =
> this.options.sequence[this.sequence_index +=
> 1].parseColor();
> console.log('changing dest_color to: ' +
> this.options.sequence
> [this.sequence_index]);
>
> this._base = $R(0,2).map(function(i){
> return
> parseInt(this.color.parseColor().slice(i*2+1, i*2+3), 16);
> }.bind(this));
>
> this._delta = $R(0,2).map(function(i){
> return parseInt(this.dest_color.slice(i*2+1,
> i*2+3), 16) -
> this._base[i];
> }.bind(this));
> },
>
> update: function(position) {
>
> var new_pos = (position * this.multiple);
>
> if (this.sequence_index < this.multiple && new_pos >=
> 1) {
> this.setBaseDelta();
> }
> console.log(new_pos + ' - ' + (parseInt(new_pos)));
> new_pos = new_pos - parseInt(new_pos);
>
> var new_color = $R(0,2).inject('#',function(m,v,i) {
> var c = (this._base[i] + ((this._delta[i]) *
> (new_pos)).round())
> c = c < 0 ? 0 : c > 255 ? 255 : c;
> return m + c.toColorPart();
> }.bind(this));
>
> var new_style = {};
>
> this.to_glow.each(function(css) {
> new_style[css] = new_color;
> });
>
> this.element.setStyle(new_style)
> },
>
> finish: function() {
> console.log('done');
> var new_style = {};
>
> // remove the to_glow properties
> this.to_glow.each(function(css) {
> new_style[css] = '';
> });
>
> // get original styles if there were any...
> for (var i = 0; i <
> this.original_style.length; i++) {
> var camel_css =
> this.original_style[i].camelize();
> new_style[camel_css] =
> this.original_style[camel_css];
> }
>
> // restore original style and remove glow data
> this.element.setStyle(new_style);
> }
>
> });
>
> })();
>
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
