Question

我一直在使用Adobe Edge Animate创建基本上是网站介绍的内容。但我真的很想尝试自己编写代码。而且，为此，我有一个问题。

我如何根据数组串联多个动画？

以下是我的想法： 1.数组保存每个图像的名称。我想在屏幕上动画每个图像，一次一个。 3.每张图像在完成之前都会动画一次。

我知道如何使用animationEnd事件。我的想法是，基本上，我会将一个孩子附加到一个容器div，给它分配一个带动画的类，使用animationEnd来知道它什么时候完成，那时我想要转到下一张图片。

但是当我需要等待animationEnd触发时，我怎样才能遍历每个图像？有任何想法吗？有没有人知道一个涉及这个问题的好教程？

我很感激任何指导！我并没有要求你给我写很多代码，而只是解释我在等待animationEnd时循环的方式。我认为这就是我困在脑子里的地方。

Answer 1

你应该使用所谓的“循环函数”，这是一个多次调用自身的函数。它通常很像循环，但对于异步事物（如animationEnd事件），它通常是最简单的方法。

您案例中的用法示例如下：

var imgs=[/*images here*/];
function nextAnimation(curInd){
    var thisImg=imgs[curInd];
    //create the image element, trigger the animation, etc here
    //put the img element itself into a variable named imgElt, then:
    imgElt.addEventListener('animationEnd',function(){
        //only call the function again if this isn't the last item in the array
        if(curInd+1!=imgs.length)
            nextAnimation(curInd+1);
    },false);
}
nextAnimation(0);

阅读几遍，你应该在一段时间后理解它。还可以在线查看其他一些循环函数的例子，如果你之前没有做过太多的编程，有时候掌握一个棘手的概念

多个动画之间的CSS动画进展

1 个答案: