使用JavaScript动画处理图像序列

Question

我有一个从不同角度拍摄对象图像的序列。我希望在用户拖动鼠标时虚拟旋转该对象，这一点我已经实现。

但我想要的是，当鼠标离开图像区域时，它会将图像序列动画返回到默认位置。

例如，我有30个JPEG，其中1.jpg是-180 °和30.jpg是180 °。当然，15.jpg是0 °的居中默认图像。

因此，如果用户一直旋转到（ - ）180 °它会在说3秒后旋转回0 °。但我希望动画尽可能平滑。我将如何去做这件事？

Answer 1

对于动画尽可能平滑，你应该使用CSS精灵，包括您的所有其他图像的图像，所以帧都将被动画启动时加载。

然后你只需要调用在给定时间内，根据您要如何顺利动画是一个函数，并改变你的形象的背景属性。或者，如果不使用精灵，请为其分配一个不同的src。

我想你应该选择的不低于25更高的帧速率意味着更多流畅的动画帧每秒的价值，但使用更多的CPU。

这是最基本的方法

function next_frame() { 

    frame += 1; 

    // start animation again from the start if last frame reached (optional) 
    if (frame == max_frames) { 
    frame = 0; 
    } 

    /* change either the class of your image (if you use sprites 
    and specified a class for each background position) or the 
    background position property directly. If not using sprites, 
    assign a different image src based on current frame. 
    */ 

    // call the function again 
    setTimeout(next_frame, 1000/25); // change 25 with your desired FPS value. 

} 

如果你想要的形象动画回来了，你只需要采用同样的方法，但与帧数倒退。