javascript - js缓动函数，控制一个div向右移动，速度是越来越快，直到300就stop？

Question

<script>
    var id=document.getElementById("id");
    var a=0;
    var right=document.getElementById("right");
    var left=document.getElementById("left");
    var t;
    var timer=null;
    right.onclick=function(){
        timer=setInterval(function(){
            if(id.offsetLeft<300){
                id.style.left=id.offsetLeft+5+'px';
            }else{
                clearInterval(timer);
            }
        },10);
    };
    left.onclick=function(){
        timer=setInterval(function(){
            if(id.offsetLeft){
                id.style.left=id.offsetLeft-5+'px';
            }else{
                clearInterval(timer);
            }
        },10);
    };
</script>

<p class="wrapper">
    <p class="box" id="id">
    </p>
</p>
<input type="button" value="向左" id="left">
<input type="button" value="向右" id="right">
请问如何在我写的js基础上 添加一个缓动函数的效果
我的思路，用js控制一个p,向右移动开始直到最快。要有一种飞快的效果。

Answer 1

css3的动画不挺好的，控制运动速度就用贝塞尔曲线啊 ，你这个要求正好有默认的ease-in可以用

cubic-bezier(0,0,0,.99)

Answer 2

你需要的是一个加速度公式
你现在写的是匀速的。只需要每一次比上一次移动距离更大....要大多少看起来舒服你得自己去调

Answer 3

var id=document.getElementById("id");

var a=0;
var right=document.getElementById("right");
var left=document.getElementById("left");
var t;
var timer=null;
**var a=1;//加速度
v=0;//初速度**
right.onclick=function(){
    timer=setInterval(function(){
        if(id.offsetLeft<300){
            **v+=a;
            id.style.left=id.offsetLeft+v+'px';**
        }else{
            clearInterval(timer);
        }
    },10);
};

Answer 4

定义个加速度变量，让速度一直加加速度就ok了。我记得智能社的视频上讲js动画讲的很详细，可以推荐去看下。嘿嘿，blue讲的js真的挺好的。

Answer 5

使用css3的transaction和transform。
transaction里面定义时间和缓动函数。
transform里面使用translate3d替代left属性来做动画，这个属性会调用显卡做加速，动画效果比left要好，流畅得多。

Answer 6

<p class="wrapper">
    <p class="box" id="id">
    </p>
</p>
<input type="button" value="向左" id="left">
<input type="button" value="向右" id="right">
<script>
    var id=document.getElementById("id");
    var a=0;
    var right=document.getElementById("right");
    var left=document.getElementById("left");
    var t;
    var timer=null;
    right.onclick=function(){
          var startTime = Date.now();
        timer=setInterval(function(){
              if(id.offsetLeft<300){
                  var leftDis = id.offsetLeft+0.1*(Date.now()-startTime)/2;
                  leftDis = leftDis > 300 ? 300 : leftDis;
                id.style.left=leftDis+'px';
            }else{
                clearInterval(timer);
            }
        },10);
    };
    left.onclick=function(){
          var startTime = Date.now();
        timer=setInterval(function(){
              if(id.offsetLeft){
                var leftDis = id.offsetLeft-0.1*(Date.now()-startTime)/2;
                  leftDis = leftDis < 0 ? 0 : leftDis;
                id.style.left=leftDis+'px';
            }else{
                clearInterval(timer);
            }
        },10);
    };
</script>

css

.wrapper{
    width:400px;
      height:200px;
      border: 1px solid green;
      position:relative;
}
.box{
      position: relative;
     width: 100px;
      height: 100px;
      border: 1px solid red;
}