My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
EffectSpiral  
Effect.Spiral and its usage.
Updated Mar 3, 2008 by dan.dor...@gmail.com

Introduction

Effect.Spiral, as its name suggests, is intended to be adpoted into the Scriptaculous family of events. Its closest relative is Effect.Move; indeed, Spiral is little more than a drunken variant of Move.

While Effect.Spiral is bundled with Pinwheel, it's also available separately in a file startlingly called spiral.js. (But you'll still need Scriptaculous.)

Details

I was serious about Spiral being quite similar to Move. An element is provided, a location is specified, and said element moves to that location--albeit in curving-about sort of way. I won't rehash the Move stuff here: check the Scriptaculous Effect.Move docs for that.

However, there are two options of which to be aware:

arc

Default: Math.PI / 2

The arc option specifies the width of the angle through which the spiral will travel, measured in radians.

Some useful radian values:

  • Math.PI / 4: a 45-degree angle
  • Math.PI / 2: a right angle (Effect.Spiral's default)
  • Math.PI: a 180-degree angle
  • 3 * Math.PI / 2: a 270-degree angle
  • 2 * Math.PI: a 360-degree angle

Angles larger than 2 * Math.PI are going to spin completely around more than once. It can rapidly start spiraling out of control (I'm sorry, I couldn't help it), but it can also look kinda cool.

For the folks who don't think in radians, there's a convenience method appended to the number class, toRadians. Called like so:

(45).toRadians(); // roughly 0.7853981633974483 (or pi / 4)

direction

Default: 'clockwise'

The direction option specifies the direction in which the spiral is going to twist. Valid options are 'counterclockwise' and 'clockwise' (the default). Actually, don't tell anyone this, but if you specify anything besides 'counterclockwise', you're gonna get 'clockwise'.

Powered by Google Project Hosting