【问题标题】:How do I animate though a PNG sequence using jQuery (either by scrolling or triggered animation) [closed]如何使用 jQuery 为 PNG 序列设置动画(通过滚动或触发动画)[关闭]
【发布时间】:2012-03-29 00:20:13
【问题描述】:

我越来越多地看到一种效果,即 png 被加载到一系列 DIV(或一个 div)中,然后基于按钮单击或基于滚动逐帧排序。我试图查看代码,我知道 javascript 正在做繁重的工作,但我还是有点迷茫,有没有关于这种技术的教程?例子?

动画示例(多个 div) http://atanaiplus.cz/index_en.html:

动画示例(一个 div): http://www.hyundai-veloster.eu/

滚动动画示例: http://discover.store.sony.com/tablet/#design/ergonomics

【问题讨论】:

    标签: jquery animation sequence parallax


    【解决方案1】:

    您只想使用 setInterval 计时器替换 src 属性

    var myAnim = setInterval(function(){
      $(".myImageHolder").attr('src', nextImage);
    }, 42);
    

    诀窍在于如何生成nextImage。这在很大程度上取决于图像的命名约定,或者您希望动画运行的方向

    更新

    或者使用plugin

    【讨论】:

    • 是的,关于 spritely 的事情是图像序列实际上是一个大图像,正在移动以创建动画。我真的不认为这适用于更大更复杂的图像序列。
    • 是的,文件会很大。
    • 嗯,累积起来可能比所有单个图像都小
    【解决方案2】:

    也许不是在不同的图像之间切换,而是使用这个问题中描述的精灵技术:How to show animated image from PNG image using javascript? [ like gmail ]

    【讨论】:

    • 我还没有代表对其他答案发表评论,但针对文件大小问题:如果您无论如何都必须加载所有图像,那么您已经承诺发送数据 - 通过将图像捆绑到一个 sprite 中,您至少可以节省 HTTP 开销。您还可以在图像加载后立即启动动画,而不必单独检查所有图像。
    • 这可能是真的,但我认为它不是最佳的还有其他原因。在 10,000 x 10,000 的图像周围移动比在 div 中切换可见性或交换图像名称要昂贵得多...
    • 您必须权衡文件大小与 HTTP 请求的数量。如果您的图像不必完全透明,您可以将它们拆分成一个大的 JPEG....但是如果它们需要是 PNG-24 的,那么将它们组合在一起会变得非常大。 HTTP 请求可能更值得。
    猜你喜欢
    • 1970-01-01
    • 2016-04-29
    • 1970-01-01
    • 2018-06-16
    • 2022-01-22
    • 1970-01-01
    • 2020-02-02
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多