zoukankan      html  css  js  c++  java
  • 关于网页里的动画(先写了放着,并不全面)

    在 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 都要快,莫名呼吸加重了一下,由衷地感叹世界进步得真快。

    也让我想起了曾经在论坛里看过的一句话,现在前端还没有像后端那样遇到性能问题,所以将来是个考验算法的时代。

  • 相关阅读:
    ok~加油!
    解析window.open链接的参数
    Arrya数组添加过滤条件
    Oracle 查询今天、昨日、本周、本月和本季度的所有记录
    Sql Server日期查询-SQL查询今天、昨天、7天内、30天
    Lua 中 pairs 和 ipairs 的区别
    关于SignalR连接数量问题的记录
    IceStorm示例运行步骤
    从 OPC 到 OPC UA
    SQL Server 2008 R2 Express Profiler
  • 原文地址:https://www.cnblogs.com/foreverZ/p/web-animation-with-many-method.html
Copyright © 2011-2022 走看看