JS简单动画封装浅析

所属分类: 网络编程 / JavaScript 阅读数: 219
收藏 0 赞 0 分享
网上也有很多封装好的JS动画库,但大多因为功能过于完善,而至于代码量大动辄过千行,不宜在小项目中使用。这里自己封装了一个很轻量的动画库,主要功能都已实现。难免有疏漏之处,还请大家多多指教。

  这里先说明一下功能和用法,以及注意点,随后是一个很简单的可运行示例。

用法及注意事项:
anim(elemId, cssObj, time, animType, funObj)
参数说明:
elemId (必选)需要施加动画效果的元素id
cssObj (必选)动画结束时的样式,对象类型,键值对形式,
其中键是能直接用在JS中的“驼峰”形式的css属性,而不是原来的css属性。
例如:{ marginLeft: '200px', top: '200px', borderWidth: '8px'}
time (必选)动画持续时间(单位ms)
animType (可选)默认为线性变化,代码里的Tween类型包含可选的其他参数
funObj (可选)如果要此选项,需要加入开始和结束时候执行的函数。
形如:{ el为elemId所指向的元素
start: function (el) { el.innerHTML = 'start!'; },
complete: function (el) { el.innerHTML = 'Completed!'; }
}

几点注意事项:
1、没有做低版本浏览器兼容,支持IE8+、FF、chrome、safari、opera
2、注意用能直接用在JS中的“驼峰”形式的css属性(本来应把css转“驼峰”形式,
但是基本所有JS程序员都能直接写出驼峰形式,所以没转)
3、如果需要把动画应用到绝对定位(position:absolute;)元素上,
需要注意在这些元素上设置CSS的方法。
例如:设置top和marginTop,对于绝对定位元素,应该设置top而不是marginTop,
更不应该将二者混合使用,因为二者的参考点是不一样的,同时设置很容易造成混乱。
所以,这里也不支持同时设置二者。
其他相似的同理(left和marginLeft、right和marginRight)
同时设置top和bottom、left和right也不支持。
4、引用了Tween缓动算法,支持线性、渐入渐出等多种变化方式。
5、“动画队列”功能尚未实现,此版本为初级版本,疏漏之处还请多多指正。


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
更多精彩内容其他人还在看

JavaScript this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多