javascript - js暂停按钮的stop 循环，然后再次点击 暂停，让动画在动，请问是怎么判断？

Question

<p id="my"></p>

#my{
    position: absolute;
    left:50px;
    top:100px;
    background: #de3226;
    width:200px;
    height: 200px;
}
a{
  text-decoration:none;
  color:#000;
}
a:focus{
  color:red;
}

    var my=document.getElementById("my");
    var ss=document.getElementById("ss");
    var handle = 0;
    var lPos = 0;
    var nul=null;
    function renderLoop(){ //右边移动
        my.style.left=(lPos+=1)+"px";
        handle=window.requestAnimationFrame(renderLoop);
    }
    function rightLoop(){ //左边移动
        my.style.left=(lPos-=1)+"px";
        handle=window.requestAnimationFrame(rightLoop);
    }
    document.getElementById("ms").addEventListener("click",function(){
            renderLoop();
    });
    document.getElementById("mr").addEventListener("click",function(){
        rightLoop();
    });
   ss.addEventListener("click",function(){ //监听暂停按钮，然后停止循环，再点击暂停按钮的时候往左边移动
        if(handle){
            window.cancelAnimationFrame(handle);
            handle = null;
        }
//        else{
//            renderLoop();//这块是向右边移动 那么问题来了 。如果点击左边移动，暂停会判断向右移动。
//        }
    });

http://jsbin.com/qikutiviqo/edit?html,cs... 在线demo
昨天提问，然后晚上我修改了一下，发现有个stop按钮问题。动画不能跟着stop方向移动。
if 暂停这块是怎么判断动画是左向，然后可以停止可以开始继续让动画向左。
反之就是这样。

Answer 1

在现代浏览器上，不用写什么缓动函数。用CSS就可以实现，transform

Answer 2

看这个吧，关于requestAnimationFrame：http://www.zhangxinxu.com/wordpress/2013...

Answer 3

具体自己实现

使用定时器，每过一段时间就改变一下宽高

Answer 4

你可以引用jquery库，然后利用其中的animate方法

$(".main").animate({
    //这里可以添加css属性
    transform: 'all 2s linear',
}, 2500)//后面的2500代表整个动作完成时间

Answer 5

object.style.transform="rotate(7deg)";类似这样写其实还是用的css3样式！
$("#go").click(function(){
$("#block").animate({

width: "90%",
height: "100%", 
fontSize: "10em", 
borderWidth: 10

}, 1000 );
});

Answer 6

css代码：

#an{
  width: 200px;
  height: 200px;
  background: red;
}
@keyframes go
{
from {width: 200px;height: 200px;}
to {width: 300px;height: 540px;}
}

@-moz-keyframes go 
{
from {width: 200px;height: 200px;}
to {width: 300px;height: 540px;}
}

@-webkit-keyframes go 
{
from {width: 200px;height: 200px;}
to {width: 300px;height: 540px;}
}

@-o-keyframes go 
{
from {width: 200px;height: 200px;}
to {width: 300px;height: 540px;}
}

.anim{
  animation: go 5s forwards ;
-moz-animation: go 5s forwards ;    
-webkit-animation: go 5s forwards ;    
-o-animation: go 5s forwards ;
}

js代码

var an=document.getElementById("an");
an.onclick=function(){
  an.className="anim";
};

Answer 7

原生JavaScript的实现不清楚，不能用jQuery，那就用css3来实现
在你的基础上用CSS3实现的

Answer 8

https://segmentfault.com/n/1330000004887...
刚弄一个旋转笔记可以看看哦

Answer 9

CSS3的动画效率要高很多了

Answer 10

css3可以实现，原生js用定时器