这篇文章主要介绍了js实现匀加速与匀减速运动的方法,涉及javascript结合时间函数与数学运算动态操作页面元素样式的相关实现技巧,需要的朋友可以参考下
本文实例讲述了JS实现匀加速与匀减速运动的方法。分享给大家供大家参考,具体如下:
Modoer 是一款以本地分享,多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计,开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱,不局限于商铺类点评,真正实现了多类型的点评,可以让您的网站点评任何事与物,同时增加产品模块,也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步 旗舰版系统框架2.增加 限制图片
0
/*
* 动画帧函数
*
* */
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();
}以上就是JS实现匀加速与匀减速运动的代码分享的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号