1
// Copyright 2008 The Closure Library Authors. All Rights Reserved.
2
//
3
// Licensed under the Apache License, Version 2.0 (the "License");
4
// you may not use this file except in compliance with the License.
5
// You may obtain a copy of the License at
6
//
7
//      http://www.apache.org/licenses/LICENSE-2.0
8
//
9
// Unless required by applicable law or agreed to in writing, software
10
// distributed under the License is distributed on an "AS-IS" BASIS,
11
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
// See the License for the specific language governing permissions and
13
// limitations under the License.
14

15
/**
16
 * @fileoverview An animation class that animates CSS sprites by changing the
17
 * CSS background-position.
18
 *
19
 * @author [email protected] (Erik Arvidsson)
20
 * @see ../demos/cssspriteanimation.html
21
 */
22

23
goog.provide('goog.fx.CssSpriteAnimation');
24

25
goog.require('goog.fx.Animation');
26

27

28

29
/**
30
 * This animation class is used to animate a CSS sprite (moving a background
31
 * image).  This moves through a series of images in a single image sprite. By
32
 * default, the animation loops when done.  Looping can be disabled by setting
33
 * {@code opt_disableLoop} and results in the animation stopping on the last
34
 * image in the image sprite.  You should set up the {@code background-image}
35
 * and size in a CSS rule for the relevant element.
36
 *
37
 * @param {Element} element The HTML element to animate the background for.
38
 * @param {goog.math.Size} size The size of one image in the image sprite.
39
 * @param {goog.math.Box} box The box describing the layout of the sprites to
40
 *     use in the large image.  The sprites can be position horizontally or
41
 *     vertically and using a box here allows the implementation to know which
42
 *     way to go.
43
 * @param {number} time The duration in milliseconds for one iteration of the
44
 *     animation.  For example, if the sprite contains 4 images and the duration
45
 *     is set to 400ms then each sprite will be displayed for 100ms.
46
 * @param {function(number) : number=} opt_acc Acceleration function,
47
 *    returns 0-1 for inputs 0-1.  This can be used to make certain frames be
48
 *    shown for a longer period of time.
49
 * @param {boolean=} opt_disableLoop Whether the animation should be halted
50
 *    after a single loop of the images in the sprite.
51
 *
52
 * @constructor
53
 * @struct
54
 * @extends {goog.fx.Animation}
55
 * @final
56
 */
57
goog.fx.CssSpriteAnimation = function(
58
    element, size, box, time, opt_acc, opt_disableLoop) {
59
  var start = [box.left, box.top];
60
  // We never draw for the end so we do not need to subtract for the size
61
  var end = [box.right, box.bottom];
62
  goog.fx.CssSpriteAnimation.base(
63
      this, 'constructor', start, end, time, opt_acc);
64

65
  /**
66
   * HTML element that will be used in the animation.
67
   * @type {Element}
68
   * @private
69
   */
70
  this.element_ = element;
71

72
  /**
73
   * The size of an individual sprite in the image sprite.
74
   * @type {goog.math.Size}
75
   * @private
76
   */
77
  this.size_ = size;
78

79
  /**
80
   * Whether the animation should be halted after a single loop of the images
81
   * in the sprite.
82
   * @type {boolean}
83
   * @private
84
   */
85
  this.disableLoop_ = !!opt_disableLoop;
86
};
87
goog.inherits(goog.fx.CssSpriteAnimation, goog.fx.Animation);
88

89

90
/** @override */
91
goog.fx.CssSpriteAnimation.prototype.onAnimate = function() {
92
  // Round to nearest sprite.
93
  var x = -Math.floor(this.coords[0] / this.size_.width) * this.size_.width;
94
  var y = -Math.floor(this.coords[1] / this.size_.height) * this.size_.height;
95
  this.element_.style.backgroundPosition = x + 'px ' + y + 'px';
96

97
  goog.fx.CssSpriteAnimation.base(this, 'onAnimate');
98
};
99

100

101
/** @override */
102
goog.fx.CssSpriteAnimation.prototype.onFinish = function() {
103
  if (!this.disableLoop_) {
104
    this.play(true);
105
  }
106
  goog.fx.CssSpriteAnimation.base(this, 'onFinish');
107
};
108

109

110
/**
111
 * Clears the background position style set directly on the element
112
 * by the animation. Allows to apply CSS styling for background position on the
113
 * same element when the sprite animation is not runniing.
114
 */
115
goog.fx.CssSpriteAnimation.prototype.clearSpritePosition = function() {
116
  var style = this.element_.style;
117
  style.backgroundPosition = '';
118

119
  if (typeof style.backgroundPositionX != 'undefined') {
120
    // IE needs to clear x and y to actually clear the position
121
    style.backgroundPositionX = '';
122
    style.backgroundPositionY = '';
123
  }
124
};
125

126

127
/** @override */
128
goog.fx.CssSpriteAnimation.prototype.disposeInternal = function() {
129
  goog.fx.CssSpriteAnimation.superClass_.disposeInternal.call(this);
130
  this.element_ = null;
131
};
132

133