CoolPngAnimate,原创png动态图片类,通过多帧png图实现类似gif的效果

需求:

用png图通过js切换帧达到类似gif效果,但png实现的动画在色彩、透明度的表现效果方面是gif无法比拟的。

允许自定义播放速度,是否无限循环播放,倒序播放完后是否自动消失。

提供一套控制函数,包括播放、倒序播放、暂停、跳至指定帧、隐藏、显示。

要求:

多帧横排,每帧宽度一致以符合公式:帧数*图宽=总图宽

使用说明:

  1. 调用jquery(1.6以上的版本)及coolslider类

  2. 定义一个容器

     <div id="pngDiv"></div>
    
  3. 创建滚动对象并初始化

     <script type="text/javascript">
     var pngEg=new CoolPngAnimate("images/animatepic.png", 6612, 228, 144, 20, false, false);
     pngEg.init();
     pngEg.show("pngDiv"); //动画嵌入的容器是在执行show函数时才定义的
     </script>
    
     //参数意义注释:(图片路径,原始图片总宽度,单帧图片宽度,图片高度,切换时间间隔(单位毫秒),无限循环开关,倒序播放消失开关)
    

启发网站:http://www.ritter-sport.de/

项目链接:https://bitbucket.org/coolhihi/coolpnganimate

演示地址:http://demo.gxxsite.com/coolpnganimate/index.html

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏