使用 jQuery 编写图像动画（交换图像）

Posted 2023-02-19

【中文标题】使用 jQuery 编写图像动画（交换图像）

【英文标题】：Writing image animation (swap images) with jQuery

【发布时间】：2011-04-14 12:18:53

【问题描述】：

我正在尝试使用 jQuery 和计时器（http://jquery.offput.ca/every/ 用作计时器）任意为图像设置动画，以模拟动画 GIF，但允许在 html 文件中定义动画（或在重复使用相同的“动画”图像的页面顶部）。

我编写了一个固定框架的特定版本：以下代码将使用 /path/to/image/dir/frame1.png 和 /path 的“动画”类交换图像/to/image/dir/frame2.png 每 300 毫秒。

<script type="text/javascript" src="jquery.timers.js"></script>
<script type="text/javascript">
    ;(function($)
        $(function() 
            var base_path = "/path/to/image/dir/";
            var on = true;
            $(".animate").everyTime(200, function(i) 
                if(!on) 
                    $(this).attr(src: base_path + "frame1.png");
                 else 
                    $(this).attr(src: base_path + "frame2.png");
                
                    on = !on;
                );
            );
        )(jQuery);
</script>

我想做的是编写上述的通用形式，我可以在图像标签中放置以下内容

<img src="/path/to/fallback/image.png" class="animate interval:300, src:[frame1.png,frame2.png]"  />

并且脚本可以使用传递给类属性的参数来确定每帧的持续时间和源图像。最初我只想在两个图像之间交替，但理想情况下我想让 src 数组包含任意数量的图像，这些图像将无限循环（即不需要用户交互）。

有什么想法可以实现吗？我猜我需要对类属性进行某种形式的键值解析，这在语义上可能不正确，那么是否有另一个（有效但很少使用）属性可以用来存储动画属性？

【参考方案1】：

看起来你基本上想要做的是创建一个新的 jQuery 插件。

对于存储动画元数据，jQuery metadata plugin 已经可以满足您的需求，并且它确实支持非类存储位置。

这是一个plugin design pattern，其中包含有关集成元数据插件的说明。

我的建议是重做一些事情，以便使用该示例类属性，您可以使用简单的 $('img.animate').myAnimationPlugin(); 为当前页面中的所有案例启用动画（当然，使用更独特的名称）

【讨论】：

谢谢，这正是我想要的。数据集插件允许我使用 html5 数据属性，这对这种脚本更有用

【参考方案2】：

为什么不使用一些像这样的图像滑块插件：http://nivo.dev7studios.com/

您可以设置图片切换动画为淡入淡出。