您现在的位置：首页 --> 查看专题： 动画
“抓娃娃”并不陌生，存在两种结果:抓到与抓不到。在 Web 动画中，如上图，“抓到”与“抓不到”对应着两个动画，可以使用不同的动画图片资源来实现，似乎毫无异义。
细做观察，不难发现：两个动画中“动画初始到抓取”及“抓取结束到动画结束”的区间中存在相同动画(滑动和晃动抓杆)。既然动画相同，那么可以通过引用同一份动画图片资源，不做相同图片的重复加载，从而减少总资源大小。
“两个动画间存在部分相同的动画，相同部分可以引用同一份动画图片资源，来减少图片的总大小。”
肉眼进行辨别哪些动画是一样的？那是不可能的。gka提供一键式制作多个动画的方式，支持多种图片优化方案(含图片去重)。
gka 是一款简单的、高效的帧动画生成工具，图片处理工具。
最近将去年写过的easyAnim进行了重构和优化以整合到我的javascript框架中，回过头来发现以前写的代码确实还有很多可以改进的地方，这也证明自己还是有点进步的。趁有点时间，将javascript动画运行的机制和实现的思路整理了一下，算是做个小总结，也希望对有兴趣的人有点帮助。篇幅稍长，看之前请自备瓜子啤酒。
当然这里说的javascript动画是指利用javascript来计算DOM元素的CSS属性值来实现的动画，HTML5和CSS3的发展让WEB中的动画有了更多的可能，但这些看起来比较高级的东西还需要浏览器给力点才行。
10年5月份写过 ，那时候CSS3 动画基本上只有webkit内核的浏览器，如今CSS3已经大量的被应用到各种项目中，并且逐渐成为前端开发工程师的必备技能。虽然在项目中也经常用CSS3来优化一些体验，但是总觉的自己掌握的不够，所以最近温故知新，总结一下。欢迎大家拍砖讨论。
曾经某个时期，大多数开发者使用 jQuery 给浏览器中的元素添加动画。让这个淡化，让那个扩大，很简单。随着互动的项目越来越复杂，移动设备的大量增加，表现性能变得越来越重要。Flash 被抛弃，有天赋的动画开发者使用 HTML5 去实现过去从未实现的效果。他们需要更好的工具去开发复杂的动画序列并获得最好的性能。jQuery 并不能够做到。浏览器日渐成熟的同时也开始提供了一些解决方案。
其实假如不拿浏览器的兼容性来说，用css3做一些高帅富浏览器支持的动画效果其实还是很不错的，这个animation就是一个很不错的css3动画属性，特别是那些单色调的图片来做逐帧动画比我们用gif做的动画占用的内存还要小，不过对于GPU渲染是否是一种负荷目前还没有去测试，假如你知道的话不妨说说哈。
jQuery的animate方法对颜色无法做动画效果.
最近发现用jQuery实现的动画在chrome下会有暴走的问题。例如下面这个页面，打开后红色方块每隔三秒向右移动20像素。此时开一个新的Tab，把这个页面放在后台Tab上等待30秒，然后切换回该页面，就会看到红方块连续向右移动了200像素。
用动画来观察排序算法是一件很酷的事情，例如有人便为各种排序算法提供了动画效果。只可惜这些效果都是实现准备好的gif图片，并非由代码写成。在大部分平台上编写这样的程序并没有太大困难，只要在绘制出图形之后短暂地阻塞线程就行了。可惜，在JavaScript中我们只能“一蹴而就”，要暂停的话，只能使用setTimeout进行回调了。不过，这也正是Jscex的用武之地，用Jscex编写的代码需要“暂停”，只需要简单地调用sleep异步方法，一切...
jQuery天生就是用来做动画的。无论是消息框淡出淡入，菜单栏的滑动打开，或者滚动动画，甚至游戏，都可以用内建的方法或者更丰富的插件来完成。 CSS样式属性动画 我们现在有很多的动画方法，滑动、淡出淡入、还有其他的显示隐藏动画，但是我们对于精确的控制动画以及动画到底怎么发生的还不太了解。我们这就来介绍一个非常强大的jQuery函数，animate，这个方法可以让你对任何的CSS属性做动画的效果。
缩略图是个很常用的功能。它的实现并不复杂，但如果原图是GIF动画的话，问题就会变得繁琐一点，下面通过一个取自CS警匪游戏的GIF动画来说明问题： 为了让问题更加清晰，我们先还原动画各帧： 选择一：用PHP中的Imagick模块： writeImage(\'old_\' . $i++ . \'.gif\'); } ?> 选择二：用ImageMagick提供的convert命令： shell&#...
[ 共15篇文章 ][ 第1页/共1页 ][ 1 ]
近3天十大热文
-
[611] 招聘技巧一二 -
[18] 配合jquery实现异步加载页面元素
-
[17] 我的git笔记
-
[15] 跨域请求的iframe解决方案（1）
-
[15] 在ssh服务里使用chroot
-
[14] 豆瓣是啥？
-
[14] 跨域请求的iframe解决方案（2）
-
[13] 密度聚类算法之OPTICS
-
[13] jQuery性能优化指南
-
[13] 使用document.domain和ifra
赞助商广告
