9个javascript和gif动画解决方案
- 泽 - 我爱互联网我开始学习制作loading动画是在我学习flash的时候，当时还是flash5. 如今，我们看到html/css/JS的网站，特别是由Ajax驱动的，loading动画是极其有用的让用户知道服务器到此有止处理请求. 不要低估它，它可以网站更具有用户交换性. 它用于表示在当前场景背后有事情发生，通知用户等一会.
9个javascript和gif动画解决方案
标签：
Resources
Tools
gif
javascript
loading
| 发表时间：2011-09-18 10:11 | 作者：疯狂小强 泽
出处：http://www.woiweb.net
我开始学习制作loading动画是在我学习flash的时候，当时还是flash5。如今，我们看到html/css/JS的网站，特别是由Ajax驱动的，loading动画是极其有用的让用户知道服务器到此有止处理请求。不要低估它，它可以网站更具有用户交换性。它用于表示在当前场景背后有事情发生，通知用户等一会。
它常常是Gif格式的动画，然而，现在，我们拥有强大的浏览器和技术(VML和Canvas)，loading动画不再限制于Gif格式动画，它可以由javascript生成并可高度定制。这次，我发现了生成loading动画的5个javascript和接着的4个Gif动画解决方案。
javascript – VML & Canvas
我发现了总共5个生成loading动画的Javascript。不幸的是，并不是所有的都能工作于老的浏览器如IE6,7和8。然后我发现了2个Javascript-activity indicator和spin.js均支持VML(支持IE系列)和Canvas(现代浏览器)。
Activity Indicator
一个jquery插件，使用SVG或VML显示半透明的activity indicator。 它除了依赖jQuery外几乎和spin.js一样.
- 轻量级的脚本
- 独立的解决方案
- Alpha 透明
- 高度自定义外观
- 工作于所有主流浏览器
- 使用特性探测
Canvas Loader
这个插件用同样宽高的canvas基本的加载器代替典型的gif加载图片。这个在开发在Android上预览的移动应用是非常有帮助的。我也将查看是否你在应用替换前用canvas的支持。
- 有限的样式，仅能在支持Canvas的浏览器上工作。
Sonic Looping Loader
Sonic是一个很小的（约3K） JS“类”你可以用来创建自定义的loading动画。它在循环动画上是最好的-如一条蛇尝试去吃它自己的尾巴。这是一个相当酷的Javscript loader，但是不幸的你的浏览器需要支持Canvas。
- 高度自定义，但只能工作于支持Canvas的浏览器中
- 很小的文件~3k
- 自定义预加载样式
HeartCode Canvas Loader
The Hearcode CanvasLoader是一个轻量级的Javsscript UI库，使用HTML5 Canvas元素来绘制环形的动画加载器。它可运行于每个支持HTML5 Canvas元素的的浏览器中。
- 只工作于支持Canvas的浏览器
- 一个自定义UI的面板
Spin.js
Spin.js在剩余的可以说是简单的最好的因为它支持旧的浏览器。它也可以自定义UI
- 无依赖(支持jQuery但不是必需)
- 高度可定制化
- 独立的解决方案
- 使用VML在旧的IE中
- 工作于所有的浏览器，包括IE6
- MIT License
Animated Gif Generators
接下来的是GIF版的动画，GIF动画和Js版之间的区别常常是很多不同的设计
Preloaders.net
Chimply
AjaxLoad
LoadInfo
译自：http://www.queness.com/post/9150/9-javascript-and-animated-gif-loading-animation-solutions
本文链接：http://www.woiweb.net/9-javascript-and-animated-gif-loading-animation-solutions
相关 [javascript gif 动画] 推荐：
Jamie Beck的创意GIF动画图片
- scaoen - PADMAG视觉杂志Jamie Beck来自美国，现居纽约，是一名摄影师，他擅长制作一些小的GIF图片，将画面的大部分制作成静止，仅某个细节有细腻的动画，造成奇妙的视觉效果和氛围. 他的个人博客：http://fromme-toyou.tumblr.com/. 以上这张的说明是：曼哈顿忙碌的一天，但总还是有时间读报纸.
新的APP演示良方：GIF动画
- - 设计师可乐橙每种事物都有回归的本能，长期以来，GIF动画在开发者当中，失去了它的统治地位，不再受欢迎，不再通用，近期它摆出了回击的姿态. 尽管还是一如既往展示图像序列，但它不再像当年那些生硬的低画质视频，没有粗糙简陋的过渡效果. 如今，GIF动画能够通过抢眼的效果和流畅的过渡，有效地聚集人气，给最终的动画一种柔滑精致的感观.
AnimateGif – 快速创建 GIF 动画 | 小众软件 > 媒体工具
- Keen - 小众软件AnimateGif 是一款小巧的 GIF 创建工具，只需要将一些图片拖进 AnimateGif ，一张 GIF 动画就出来了，简单、快捷. AnimateGif 支持 JPG , PNG , GIF 等格式的图片. 图片的分辨率最好一样，不然会有黑边. 下载(50.2 KB): dbank | 官方网站 | 来自小众软件.
GifCam：最佳免费gif动画精细录制/剪辑软件
- - 善用佳软小巧、免费的新秀软件 GifCam，凭借『精确录制、后期剪辑』特色，自第一次试用，就成为我『自用首选，分享首荐』的 gif 动画制作软件. 而此前，我制作软件教程/界面相关的 gif 动画，求快则用 LICEcap（ 文章）直接录制，求精确则手工截屏 + AnimateGif（ 文章）合成，求优化则动用 GIMP（ 文章）.
使用 Byzanz 录制 Gif 动画或 Ogv 视频
- - LinuxTOYByzanz 是一个不错的选择. Byzanz 简单小巧，容易使用，既能录制 Gif 动画，又可录制 Ogv 视频. 可执行下列指令来安装 Byzanz，注意需要 root 权限：. Arch Linux 用户可在 AUR 中找到 Byzanz. 如果你不能在自己所用的 Linux 发行版包仓库中找到 Byzanz，那么可以获取其 源代码，自行编译.
前端必会技能-gif动画图片制作
- - 张鑫旭-鑫空间-鑫生活本文地址： http://www.zhangxinxu.com/wordpress/?p=2924. //zxx: 标题没有任何意思，当然，本作选入中学语文教科书另当别论. 今天微博上晒支付宝年支付的人爆棚，看着自己可怜巴巴的那点支出，实在不好意思拿出来；尤其对比 @老赵 10万+的支出. 除了这个，我还对活动页面上右上角，动啊动的效果感兴趣：.
[原]FFmpeg续篇：截取视频片段转成GIF动画
- - 呦呦鹿鸣前段时间写过 一篇文章，介绍了FFmpeg的几个常用的命令行. 最近，项目里需要做一个把视频片段转成GIF动画的功能，便于用户分享到微博. 惊奇地发现，原来强大的FFmpeg是支持的. 可以简单地执行下面的命令行：. 意思是：将D:\Media目录下的源文件bear.wmv，从第25秒的位置开始，截取10秒长度的视频转成GIF文件，保存为D:\a.gif.
10个css3/javascript动画插件/框架
- - ria之家--RIA三部曲：jquery、ext、flexjquery的一个用的人比较多的动画插件，非常的易用，效果也非常全面. 应该是目前针对transform最为全面的动画库，特点支持3D动画特性：. 非常牛逼的动画效果，文档和demo都很详细，虽然用于实战的场景不多（基于canvas的动画），不过依旧推荐认真看下. 相当不错的小动画库，能够产生大部分css3动画效果，关键是API非常易于理解，比如下面的代码：.
Web 应用程序中提交表单时处理 GIF 动画的最佳实践
- - 博客 - 伯乐在线来源 developerWorks. 简介： 在 Web 应用中的提交表单时，为了很好的用户体验或防止表单重复提交，我们通常会从请求发起那一刻开始，展示出一个动态的 GIF 图标来提示用户请求正在处理. 本文将介绍在传统的提交方式下，如何巧妙地使用 Javacript 方式来解决请求发起时 IE 浏览器下动态沙漏图标不播放的问题，以及在请求完成后点击浏览器回退按钮，Firefox 浏览器依旧显示着沙漏图标的问题.