模仿滴滴单车解锁的时候,从0%到90%的欺骗加载动画效果

简介: 模仿滴滴单车解锁的时候,从0%到90%的欺骗加载动画效果

  /**欺骗加载动画效果…*/

   var text = '已解锁{value}%';

   var interval;

 

   var __fakeLoading = function (callback, time, per) {

       time || (time = 30);//1~90是间隔30毫秒累加1

       per || (per = 0);

       interval && clearInterval(interval);

       interval = setInterval(function () {

           per++;

           var max = 90;//到达这个数字,就开始减速

           var end = 100;//结束

           var step = 200;//减速幅度

           var isEnd = per > end;

           callback && callback(isEnd ? 'end' : text.replace(/{value}/g, per));

           per > max && (isEnd ? clearInterval(interval) : __fakeLoading(callback, (per - max) * step, per));//开始减缓速度

       }, time);

   };

   var __end = function () {

       clearInterval(interval);

       document.querySelector('div').innerHTML = '解锁完毕';

   };

 

   __fakeLoading(function (v) {

       document.querySelector('div').innerHTML = v;

   });

 

   /*setTimeout(function () {

       //如果系统提前解锁执行下面的

       __end();

   }, 1000)*/

相关文章
|
5月前
|
图形学 开发者
【unity小技巧】两种办法解决FPS游戏枪或者人物穿墙穿模问题
【unity小技巧】两种办法解决FPS游戏枪或者人物穿墙穿模问题
228 0
如何将电脑上的“小电影”隐藏为一张图片?这波操作绝了!!
如何将电脑上的“小电影”隐藏为一张图片?这波操作绝了,实现效果:你女朋友打开文件是一张图片,你打开却是各种“小电影”~~
115 0
如何将电脑上的“小电影”隐藏为一张图片?这波操作绝了!!
|
图形学
【unity每日一记】--控制游戏人物移动的细节
【unity每日一记】--控制游戏人物移动的细节
190 0
|
Java
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏20之enemy被攻击显示后退动画(block效果)
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏20之enemy被攻击显示后退动画(block效果)
164 0
|
Java
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏18玩家攻击动画实现
手把手一步一步教你使用Java开发一个大型街机动作闯关类游戏18玩家攻击动画实现
166 0
|
前端开发
「CSS畅想」我的发呆专属,反复解锁手机屏幕
前端玩转CSS,可以创造出不少有趣的效果。今天实现了一个解锁手机屏幕的效果,简单的快乐。
165 1
|
存储 传感器 编解码
设计全新动作捕捉,构建水下3D系统,《阿凡达2》的特效背后藏了哪些秘密?
上映一周,票房破5亿。 暌违13年,詹姆斯·卡梅隆终于带来了《阿凡达2:水之道》。
1690 0
设计全新动作捕捉,构建水下3D系统,《阿凡达2》的特效背后藏了哪些秘密?
|
存储 人工智能 算法
3D打印和语音识别改装旧赛车:音调变速、口令转弯,重现“四驱兄弟”招牌技能!
3D打印和语音识别改装旧赛车:音调变速、口令转弯,重现“四驱兄弟”招牌技能!
218 0
火星漫游车着陆点最终确定,将于2021年于奥克夏平原开启探索之旅
奥克夏平原,是一个在过去很有可能拥有大片水域的区域,或许可以帮助科学家找到火星生命的蛛丝马迹。
394 0