您现在的位置:首页 --> 查看专题: 动画
“抓娃娃”并不陌生,存在两种结果:抓到与抓不到。在 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天十大热文
- [65] Oracle MTS模式下 进程地址与会话信
- [64] Go Reflect 性能
- [64] 如何拿下简短的域名
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 【社会化设计】自我(self)部分――欢迎区
- [58] 图书馆的世界纪录
- [56] android 开发入门
- [53] 视觉调整-设计师 vs. 逻辑
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [45] 界面设计速成
赞助商广告