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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
// 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. By
* default, the animation loops when done. Looping can be disabled by setting
* {@code opt_disableLoop} and results in the animation stopping on the last
* image in the image sprite. 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.
* @param {boolean=} opt_disableLoop Whether the animation should be halted
* after a single loop of the images in the sprite.
*
* @constructor
* @struct
* @extends {goog.fx.Animation}
* @final
*/
goog.fx.CssSpriteAnimation = function(
element, size, box, time, opt_acc, opt_disableLoop) {
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.fx.CssSpriteAnimation.base(
this, 'constructor', 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;
/**
* Whether the animation should be halted after a single loop of the images
* in the sprite.
* @type {boolean}
* @private
*/
this.disableLoop_ = !!opt_disableLoop;
};
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.fx.CssSpriteAnimation.base(this, 'onAnimate');
};
/** @override */
goog.fx.CssSpriteAnimation.prototype.onFinish = function() {
if (!this.disableLoop_) {
this.play(true);
}
goog.fx.CssSpriteAnimation.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;
};
|
