Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

#1 Gradually renamed to smooth

  • Loading branch information...
commit c6a1cc3f0611dbf568dc1a99a59f7056256ec122 1 parent 4280657
@piumosso piumosso authored
Showing with 15 additions and 366 deletions.
  1. +6 −6 README.md
  2. +9 −9 jquery.fc.tape.js
  3. +0 −351 tags/jquery.fc.tape-0.1.js
View
12 README.md
@@ -23,7 +23,7 @@ $('#element').tape(options);
## Options
-### gradually (boolean)
+### smooth (boolean)
Switch frames with smooth transition (next frame overlays previous with a small
transparent fade). Useful for animations with a small number of frames,
@@ -31,7 +31,7 @@ slow speed animations and for several effects.
```js
$('#tape').tape({
- gradually: false
+ smooth: false
});
```
@@ -78,10 +78,10 @@ Default: same as DOM element height.
### frameChangeDuration (integer)
-Duration of transition between frames in milliseconds for `gradually` mode,
+Duration of transition between frames in milliseconds for `smooth` mode,
for normal mode - number of milliseconds each frame is visible during animation.
-If `gradually` is set to `true`, you might experience slowdowns in animations
+If `smooth` is set to `true`, you might experience slowdowns in animations
when calling widget methods more frequently than `frameChangeDuration` as transitions
will take the same amount of time.
@@ -126,7 +126,7 @@ Options can be set up using corresponding `data-` attributes:
**Option** | **Data attribute** |
--------------------|----------------------------|
-gradually | data-gradually |
+smooth | data-smooth |
image | data-image |
frameCount | data-frame-count |
frameHeight | data-frame-height |
@@ -159,7 +159,7 @@ $('#tape').tape('windToPrev');
### windTo
-Wind to specific frame, skipping intermediate frames. If `gradually` is
+Wind to specific frame, skipping intermediate frames. If `smooth` is
set to `true` this transitions takes `frameChangeDuration` milliseconds.
```js
View
18 jquery.fc.tape.js
@@ -2,7 +2,7 @@
* Sprite animation widget
* http://futurecolors.github.com/fc.tape/
*
- * @version 0.1
+ * @version 0.2
* @author Artem Golikov, Future Colors <art@futurecolors.ru>
*
* @requires jQuery, jQuery UI (core and widget)
@@ -12,7 +12,7 @@ $.widget('fc.tape', {
* Settings
*/
options: {
- gradually: null,
+ smooth: null,
image: null,
frameCount: null,
frameHeight: null,
@@ -47,7 +47,7 @@ $.widget('fc.tape', {
_init: function(){
this._initOptionFromData('frameCount', 0, parseInt);
this._initOptionFromData('frameChangeDuration', 50, parseInt);
- this._initOptionFromData('gradually', true);
+ this._initOptionFromData('smooth', true);
this._initOptionFromData('frameHeight', 0, parseInt);
this._initOptionFromData('image', false);
this._initOptionFromData('preload', true);
@@ -67,7 +67,7 @@ $.widget('fc.tape', {
this.element.css('position', 'relative');
}
- if (this.options.gradually) {
+ if (this.options.smooth) {
this.nextFrame = $(this.nextFrameHtml)
.css('backgroundImage', this.options.image)
.appendTo(this.element);
@@ -196,7 +196,7 @@ $.widget('fc.tape', {
return;
}
}
- if (this.options.gradually) {
+ if (this.options.smooth) {
for (; (targetPosition - this.position) * positionStep >= 0; this.position += positionStep) {
if (targetPosition == this.position && typeof callback == 'function') {
@@ -265,16 +265,16 @@ $.widget('fc.tape', {
var clientX = 0;
var isActive = false;
var that = this;
- var initialGradually = this.options.gradually;
+ var initialSmooth = this.options.smooth;
options.element
.bind('mousedown.rotate', function(){
isActive = true;
- that.options.gradually = false;
+ that.options.smooth = false;
})
.bind('mouseup.rotate mouseleave.rotate', function(){
isActive = false;
- that.options.gradually = initialGradually;
+ that.options.smooth = initialSmooth;
})
.bind('mousemove.rotate', function(e){
if (isActive && that.isLoaded) {
@@ -324,7 +324,7 @@ $.widget('fc.tape', {
}
var nextFrameBackgroundPosition = this.options.backgroundX + 'px -' + (this.position * this.options.frameHeight) + 'px';
- if (this.options.gradually) {
+ if (this.options.smooth) {
var $element = this.element;
var $nextFrame = this.nextFrame;
var duration = this.options.frameChangeDuration;
View
351 tags/jquery.fc.tape-0.1.js
@@ -1,351 +0,0 @@
-/**
- * Sprite animation widget
- * http://futurecolors.github.com/fc.tape/
- *
- * @version 0.1
- * @author Artem Golikov, Future Colors <art@futurecolors.ru>
- *
- * @requires jQuery, jQuery UI (core and widget)
- */
-$.widget('fc.tape', {
- /**
- * Settings
- */
- options: {
- gradually: null,
- image: null,
- frameCount: null,
- frameHeight: null,
- frameChangeDuration: null,
- backgroundX: 0,
- preload: true
- },
-
- /**
- * Dom element, holding next frame, needed for animation smoothness
- */
- nextFrame: null,
-
- /**
- * Html for next frame, needed for animation smoothness
- */
- nextFrameHtml: '<div style="position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%"/>',
-
- /**
- * Current frame number
- */
- position: 0,
-
- /**
- * Current frame number
- */
- isLoaded: false,
-
- /**
- * Widget initialization
- */
- _init: function(){
- this._initOptionFromData('frameCount', 0, parseInt);
- this._initOptionFromData('frameChangeDuration', 50, parseInt);
- this._initOptionFromData('gradually', true);
- this._initOptionFromData('frameHeight', 0, parseInt);
- this._initOptionFromData('image', false);
- this._initOptionFromData('preload', true);
-
- this._preload();
- if (!this.options.image) {
- this.options.image = this.element.css('backgroundImage');
- } else {
- this.options.image = 'url("' + this.options.image + '")';
- }
- if (this.element.css('backgroundImage') == 'none' && this.isLoaded) {
- this.element.css('background', 'url(' + this.options.image + ') ' +
- this.options.backgroundX + 'px 0px no-repeat');
- }
-
- if (this.element.css('position') == 'static') {
- this.element.css('position', 'relative');
- }
-
- if (this.options.gradually) {
- this.nextFrame = $(this.nextFrameHtml)
- .css('backgroundImage', this.options.image)
- .appendTo(this.element);
- }
-
- if (!this.options.frameHeight) {
- this.options.frameHeight = this.element.height();
- }
- },
-
- /**
- * Preload image
- */
- _preload: function(){
- if (!this.options.preload) {
- this.isLoaded = true;
- } else {
- // Preload image
- var that = this;
- var imageSrcMatch = /url\((.+?)\)/g.exec(this.options.image);
- var imageSrc = imageSrcMatch ? imageSrcMatch[1] : this.options.image;
-
- var $preloader = $('<img src=' + imageSrc + ' />').load(function(){
- that.isLoaded = true;
- that.element
- .css('background', that.options.image + ' ' + that.options.backgroundX + 'px 0px no-repeat')
- .trigger('tape-loaded');
- });
-
- $preloader
- .appendTo('<div style="display: none"></div>')
- .parent()
- .appendTo('body');
- }
- },
-
- /**
- * Set options on the fly
- */
- setOptions: function(options) {
- $.extend(this.options, options);
- },
-
- /**
- * Get option value
- */
- getOption: function(optionName) {
- return this.options[optionName];
- },
-
- /**
- * Initialize widget from html data-* attributes
- */
- _initOptionFromData: function(optionName, defaultValue, filterFunction) {
- if (this.options[optionName] === null) {
- var value = this.element.data(optionName);
-
- if (typeof value == 'boolean') {
- this.options[optionName] = value;
- } else {
- if (value) {
- var filtredValue = filterFunction ? filterFunction(value) : value;
- this.options[optionName] = filtredValue || defaultValue;
- } else {
- this.options[optionName] = defaultValue;
- }
- }
- }
- },
-
- /**
- * Show next animation frame
- */
- windToNext: function(){
- this.position++;
- if (this.position >= this.options.frameCount) {
- this.position = 0;
- }
- this._changeFrame();
- },
-
- /**
- * Show previous animation frame
- */
- windToPrev: function(){
- this.position--;
- if (this.position < 0) {
- this.position = this.options.frameCount - 1;
- }
- this._changeFrame();
- },
-
- /**
- * Skip animation frames and show specific frame instantly
- *
- * @param integer/float position Frame number
- * @param boolean inRelative If isRelative is true, position is part of frames length (<1)
- *
- *
- */
- windTo: function(position, isRelative) {
- this.position = this._calculatePosition(position, isRelative);
- this._changeFrame();
- },
-
- /**
- * Animate sprite to specific frame
- *
- * @param integer/float position Frame number
- * @param boolean inRelative If isRelative is true, position is part of frames length (<1)
- * @param function callback
- *
- */
- stepInTo: function(position, isRelative, callback) {
- var targetPosition = this._calculatePosition(position, isRelative);
- var positionStep;
- if (targetPosition > this.position) {
- positionStep = 1;
- } else {
- if (targetPosition < this.position) {
- positionStep = -1;
- } else {
- if (typeof callback == 'function') {
- callback();
- }
- return;
- }
- }
- if (this.options.gradually) {
- for (; (targetPosition - this.position) * positionStep >= 0; this.position += positionStep) {
-
- if (targetPosition == this.position && typeof callback == 'function') {
- // callback is triggered after last frame is reached
- this._changeFrame(callback);
- } else {
- this._changeFrame();
- }
- }
- } else {
- var that = this;
- var timeout;
- timeout = window.setInterval(function(){
- that.position += positionStep;
- that._changeFrame();
- if (that.position * positionStep >= targetPosition * positionStep) {
- clearTimeout(timeout);
- if (typeof callback == 'function') {
- callback();
- }
- }
- }, this.options.frameChangeDuration);
- }
- },
-
- /**
- * Set frame with no animation
- */
- setPosition: function(position){
- if (!this.isLoaded) {
- return;
- }
-
- if (position < 0) {
- this.position = 0;
- } else {
- if (position < this.options.frameCount) {
- this.position = position;
- } else {
- this.position = this.options.frameCount;
- }
- }
- var nextFrameBackgroundPosition = this.options.backgroundX + 'px -' + (this.position * this.options.frameHeight) + 'px';
- this.element.css('backgroundPosition', nextFrameBackgroundPosition);
- this.element.css('backgroundImage', this.options.image);
- },
-
- /**
- * Apply rotation behavior
- *
- * @param object/string options Options for rotation
- */
- rotate: function(options){
- options = $.extend({
- element: this.element,
- deltaX: 1,
- destroy: false,
- direction: 1
- }, options);
-
- if (options.destroy) {
- options.element.unbind('.rotate');
- return;
- }
-
- var clientX = 0;
- var isActive = false;
- var that = this;
- var initialGradually = this.options.gradually;
-
- options.element
- .bind('mousedown.rotate', function(){
- isActive = true;
- that.options.gradually = false;
- })
- .bind('mouseup.rotate mouseleave.rotate', function(){
- isActive = false;
- that.options.gradually = initialGradually;
- })
- .bind('mousemove.rotate', function(e){
- if (isActive && that.isLoaded) {
- if (e.clientX > clientX + options.deltaX) {
- if (options.direction > 0) {
- that.windToNext();
- } else {
- that.windToPrev();
- }
- clientX = e.clientX;
- }
- if (e.clientX < clientX - options.deltaX) {
- if (options.direction > 0) {
- that.windToPrev();
- } else {
- that.windToNext();
- }
- clientX = e.clientX;
- }
- }
- });
- },
-
- /**
- * Get int framenumber
- *
- * @param integer/float position Frame number
- * @param boolean inRelative If isRelative is true, position is part of frames length (<1)
- * @return integer
- */
- _calculatePosition: function(position, isRelative) {
- if (isRelative) {
- return Math.floor(this.options.frameCount * position)
- } else {
- return (position >= this.options.frameCount) ? 0 : position;
- }
- },
-
- /**
- * Change frame
- *
- * @param callback
- */
- _changeFrame: function(callback) {
- if (!this.isLoaded) {
- return;
- }
-
- var nextFrameBackgroundPosition = this.options.backgroundX + 'px -' + (this.position * this.options.frameHeight) + 'px';
- if (this.options.gradually) {
- var $element = this.element;
- var $nextFrame = this.nextFrame;
- var duration = this.options.frameChangeDuration;
- $element.queue(function(next){
- $nextFrame
- .css('backgroundPosition', nextFrameBackgroundPosition)
- .fadeIn(duration, 'linear', function(){
- $element.css('backgroundPosition', nextFrameBackgroundPosition);
- $(this).hide();
- next();
- if (typeof callback == 'function') {
- callback();
- }
- });
- });
- } else {
- this.element
- .css('backgroundPosition', nextFrameBackgroundPosition);
- if (typeof callback == 'function') {
- callback();
- }
- }
- }
-});
Please sign in to comment.
Something went wrong with that request. Please try again.