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

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

  • 相关阅读:
    /etc/init.d/functions: No such file or directory报错问题
    在Linux上安装Python3.7.1
    python 使用openpyxl实现读写xlsx文件
    Git 撤销本地修改
    element的el-table表格自定义表头,slot="header"内,数据不更新的问题
    记录下本地修改文件名称大小写问题线上说找不到文件
    解决国内访问github慢的问题笔记
    vue项目中使用echarts实现疫情地图
    uni-app项目搭建
    uniapp引入uni-ui组件报错TypeError: this.getOptions is not a function
  • 原文地址:https://www.cnblogs.com/foreverZ/p/web-animation-with-many-method.html
Copyright © 2011-2022 走看看