JS实现匀加速与匀减速运动的方法示例
时间:2019-04-01
本文章向大家介绍JS实现匀加速与匀减速运动的方法示例,主要包括JS实现匀加速与匀减速运动的方法示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了JS实现匀加速与匀减速运动的方法。分享给大家供大家参考,具体如下:
/* * 动画帧函数 * * */ var requestFrame=function(){ var prefixList=['webkit','moz','ms']; var func; for(var i=0;i<prefixList.length;i++){ func=window[prefixList[i]+"RequestAnimationFrame"]; if(func){ return function(callback){ func(callback); } } } return function(callback){ setTimeout(callback,67); } }(); /* * 匀加速运动 * * */ function animate_easeIn(element,from,to,duration,callback){ var time=+new Date; var distance=to-from; var a=2*distance/(duration*duration); //加速度a=2x/t^2(包含方向) var func=function(){ var time2,offsetDis,durTime; time2=+new Date; durTime=time2-time; //运动的时间间隔 offsetDis=Math.ceil(a*durTime*durTime/2);//X=a*t^2/2 if(duration<durTime){ element.css('left',to+'px'); callback(); }else{ element.css('left',from+offsetDis+'px'); requestFrame(func); } } func(); } /* * 匀减速运动 * * */ function animate_easeOut(element,from,to,duration,callback){ var time=+new Date; var distance=Math.abs(to-from); var a=2*distance/(duration*duration); //x=a*t^2/2 求出加速度 var v0=Math.sqrt(distance*2*a); // 根据公式:2as=v^2求出初速度 var func=function(){ var time2,offsetDis,durTime,pos; time2=+new Date; durTime=time2-time; offsetDis=Math.ceil(v0*durTime-a*durTime*durTime/2); //根据s=v0*t+1/2*a*t^2求出位移x if(duration<durTime){ element.css('left',to+'px'); callback(); }else{ pos=from>to? from-offsetDis : from+offsetDis; element.css('left',pos+'px'); requestFrame(func); } } func(); }
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
- 使用MagicAjax 实现无刷新Webparts
- Python 项目实践一(外星人入侵小游戏)第五篇
- Python 项目实践一(外星人入侵小游戏)第三篇
- WordPress自定义栏目运用实例 VI:设置外链缩略图/特色图像
- Python 项目实践一(外星人入侵小游戏)第二篇
- IBatisNet配置
- WordPress设置评论到达一定数量后自动关闭评论功能
- Python 项目实践一(外星人入侵)第一篇
- 外媒:域名Covermate.com超35万终端交易
- 移除WordPress 管理后台的主题编辑功能
- 百度区域链开放平台“BaaS”启用了二级子域名chain.baidu.com
- Qt界面UI之QML初见(学习笔记四)
- 清新唯美的jQuery天气预报插件(网页天气预报插件)
- 32和64位的CentOS 6.0下 安装 Mono 2.10.8 和Jexus 5.0
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【LeetCode两题选手】算法类题目(8.8)
- 【LeetCode每日一题】(8.9)复原IP地址(回溯)
- 【回溯算法】N叉树相关技巧
- 【回溯算法】回溯,从入门到入土,七道试题精选、精讲、精练
- 数据结构练手小项目(AVL树、哈希表、循环链表、MySQL数据库)
- 【LeetCode】每日一题(8.2)二叉树展开为链表
- 【小技巧】argc和argv的用法
- 全面分析redis持久化机制
- 【奇技淫巧】-- 接雨水
- 【奇技淫巧】-- 最长连续序列
- 【redis】跟我一起动手玩玩redis主从复制和哨兵模式
- 【C++】八大排序算法 :GIF + 亲测代码 +专项练习平台
- 【C++】勉强能看的线程池详解
- 国密SSL协议之Java编程
- 7. Jackson用树模型处理JSON是必备技能,不信你看