在 css3 未出世之前,jquery 的 animate 方法被我们这些新手极其青睐,稍稍一玩就感觉牛逼死了,交互动效就是我们装逼的利器。
虽然也曾有一段时间特别反感 jquery 把各种属性都堆在 html 里面,然后一有动画整个代码控制器就开始发疯似的闪现数字,还为会不会崩坏而捏一把汗。
而且用起来非常简单,什么动画时间/延时/暂停和回调都相当方便,很后期了才接触到了 queue 队列,也是大大地吃了一精。
$(selector).animate(styles,speed,easing,callback)
后来 CSS3 就杀出来了,最开始吸引我的是 transition,当时做 :hover 和 :focus 交互的时候变得相当有趣。
接着是 transform,让动画有了旋转/拉伸等功能,想着当年想做个旋转还专门下个插件来着,感谢技术进步啊。
而 animation 在当初实在懒得做兼容性,每个属性都得带前缀好烦的,所以迟迟没有去接触(现在好多了)。
而随着做响应式页面更多后,发现 transition 并不能满足我的很多设计创意了,所以才领略到 infinite / backwards / step() 这些属性的强大魅力。
然后配合上 事件+addClass 比 $.fn.animate 多出来了不知道多种动画形态。
但是,不太爽的是,它的回调方法 transitionend 和 animationend 如果点快了那就要尴尬了,没有一个很好的暂停方法。
后来越来越多的人去说 CSS3 的渲染如何如何呀,我竟然也跟着信了,毕竟没有深入研究过动画真实的性能问题。
主要观念是: $.animate 会不断的操作更改 dom,而 animation 只是在浏览器自己的不断刷新中顺带完成动画。
而 $.transit 这股清流瞬间就将我俘虏了,集合了上面两者的优势,没见过的可以去搜搜看,主要是将修改 dom 变成了 transition 过渡,提高了很棒的性能。
SMIL 是作用于 SVG 的一种动画方式,非,常,屌。
甚至在 animation 的基础上还能加上跟随路径,这种质变是如今难以比拟的。
可惜写 SVG 即便有专门的编辑器或绘图器本来就很麻烦了,再带上 <animateTransform> 说实话我有些不情愿。
而且它就像 html 一样,用 css 和 js 再加上 smil,强大的效果加可控性,让我不心动都不行。
再后来无意间搜到 $.velocity 这个类似物,标语就就写的是比 jquery/css/transit 都要快,莫名呼吸加重了一下,由衷地感叹世界进步得真快。
也让我想起了曾经在论坛里看过的一句话,现在前端还没有像后端那样遇到性能问题,所以将来是个考验算法的时代。