发新贴  快速回复

js实现钟摆运动

  fantaghiro
2014-09-29 11:48
老师,请给一下钟摆运动的解题思路吧。我做来做去,运动轨迹都十分诡异。好像是在横向划8字。
我的思路好像有些问题:一种思路是开两个定时器:一个用来控制left值,进行弹性运动,每30ms执行一次;另一个控制top,进行弹性运动,每15ms执行一次。但是出来的轨迹有问题。

 
创美易-miaov
css3可以轻易写出来.
另外纯js实现的话, 貌似要写各种算法圆弧角度....
2014-09-29 13:07  回复本帖
 
fantaghiro
我感觉好像也要算角度啥的,不知道是不是想复杂了。
2014-09-29 13:15  回复本帖
 
fantaghiro
最终弄出来一个。但并不是精确模仿钟摆运动。请老师跟同学们瞧瞧写得对不对,哪里还可以再改改?<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>钟摆运动</title>
    <style>
    body { margin: 0; padding: 0; }
    #div1 { width: 20px; height: 20px; position: absolute; background: black; left: 0; top: 300px; }
    #bar { width: 1px; height: 380px; background: black; position: absolute; left: 300px; }
    </style>
    <script>
    window.err= = function() {

        var oDiv = document.getElementById('div1');
        
        oDiv.err= = swing;

           function swing(){

             var iTimer = null;
          var iSpeedX = 0;

          clearInterval(iTimer);
          iTimer = setInterval(function(){

            if(oDiv.offsetLeft < 300){
              iSpeedX += 5;
            } else {
              iSpeedX -= 5;
            }

            if(oDiv.offsetLeft < 300 && iSpeedX > 0 || oDiv.offsetLeft > 300 && iSpeedX < 0){
              iSpeedY = 8;
            } else if (oDiv.offsetLeft > 300 && iSpeedX > 0 || oDiv.offsetLeft < 300 && iSpeedX < 0){
              iSpeedY = -8;
            }

            oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px';
            oDiv.style.top = oDiv.offsetTop + iSpeedY + 'px';    
          }, 30)

           }

    }
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="bar"></div>
</body>
</html>

2014-09-29 14:24  回复本帖
 
leo
forum.php?mod=redirect&goto=findpost&pid=30614&ptid=9472
最终弄出来一个。但并不是精确模仿钟摆运动。请老师跟同学们瞧瞧写得对不对,哪里还可以再改改?

 ...

咦?奇怪,为什么最近这么多人问到钟摆??下面这种是你想要的么?


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body { background:#f1f1f1; }
#btn1 { position:absolute; top:200px; left:50%; margin-left:-20px; }
#pendulum { position:absolute; top:80px; left:50%; margin-left:-40px;  }
#pendulum span { position:absolute; top:0; left:0; width:70px; height:70px; background:red; border-radius:50%; opacity:0; transition:.3s opacity; }
</style>
</head>

<body>

<input id="btn1" type="button" value="钟摆" />

<div id="pendulum"><span></span></div>

<script>
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('pendulum');
var oSpan = oDiv.getElementsByTagName('span')[0];

oBtn.err= = function () {
    this.disabled = true;
    
    oSpan.style.opacity = 1;
    oSpan.style.left = getLT(80, 300).x + 'px';
    oSpan.style.top = getLT(80, 300).y + 'px';
    
    startMove( oSpan, -60, 0, 300, 3000 );
};

function startMove(obj,iDeg,iTarget,iR,time,callBack){
    var iNowTime=new Date().getTime();
    clearInterval(obj.oTimer);
    obj.oTimer=setInterval(function(){
        var iTime=time-Math.max(0,iNowTime-new Date().getTime()+time);
        var iVal=elasticOut(iTime,iDeg,iTarget-iDeg,time);
        obj.style.top=getLT(iVal,iR).y+"px";
        obj.style.left=getLT(iVal,iR).x+"px";
        if(iTime==time){
            clearInterval(obj.oTimer);
            callBack && callBack.call(obj);
        }
    },14);
    function elasticOut(t, b, c, d, a, p){    
        if (t === 0) {
            return b;
        }
        if ( (t /= d) == 1 ) {
            return b+c;
        }
        if (!p) {
            p=d*0.15;    // 幅度
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    }
}
function getLT(iDeg,iR){
    var iLeft=Math.round(iR*Math.sin(iDeg/180*Math.PI));
    var iTop=Math.round(iR*Math.cos(iDeg/180*Math.PI));
    return {x:iLeft,y:iTop};
}

</script>

</body>
</html>


2014-09-29 15:58  回复本帖
 
fantaghiro
我勒个去!谢谢老师。这个钟摆运动是“JavaScript的运动”里面第三个文件夹里面视频的作业啊!
2014-09-29 16:16  回复本帖
 
创美易-miaov
forum.php?mod=redirect&goto=findpost&pid=30615&ptid=9472
咦?奇怪,为什么最近这么多人问到钟摆??下面这种是你想要的么?




正玄 余玄 配合圆周率果然强大, 老刘这个elasticOu方法是怎么推算出来的??表示不解,好想知道过程???
2014-09-29 16:36  回复本帖
 
leo
forum.php?mod=redirect&goto=findpost&pid=30620&ptid=9472
正玄 余玄 配合圆周率果然强大, 老刘这个elasticOu方法是怎么推算出来的??表示不解,好想知道过程???
 ...

这就是 tween 里的一个公式咧~~~
2014-09-29 18:23  回复本帖
 
创美易-miaov
哦,忘记了。。。
2014-09-29 20:53  回复本帖
真士隐
forum.php?mod=redirect&goto=findpost&pid=30624&ptid=9472
这就是 tween 里的一个公式咧~~~

tween是啥子嘛刘老湿
2015-04-28 23:00  回复本帖
登录 后才可以发表回复