fx.CssSpriteAnimation Extends goog.fx.Animation
This animation class is used to animate a CSS sprite (moving a background image). This moves through a series of images in a single image sprite and loops the animation when done. You should set up the background-image and size in a CSS rule for the relevant element.

Inheritance

Constructor

goog.fx.CssSpriteAnimation(elementsizeboxtimeopt_acc)

Parameters

element : Element
The HTML element to animate the background for.
size : goog.math.Size
The size of one image in the image sprite.
box : goog.math.Box
The box describing the layout of the sprites to use in the large image. The sprites can be position horizontally or vertically and using a box here allows the implementation to know which way to go.
time : number
The duration in milliseconds for one iteration of the animation. For example, if the sprite contains 4 images and the duration is set to 400ms then each sprite will be displayed for 100ms.
opt_acc : function(number) : number=
Acceleration function, returns 0-1 for inputs 0-1. This can be used to make certain frames be shown for a longer period of time.

Instance Methods

Public Protected Private
clearSpritePosition()
Clears the background position style set directly on the element by the animation. Allows to apply CSS styling for background position on the same element when the sprite animation is not runniing.
code »
disposeInternal()
No description.
code »
onAnimate()
No description.
code »
onFinish()
No description.
code »
cycle(now)
Handles the actual iteration of the animation in a timeout
Arguments:
now : number
The current time.
code »
destroy()
Use dispose() instead. Stops an animation, fires a 'destroy' event and then removes all the event handlers to clean up memory.
code »
dispatchAnimationEvent()
No description.
code »
disposeInternal()
Disposes of the animation. Stops an animation, fires a 'destroy' event and then removes all the event handlers to clean up memory.
code »
enableRightPositioningForRtl(useRightPositioningForRtl)
Sets whether the animation should use "right" rather than "left" to position elements. This is a temporary flag to allow clients to transition to the new component at their convenience. At some point "right" will be used for RTL elements by default.
Arguments:
useRightPositioningForRtl : boolean
True if "right" should be used for positioning, false if "left" should be used for positioning.
code »
getProgress() number
No description.
Returns: number  The current progress of the animation, the number is between 0 and 1 inclusive.
code »
isRightPositioningForRtlEnabled() boolean
Whether the animation should use "right" rather than "left" to position elements. This is a temporary flag to allow clients to transition to the new component at their convenience. At some point "right" will be used for RTL elements by default.
Returns: boolean  True if "right" should be used for positioning, false if "left" should be used for positioning.
code »
onAnimate()
Dispatches the ANIMATE event. Sub classes should override this instead of listening to the event.
code »
onAnimationFrame()
No description.
code »
onDestroy()
Dispatches the DESTROY event. Sub classes should override this instead of listening to the event.
code »
pause()
Pauses the animation (iff it's playing).
code »
play(opt_restart) boolean
Starts or resumes an animation.
Arguments:
opt_restart : boolean=
Whether to restart the animation from the beginning if it has been paused.
Returns: boolean  Whether animation was started.
code »
setProgress(progress)
Sets the progress of the animation.
Arguments:
progress : number
The new progress of the animation.
code »
stop(opt_gotoEnd)
Stops the animation.
Arguments:
opt_gotoEnd : boolean=
If true the animation will move to the end coords.
code »
updateCoords_(t)
Calculates current coordinates, based on the current state. Applies the accelleration function if it exists.
Arguments:
t : number
Percentage of the way through the animation as a decimal.
code »
dispatchAnimationEvent(type)
Dispatches an event object for the current animation.
Arguments:
type : string
Event type that will be dispatched.
code »
getStateInternal() goog.fx.TransitionBase.State
Returns the current state of the animation.
Returns: goog.fx.TransitionBase.State  State of the animation.
code »
isPaused() boolean
No description.
Returns: boolean  True iff the current state of the animation is paused.
code »
isPlaying() boolean
No description.
Returns: boolean  True iff the current state of the animation is playing.
code »
isStopped() boolean
No description.
Returns: boolean  True iff the current state of the animation is stopped.
code »
onBegin()
Dispatches the BEGIN event. Sub classes should override this instead of listening to the event, and call this instead of dispatching the event.
code »
onEnd()
Dispatches the END event. Sub classes should override this instead of listening to the event, and call this instead of dispatching the event.
code »
onFinish()
Dispatches the FINISH event. Sub classes should override this instead of listening to the event, and call this instead of dispatching the event.
code »
onPause()
Dispatches the PAUSE event. Sub classes should override this instead of listening to the event, and call this instead of dispatching the event.
code »
onPlay()
Dispatches the PLAY event. Sub classes should override this instead of listening to the event, and call this instead of dispatching the event.
code »
onResume()
Dispatches the RESUME event. Sub classes should override this instead of listening to the event, and call this instead of dispatching the event.
code »
onStop()
Dispatches the STOP event. Sub classes should override this instead of listening to the event, and call this instead of dispatching the event.
code »
play(opt_restart) boolean
Plays the animation.
Arguments:
opt_restart : boolean=
Optional parameter to restart the animation.
Returns: boolean  True iff the animation was started.
code »
setStatePaused()
Sets the current state of the animation to paused.
code »
setStatePlaying()
Sets the current state of the animation to playing.
code »
setStateStopped()
Sets the current state of the animation to stopped.
code »
stop(opt_gotoEnd)
Stops the animation.
Arguments:
opt_gotoEnd : boolean=
Optional boolean parameter to go the the end of the animation.
code »
addEventListener(typeopt_captureopt_handlerScope)
Use #listen instead, when possible. Otherwise, use goog.events.listen if you are passing Object (instead of Function) as handler. Adds an event listener to the event target. The same handler can only be added once per the type. Even if you add the same handler multiple times using the same type then it will only be called once when the event is dispatched.
Arguments:
type : string
The type of the event to listen for.
: ?function():? | ?{handleEvent:function():?
No description.
opt_capture : boolean=
In DOM-compliant browsers, this determines whether the listener is fired during the capture or bubble phase of the event.
opt_handlerScope : Object=
Object in whose scope to call the listener.
code »
assertInitialized_()
Asserts that the event target instance is initialized properly.
code »
dispatchEvent()
No description.
code »
disposeInternal()
Removes listeners from this object. Classes that extend EventTarget may need to override this method in order to remove references to DOM Elements and additional listeners.
code »
fireListeners()
No description.
code »
getListener()
No description.
code »
getListeners()
No description.
code »
getParentEventTarget() goog.events.EventTarget
Returns the parent of this event target to use for bubbling.
Returns: goog.events.EventTarget  The parent EventTarget or null if there is no parent.
code »
hasListener()
No description.
code »
listen()
No description.
code »
listenOnce()
No description.
code »
removeAllListeners()
No description.
code »
removeEventListener(typeopt_captureopt_handlerScope)
Use #unlisten instead, when possible. Otherwise, use goog.events.unlisten if you are passing Object (instead of Function) as handler. Removes an event listener from the event target. The handler must be the same object as the one added. If the handler has not been added then nothing is done.
Arguments:
type : string
The type of the event to listen for.
: ?function():? | ?{handleEvent:function():?
No description.
opt_capture : boolean=
In DOM-compliant browsers, this determines whether the listener is fired during the capture or bubble phase of the event.
opt_handlerScope : Object=
Object in whose scope to call the listener.
code »
setParentEventTarget(parent)
Sets the parent of this event target to use for capture/bubble mechanism.
Arguments:
parent : goog.events.EventTarget
Parent listenable (null if none).
code »
setTargetForTesting(target)
Sets the target to be used for event.target when firing event. Mainly used for testing. For example, see goog.testing.events.mixinListenable.
Arguments:
target : !Object
The target.
code »
unlisten()
No description.
code »
unlistenByKey()
No description.
code »
addOnDisposeCallback(callbackopt_scope)
Invokes a callback function when this object is disposed. Callbacks are invoked in the order in which they were added.
Arguments:
callback : function(this:T):?
The callback function.
opt_scope : T=
An optional scope to call the callback in.
code »
dispose() void
Disposes of the object. If the object hasn't already been disposed of, calls #disposeInternal. Classes that extend goog.Disposable should override #disposeInternal in order to delete references to COM objects, DOM nodes, and other disposable objects. Reentrant.
Returns: void  Nothing.
code »
disposeInternal()
Deletes or nulls out any references to COM objects, DOM nodes, or other disposable objects. Classes that extend goog.Disposable should override this method. Not reentrant. To avoid calling it twice, it must only be called from the subclass' disposeInternal method. Everywhere else the public dispose method must be used. For example:
  mypackage.MyClass = function() {
    mypackage.MyClass.base(this, 'constructor');
    // Constructor logic specific to MyClass.
    ...
  };
  goog.inherits(mypackage.MyClass, goog.Disposable);

  mypackage.MyClass.prototype.disposeInternal = function() {
    // Dispose logic specific to MyClass.
    ...
    // Call superclass's disposeInternal at the end of the subclass's, like
    // in C++, to avoid hard-to-catch issues.
    mypackage.MyClass.base(this, 'disposeInternal');
  };
code »
getDisposed() boolean
Use #isDisposed instead. No description.
Returns: boolean  Whether the object has been disposed of.
code »
isDisposed() boolean
No description.
Returns: boolean  Whether the object has been disposed of.
code »
registerDisposable(disposable)
Associates a disposable object with this object so that they will be disposed together.
Arguments:
disposable : goog.disposable.IDisposable
that will be disposed when this object is disposed.
code »

Instance Properties

constructor :
No description.
Code »
element_ :
HTML element that will be used in the animation.
Code »
size_ : goog.math.Size
The size of an individual sprite in the image sprite.
Code »
accel_ :
Acceleration function, which must return a number between 0 and 1 for inputs between 0 and 1.
Code »
constructor :
No description.
Code »
coords :
Current coordinate for animation.
Code »
duration :
Duration of animation in milliseconds.
Code »
endPoint :
End point.
Code »
fps_ :
Current frame rate.
Code »
lastFrame :
Timestamp for when last frame was run.
Code »
progress :
Percent of the way through the animation.
Code »
startPoint :
Start point.
Code »
useRightPositioningForRtl_ :
Whether the animation should use "right" rather than "left" to position elements in RTL. This is a temporary flag to allow clients to transition to the new behavior at their convenience. At some point it will be the default.
Code »
constructor :
No description.
Code »
endTime :
Timestamp for when the animation finished or was stopped.
Code »
pause :
Pauses the animation.
Code »
startTime :
Timestamp for when the animation was started.
Code »
state_ :
The internal state of the animation.
Code »
actualEventTarget_ : goog.events.EventTarget
The object to use for event.target. Useful when mixing in an EventTarget to another object.
Code »
constructor :
No description.
Code »
eventTargetListeners_ : goog.events.ListenerMap
Maps of event type to an array of listeners.
Code »
parentEventTarget_ : goog.events.EventTarget
Parent event target, used during event bubbling. TODO(user): Change this to goog.events.Listenable. This currently breaks people who expect getParentEventTarget to return goog.events.EventTarget.
Code »
creationStack :
If monitoring the goog.Disposable instances is enabled, stores the creation stack trace of the Disposable instance.
Code »
disposed_ :
Whether the object has been disposed of.
Code »
onDisposeCallbacks_ :
Callbacks to invoke when this object is disposed.
Code »

Static Properties

goog.fx.CssSpriteAnimation.superClass_ :
No description.
Code »

Package fx

Package Reference