zoukankan      html  css  js  c++  java
  • 中文前端UI框架Kit(六)javascript动画代码实现原理和一些小技巧

    号外:kitjs官方讨论QQ群建立了,QQ群号88093625,欢迎大家加入,讨论前端相关话题

    上一篇介绍了$Kit.Anim这个类的基本接口和特点以及用法,这一篇,我们深入代码来了解了解$kit.anim是如何实现Css全属性支持,Css Hack等等的

    (一)一切缘起setInterval

    每一个成功男人背后都有一个女人,对于使用javascript实现动画来说,setInterval这个基本的定时器就是那个“女人”了,哈哈。基本上我研究过的动画框架都是基于setInterval实现的,当然也有一些怪胎,是用setTimeout实现的,极少极少。

    一般来说使用setInterval用javascript动画的好处

    1. 时间片固定,setTimeout的延时时间会受到setTimeout内的代码执行时间的影响,而setInterval不会

    2. (定点触发,不用担心被阻塞,setInterval到时间,就会自动跳到setInterval方法体开始,从头执行,无论之前js引擎执行到哪一段代码 X 这句话是错的,)

    正确是,setInterval不计算方法体的时间,直接计算间隔时间,并将方法体放入执行队列,而setTimeout做重复调用要算上方法体的时间+间隔时间,无论是setTimeout还是setInterval都是在参数指定的时间后将待执行方法放到执行队列中,因为javascript是单线程的,没有goto

    所以kitjs也不例外的使用了setInterval用了基本的动画引擎

    对于每个一个setInterval定义后,都会返回一个timeout的id,这是一个数字,与当前页面有关,切唯一,我们可以通过clearInterval的方式终止这个定时器,也就是终止了动画。

    (二)依然是通过对象作为参数

    image

    anim类的motion方法,接受的参数为一个json对象,使用json对象的好处,

    1. 是方便扩充更多的方法和属性

    2. 是如果参数过多,需要记住输入顺序很麻烦,使用json对象做配置,则没有这么麻烦。

    (三)config.el是不是单个节点,而是一个selector

    是的,当初考虑的时候,我的理解是对于一个动画来说,运动元素不应该仅仅是一个元素,比如说我们要做一个四面八方聚拢的效果,有个N个元素集中在一个固定点。如果用jQ的话,会创建N个interval,个人觉得不是很必要。因为对于这个动画的开发状态,就是被动画元素的初始位置,完全可以通过Js获取他当前的Css属性获得,而我们只需要设置下终点坐标即可。所以我在设计kitjs Animation的时候,将config.el属性设置接收一个selector,或者nodeList,可以说是为了节省性能相关,也让代码更加简洁。

    image

    通过代码可以看到,config.el会将接收到的selector变成一个node数组

    (四)根据from重置初始状态

    作为一个动画来说,可能初始状态是他现在的状态,也可能初始状态不是他现在的状态,所以我们需要根据传入的config.from属性重置状态

    image

    (五)from为一个Css的json

    为了方便设置状态,这里直接使用json的方式,写Css,更加方便,更加明了

    image

    (六)Css的json支持Css Hack

    其实秘密在这里,上上涨图片,我们可以看到他调用一个me.setStyle的方法,这里的me是this指针的别名。

    image

    而在setStyle方法里面,他会去调用$kit.css方法,

    而kit是通过IE条件注释的方法,实现iefix的

    image

    在ieFix的$kit.css方法里面,他要做一个_camelCssName的工作

    image

    秘密就在_camelCssName里面

    image

    同理在kit.js里面也有个处理firefox Css Hack的逻辑

    (七)Fx动画渐变计算

    通过累计已经发生动画的时间,加上动画持续时间,开始状态值,结束状态值,带入动画参数计算,获取当前状态值,

    image

    $kit.anim也提供很多动画函数,上一篇已有介绍

    (八)实现rgba颜色通道渐变计算

    因为对于rgba,rgb或者#xxxxx,这样的颜色数值渐变,不能按照转化为10进制,再单一数字Fx计算,他的渐变必须是r,g,b三个通道一起渐变,就是要计算三次。

    kitjs使用正则分析form和to的Css json,判断出是否是颜色数值,而走专门的处理方法

    image

    image

    专门的rgb计算,和非rgb直接一步计算渐变数字

    (九)拆分判断Css属性,哪些是具体渐变值,哪些是单位,这也是识别Css3 属性的关键

    这里kitjs用的技巧是使用正则匹配,分组合并的方式

    image

    使用以上的方法,可以将一段Css String,拆分成为多个独立的小段 ,然后每一段对于value值做渐变计算,再合并成为一个Css String,这种方式对于Css3的transform特别有效,特别是那种多段的Css属性,目前市面上也只有kitjs是这么实现了,别的框架基本都不支持。

    (十)动画链

    当动画进行时间超过持续时间时,kitjs注销了这个动画的interval的id,同时,将动画元素重置到config.to参数的Css状态,如果注册了config.then参数,则继续执行config.then参数,通过demo给出的例子,完成一个动画链条的连续性。

    image

    (十一)小结

    一般来说,在手机开发中,如果是高级浏览器,还是建议直接使用-webkit-transition,其次是-webkit-animation+keyframes,但是经过多次项目的教训,这玩意不稳定,bug很多,最百搭的当然是javascript动画,使用setInterval拯救地球。

    也欢迎大家对于动画实现的问题做交流讨论。


    kitjs官网:http://xueduany.github.com/KitJs/

    源代码:https://github.com/xueduany/KitJs/

  • 相关阅读:
    库存回滚架构设计原则
    老人血脂高吃什么好
    旁边的旁边的旁边--纪念自己逝去的青春
    JAVA8 Map新方法:compute,computeIfAbsent,putIfAbsent与put的区别
    新晋总监生存指南终章——构建技术团队信息通道
    新晋总监生存指南五——人才运营机制,技术团队如何解决造血能力
    新晋总监生存指南四——项目执行指南,如何挽救混乱的项目
    新晋总监生存指南三——OKR,先进的管理工具
    新晋总监生存指南二——建立指标
    新晋总监生存指南开篇之总监二三事
  • 原文地址:https://www.cnblogs.com/xueduanyang/p/2495009.html
Copyright © 2011-2022 走看看