jQuery插件：螺旋动画

Posted 2021-02-25

A jQuery plugin that adds the .spiral() method, wich moves an element along an archimedean spiral path.

/*
 *  Spiral [v1.1]
 *  Distributed under the Do-wathever-the-hell-you-want-with-it License
 *
 *  Web site:	http://claudiobonifazi.com
 *  Blog:	http://claudiobonifazi.com?p=4
 *  Email:	[email protected]
 *  Twitter:	@ClaudioBonifazi
 */
 
 
 
/*
	Options = {
		Radius:	numeric (pixels), horizontal distance between starting and final points;
		Duration: number of milliseconds (as for animate) ;
		Easing:	the number of cicles - if it is higher than 2 it will make more turns and will assume a 'bouncing' deceleration effect
		Queue:	boolean (as for animate) ;
		Ydirection: boolean. If true, the rotation starts going up instead of down.
		Xdirection: boolean. If true the movement will be from left to the right, instead of right to left.
		InsideOut: boolean. If true, the object will whirl out from the inside of the spiral. Note that setting it to true changes the sense of Xdirection ;
	},
	Callback = function called when the animation ends (as for animate) ;
*/
(function($){
	$.fn.spiral = function( Options, Callback ){
		/*-- Input filtering --*/
		Opt= {
			Radius:		150,
			Duration:	100,
			Easing:		2,
			Queue:		false,
			Xdirection:	false,
			Ydirection:	false,
			InsideOut:	false
		}
		$.extend(Opt,Options)
		if(!Callback)
			Callback= function(){return};
		/*-- Animation starts --*/
		return this.each(function(){
			var elem=$(this),
				start_l=parseInt(elem.css('margin-left')),
				start_t=parseInt(elem.css('margin-top')),
				start_z=elem.css('z-index');
			elem
			.animate({'z-index':start_z},{
				duration: Opt.Duration,
				complete: Callback,
				step:function(now,fx){
					fgamma = Opt.InsideOut ? Opt.Radius*(1+fx.pos) : Opt.Radius*(1-fx.pos);
					gamma=fx.pos*Opt.Easing*Math.PI;
					gamma=(Opt.Ydirection) ? -gamma : gamma;
					x=(Opt.Xdirection) ? (start_l+Opt.Radius-fgamma*Math.cos(gamma))+'px' : (start_l-Opt.Radius+fgamma*Math.cos(gamma))+'px';
					y=(start_t+fgamma*Math.sin(gamma))+'px';
					$(fx.elem).css({'margin-left':x,'margin-top':y})
				},
				queue: Opt.Queue
			})
		})
	}
})(jQuery)