使用JQuery从PSD图层创建动画帧

Question

我有一个包含许多层的PSD文件，这些层是动画的帧。如何使用JQuery/JavaScript从中创建动画？

我是否需要将每个图层保存为单独的图像？是否有一种方法可以使一个图像具有多个层并进行动画处理？澄清一下，我不想移动实际图像，我只想显示不同的层，就好像它们是动画的帧一样。在JavaScript中，这通常是如何完成的？

谢谢！

- KrazyKiddo8

---

每帧单独的图像和JavaScript计时器是我所了解的。为什么不将这些帧转换为gif呢？我知道这不是你的问题。只是好奇而已。 - Onimusha

Answer 1

这是一个演示JavaScript计时器+单独图像方法的代码片段。

代码片段：http://jsfiddle.net/ZVFu8/2/ 基本思路是创建一个包含图像名称的数组。

var img_name_arr = [];
var img_name_root = "anim-";
var img_name_ext = ".gif";
var num_images = 12;

// init arr of img names assuming frames are named [root]+i+[extension]
for (i = 0; i<=num_images; i++) {
    img_name_arr.push(img_name_root + i + img_name_ext);
}    

关于动画，使用 setInterval()。在 JavaScript 中，间隔定期执行。您可以指定要执行的代码和应该运行代码的间隔（以毫秒为单位）。

每次调用间隔时，您可以通过将图像标记的“src”属性设置为 image_name 数组中的下一个索引来显示新图像。

// Create an interval, and save a handle to the interval so it can be stopped later
anim_interval = setInterval(function() {
    $("#player").attr("src", s + img_name_arr[(anim_frame++ % num_images)+1] );
}, frame_interval);

根据动画的长度和每个图像文件的大小，可能需要通过预加载这些图像来进行优化。在动画开始之前，您可以为每个图像创建一个img标签并将其隐藏。然后，您不会更改“src”属性以更改图像，而是实际上会隐藏当前图像并在先前图像的位置上取消隐藏下一个图像。

如果您希望在本地运行此代码，请使用以下完整代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<a id="anim_control" href="">Start</a>
<img id="player" src="" />


<script>
var s = "http://" + atob("YmVucmlkb3V0LmNvbQ==") + "/";
var img_name_arr = [];
var img_name_root = "anim-";
var img_name_ext = ".gif";
var num_images = 12;

var framerate = 1; // Desired frames per second
var frame_interval = 1000/framerate;


$(function(){
    // Document is ready
    // init arr of img names
    for (i = 0; i <= num_images; i++) {
        img_name_arr.push(img_name_root + i + img_name_ext);
    }


    var anim_interval = null;
    var playing = false;
    var anim_frame = 0;

    // Define an interval that will execute every [frame_interval] milliseconds
    $("#anim_control").on("click", function(e) {
        e.preventDefault();
        if (playing == true) {
            playing = false;
            $(this).html("Start");
            clearInterval(anim_interval);
        } else {
            playing = true;
            $(this).html("Stop");
            anim_interval = setInterval(function() {
                //console.log(s + img_name_arr[(anim_frame++ % num_images)+1]);
                $("#player").attr("src", s + img_name_arr[(anim_frame++ % num_images)+1] );
            }, frame_interval);
        }
    });
});
</script>

<style>
#player {
    width: 320px;
    height: 240px;
    border: 1px solid #000;
}
</style>

- gooberverse