![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
动画
kino2046
这个作者很懒,什么都没留下…
展开
-
动画帧requestAnimationFrame / 取消动画帧cancelAnimationFrame(index)
requestAnimationFrame 动画帧 性能好1.会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率2.在隐藏或不可见的元素中,将不会进行重新重绘或回流语法:requestAnimationFrame(callback)参数:callback下一次重绘之前更新动...原创 2020-03-26 14:32:26 · 4481 阅读 · 0 评论 -
Tween动画框架
Tween动画tcurrenttime(当前时间) bbeginningvalue(初始值)cchangeinvalue(变化量)dduration(持续时间)框架代码:varTween={linear:function(t,b,c,d){//匀速returnc*t/...原创 2020-03-26 14:32:22 · 288 阅读 · 0 评论 -
mTween动画框架封装-1
1.框架2.添加css方法3.多样式同时运动4.运动管理5.参数优化1.functionmTween(el,attr,target,duration,fx){ }el:需要动画的元素attr:需要动画的样式target:动画的目标值duration:动画时长(毫秒)fx...原创 2020-03-26 14:32:18 · 203 阅读 · 0 评论 -
mTween动画框架封装-2
6.添加回调函数7.添加动画结束之后的回调8.回调函数使用9.弹性菜单10.动画时间调整6.添加回调函数一个函数本身不执行,当参数传入另一个函数,在另一个函数中执行,叫做回调函数7.添加动画结束之后的回调8.回调函数使用9.弹性菜单10.动画时间调整li长度不同造成运动时间不同,用比例调整运动时间,视觉上比较柔和...原创 2020-03-26 14:32:14 · 97 阅读 · 0 评论 -
mTween动画框架封装-3
21.transform22.添加transform的处理23.特殊样式获取、批量设置21.transform22.添加transform的处理/*css函数*/vartransformAttr=["rotate","rotateX","rotateY","rotateZ","t...原创 2020-03-26 14:32:09 · 115 阅读 · 0 评论 -
元素抖动函数封装
1.抖动封装/*op:{el,attr,shakeLength}*/functionshake(op){varel=op.el,attr=op.attr,shakeLength=op.shakeLength||15,star...原创 2020-03-26 14:32:01 · 122 阅读 · 0 评论 -
异步函数promise、then、async、await
varTween={linear:function(t,b,c,d){//匀速returnc*t/d+b;},easeIn:function(t,b,c,d){//加速曲线returnc*(t/=d)*t+b;},easeOut:function...原创 2020-03-25 20:16:00 · 334 阅读 · 0 评论