[英]Animating an image sprite using jQuery Animate in steps?
I am attempting to code an image sprite using jQuery and am wondering if it's possible to animate in steps instead of linear. 我正在尝试使用jQuery编写图像精灵,并且想知道是否可以逐步而不是线性地进行动画处理。 Basically, I attempted using CSS3 animations, but IE9 is a requirement and I could not get the CSS3 animations to function correctly in IE.
基本上,我尝试使用CSS3动画,但是IE9是必需的,并且我无法使CSS3动画在IE中正常运行。
I have a sprite which has 12 frames, each frame being 280px X 280px. 我有一个精灵,它有12个帧,每个帧为280px X 280px。 I would like to use jQuery to animate the sprite on mouseover and mouseout in steps instead of sliding the background image in a linear fashion.
我想使用jQuery在mouseover和mouseout上分步设置精灵动画,而不是以线性方式滑动背景图像。
Here is my current code: 这是我当前的代码:
<div class="window"></div>
CSS: CSS:
.window {
width: 280px;
height: 280px;
background: url("http://s27.postimg.org/neu6mvztf/single_hung_door.png");
}
JS: JS:
$(".window").hover(
function () {
$(this).animate({
'background-position-x': '0',
'background-position-y': '-3080px'
}, 1500, 'linear');
},
function () {
$(this).animate({
'background-position-x': '0',
'background-position-y': '0'
}, 1500, 'linear');
}
);
JSFiddle with sample of desired effect JSFiddle具有所需效果的样本
Would it be possible to accomplish this in this way? 这样可以做到吗? Thanks!
谢谢!
您可以使用名为velocity.js的库进行此操作。您可以在此处查看操作方法: http ://css-tricks.com/clever-uses-step-easing/
It isn't the most elegant code, but basically, I think you need an animating loop running continuously that only shifts the frame animation by one frame every x milliseconds. 它不是最优雅的代码,但基本上,我认为您需要一个连续运行的动画循环,该动画循环仅每x毫秒将帧动画移动一帧。 The fiddle you had continuously animates the whole strip in a linear fashion.
您演奏过的小提琴不断以线性方式对整个条带进行动画处理。 Forked jsFiddle link below.
下面的分叉jsFiddle链接。
var currentY = 0;
var isAnimating = false;
var $window = $('.window');
var windowWidth = 280;
var frameRateMs = 60;
function updateWindow() {
if (isAnimating) {
$window.css({'background-position-y': currentY + 'px'});
currentY -= windowWidth;
if (currentY == -3080) {
windowWidth = -280;
} else if (currentY == 0) {
windowWidth = 280;
}
}
setTimeout(updateWindow, frameRateMs);
}
$window.hover(function() {
isAnimating = true;
}, function() {
isAnimating = false;
});
updateWindow();
http://jsfiddle.net/64nu4h4w/10/ http://jsfiddle.net/64nu4h4w/10/
Keeping your code structure, I created a .animateSteps()
function: 保持您的代码结构,我创建了一个
.animateSteps()
函数:
$(".window").hover(
function () {
$(".window").animateSteps(280,-280,20);
},
function () {
$(".window").animateSteps(3080,280,20);
}
);
$.fn.animateSteps = function(final,step,duration) {
if(typeof t != "undefined") clearTimeout(t);
var self = $(this);
if(parseInt(self.css('background-position-y'))==final) return;
self.css('background-position-y', '+='+step+'px');
t=setTimeout(function(){self.animateSteps(final,step,duration);},duration);
}
It takes 3 parameters: 它包含3个参数:
final
: the final position in pixels final
:最终位置(以像素为单位)
step
: the number of pixels to increment at each step step
:每步要增加的像素数
duration
: the duration between 2 iterations duration
:2次迭代之间的持续时间
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.