1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
// Copyright 2008 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/**
* @fileoverview An animation class that animates CSS sprites by changing the
* CSS background-position.
*
* @author arv@google.com (Erik Arvidsson)
* @see ../demos/cssspriteanimation.html
*/
goog.provide('goog.fx.CssSpriteAnimation');
goog.require('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
* {@code background-image} and size in a CSS rule for the relevant element.
*
* @param {Element} element The HTML element to animate the background for.
* @param {goog.math.Size} size The size of one image in the image sprite.
* @param {goog.math.Box} 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.
* @param {number} time 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.
* @param {function(number) : number=} opt_acc 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.
*
* @constructor
* @extends {goog.fx.Animation}
*/
goog.fx.CssSpriteAnimation = function(element, size, box, time, opt_acc) {
var start = [box.left, box.top];
// We never draw for the end so we do not need to subtract for the size
var end = [box.right, box.bottom];
goog.base(this, start, end, time, opt_acc);
/**
* HTML element that will be used in the animation.
* @type {Element}
* @private
*/
this.element_ = element;
/**
* The size of an individual sprite in the image sprite.
* @type {goog.math.Size}
* @private
*/
this.size_ = size;
};
goog.inherits(goog.fx.CssSpriteAnimation, goog.fx.Animation);
/** @override */
goog.fx.CssSpriteAnimation.prototype.onAnimate = function() {
// Round to nearest sprite.
var x = -Math.floor(this.coords[0] / this.size_.width) * this.size_.width;
var y = -Math.floor(this.coords[1] / this.size_.height) * this.size_.height;
this.element_.style.backgroundPosition = x + 'px ' + y + 'px';
goog.base(this, 'onAnimate');
};
/** @override */
goog.fx.CssSpriteAnimation.prototype.onFinish = function() {
this.play(true);
goog.base(this, 'onFinish');
};
/**
* 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.
*/
goog.fx.CssSpriteAnimation.prototype.clearSpritePosition = function() {
var style = this.element_.style;
style.backgroundPosition = '';
if (typeof style.backgroundPositionX != 'undefined') {
// IE needs to clear x and y to actually clear the position
style.backgroundPositionX = '';
style.backgroundPositionY = '';
}
};
/** @override */
goog.fx.CssSpriteAnimation.prototype.disposeInternal = function() {
goog.fx.CssSpriteAnimation.superClass_.disposeInternal.call(this);
this.element_ = null;
};
|
