席新亮'; ?>

首页 / 原生JS

用jQuery写了这么多动画效果,你懂原理吗?

By 席新亮 •  2016-11-28 16:40:45 •  621次点击

前言


很多朋友,用jQuery可能写了很多动画效果,但是,现在都不知道这些动画效果的原理是什么?本文向大家介绍并一起写一个原生JavaScript动画模块。

创建一个animateManage.js文件,源码如下:

【代码说明】

l 动画模块整体分为3部分:①js代码第40~56行一个定时调用的“帧函数tick()”维护整个动态效果,默认为13毫秒;②当帧函数调用时,会循环一系列的“动画队列”,并且执行每一个具体动画业务;③动画队列的压入与删除维护。

l 在此模块中,通过闭包封装整个模块,将animateManage放在window域下,当用户使用时,直接“new animateManage(参数列表)”传入响应的哈希参数列表即可。

l 将一些公用的方法,在JavaScript原型链上进行扩展。tick为动画检测的函数,当动画执行开始后,会不断地检测更新动画的效果;js代码第44~53行当检测到存在需要执行的动画时,会调用go函数执行具体的动画业务;具体的动画业务中,aniEffect担任实现动画算法的角色。

如果读者对此模块感兴趣,可以完善一下,很简单的,拿来练习一下吧。


为了验证以上的动画模块是否可运行正常,本例js代码如下:

本例html代码如下:

【代码说明】

在index.html中增加了响应元素id为'focusPointSource',js代码第04~19行当单击元素时元素会向右移动,移动结束时触发回调函数弹框,效果如图1所示。

图1 动画模块测试


Vue.js  前端社区  前端技术  前端教程  FIS  nodejs  npm  北京前端学校  自学前端  前端学校  北京前端培训  前端培训  妙味课堂  JS动画 

1 回复 | 直到2017-04-29 19:24

回复

登录提问 or 还没有账号?去注册