javascript運動系列第三篇——曲線運動

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/10/18/5974676.html
-Advertisement-
Play Games

× 目錄 [1]圓周運動 [2]鐘擺運動 [3]拋物線運動 前面的話 上一篇介紹了變速運動，但只實現了直線運動。如果元素的left和top同時運動，並遵循不同的曲線公式，則會進行不同形式的曲線運動。本文將詳細介紹圓周運動、鐘擺運動和拋物線運動這三種曲線運動形式 圓周運動 圓周運動可能是最好理解的曲線 ...


×
目錄
[1]圓周運動 [2]鐘擺運動 [3]拋物線運動

前面的話

　　上一篇介紹了變速運動，但只實現了直線運動。如果元素的left和top同時運動，並遵循不同的曲線公式，則會進行不同形式的曲線運動。本文將詳細介紹圓周運動、鐘擺運動和拋物線運動這三種曲線運動形式

 

圓周運動

　　圓周運動可能是最好理解的曲線運動了

　　若(x0,y0)為圓心，則圓的公式為(x-x0)*(x-x0) + (y-y0)*(y-y0) = r*r

　　寫成三角函數的形式為

    x = x0 + cosa*r
    y = y0 + sina*r

　　所以，實際上只要知道夾角a和圓心(x0,y0)就可以計算出x和y

　　圓周運動可以封裝為函數circleMove.js

function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
} 
function circleMove(json){
    //要操作的元素
    var obj = json.obj;
    //方向(順時針'+'或逆時針'-')
    var dir = json.dir;
    dir = dir || '+';
    //最大圈數
    var max = json.max;
    max = Number(max) || 'all'; 
    //半徑
    var r = json.r;
    r = Number(r) || 100;
    //圓心x軸坐標
    var x0 = json.x0 || parseFloat(getCSS(obj,'left'));
    //圓心y軸坐標
    var y0 = json.y0 ||  parseFloat(getCSS(obj,'top')) - r;
    //初始夾角，以角度為單位
    var a0 = json.a0;
    a0 = Number(a) || 90;
    //當前夾角
    var a = json.a ||a0;
    //當前圈數
    var num = json.num || 0;
    //清除定時器
    if(obj.timer){return;}
    //聲明當前值cur
    var cur = {};
    obj.timer = setInterval(function(){
        //將這些瞬時值儲存在obj對象中的屬性中
        obj.a = a;
        obj.x0 = x0;
        obj.y0 = y0;
        obj.x = x;
        obj.y = y;
        obj.num = num;
        //如果元素運動到指定圈數則停止定時器
        if(num == max){
            clearInterval(obj.timer);
        }
        //順時針
        if(dir == '+'){
            a++;
            if(a == a0 + 360){
                a = a0;
                num++;
            }
        //逆時針
        }else{
            a--;
            if(a == a0 - 360){
                a = a0;
                num++;
            }
        }
        //更新當前值
        cur.left = parseFloat(getCSS(obj,'left'));
        cur.top = parseFloat(getCSS(obj,'top'));    
        //更新left和top值
        var x = x0 + r*Math.cos(a*Math.PI/180);
        var y = y0 + r*Math.sin(a*Math.PI/180)
        test.style.left = x + 'px';
        test.style.top = y + 'px';    
    },20);
}

　　下麵利用封裝的circleMove.js來實現簡單的圓周運動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button id="btn1">順時針旋轉</button>
<button id="btn2">逆時針旋轉</button>
<button id="btn3">暫停</button>
<button id="reset">還原</button>
<div id="result"></div>
<div id="backup" style="height: 298px;width:298px;border:1px solid black;border-radius:50%;position:absolute;top:50px;left:50px;">
    <div id="test" style="height: 40px;width: 40px;background-color:pink;position:relative;left:130px;top:280px;border-radius:50%"></div>
</div>
<script src="http://files.cnblogs.com/files/xiaohuochai/circleMove.js"></script>
<script>
reset.onclick = function(){
    history.go();
}
btn1.onclick = function(){
    circleMove({obj:test,r:150,x0:test.x0,y0:test.y0,a:test.a,num:test.num});
}
btn2.onclick = function(){
    circleMove({obj:test,r:150,dir:'-',x0:test.x0,y0:test.y0,a:test.a,num:test.num});
}
btn3.onclick = function(){
    clearInterval(test.timer);
    test.timer = 0;    
}
</script>
</body>
</html>

鐘擺運動

　　一個鐘擺，一會兒朝左，一會兒朝右，周而複始，來回擺動。鐘擺總是圍繞著一個中心值在一定範圍內作有規律的擺動，這種運動稱為鐘擺運動，可以把鐘擺運動看做圓周運動的一部分，進而比較簡單的實現鐘擺運動

　　假設，元素初始時處於鐘擺的最底點。當鐘擺與豎直線夾角為60度時，為最高點

　　若鐘擺運動的圓心為(x0,y0)，則圓的公式為(x-x0)*(x-x0) + (y-y0)*(y-y0) = r*r

　　若夾角a為鐘擺與豎直線夾角，寫成三角函數的形式為

    x = x0 + sina*r
    y = y0 + cosa*r

　　當夾角a從0增加到60或減小到-60時，元素開始做反向運動

　　將鐘擺運動寫成pendulMove.js的形式

function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
} 
function pendulMove(json){
    //要操作的元素
    var obj = json.obj;
    //起始方向(順時針'+'或逆時針'-')
    var dir = json.dir;
    dir = dir || '+';
    //最大次數(再次經過最低點為一次)
    var max = json.max;
    max = Number(max) || 'all'; 
    //半徑
    var r = json.r;
    r = Number(r) || 100;
    //圓心x軸坐標
    var x0 = json.x0 || parseFloat(getCSS(obj,'left'));
    //圓心y軸坐標
    var y0 = json.y0 ||  parseFloat(getCSS(obj,'top')) - r;
    //初始夾角，以角度為單位
    var a0 = json.a0;
    a0 = Number(a) || 0;
    //當前夾角
    var a = json.a ||0;
    //當前次數
    var num = 0;
    //清除定時器
    if(obj.timer){return;}
    //聲明當前值cur
    var cur = {};
    obj.timer = setInterval(function(){
        //將這些瞬時值儲存在obj對象中的屬性中
        obj.a = a;
        obj.x0 = x0;
        obj.y0 = y0;
        obj.x = x;
        obj.y = y;
        obj.num = num;
        //如果元素運動到指定圈數則停止定時器
        if(num == max){
            clearInterval(obj.timer);
        }
        //起始向右運動
        if(dir == '+'){
            a++;
            if(a == 60){
                //方向變成向左
                dir = '-';
            }
        }else{
            a--;
            if(a == -60){
                //方向變成向右
                dir = '+';
            }
        }
        //更新當前值
        cur.left = parseFloat(getCSS(obj,'left'));
        cur.top = parseFloat(getCSS(obj,'top'));    
        //更新left和top值
        var x = x0 + r*Math.sin(a*Math.PI/180);
        var y = y0 + r*Math.cos(a*Math.PI/180)
        test.style.left = x + 'px';
        test.style.top = y + 'px';    
    },20);
}

　　下麵利用封裝的pendulMove.js來實現簡單的鐘擺運動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button id="btn1">起始正向運動</button>
<button id="btn2">起始逆向運動</button>
<button id="btn3">暫停</button>
<button id="reset">還原</button>
<div id="result"></div>
<div id="backup" style="height: 298px;width:298px;border-bottom:1px solid black;border-radius:50%;position:absolute;top:50px;left:50px;">
    <div id="test" style="height: 40px;width: 40px;background-color:pink;position:relative;left:130px;top:280px;border-radius:50%"></div>
</div>
<script src="http://files.cnblogs.com/files/xiaohuochai/pendulMove.js"></script>
<script>
reset.onclick = function(){
    history.go();
}
btn1.onclick = function(){
    pendulMove({obj:test,r:150,x0:test.x0,y0:test.y0,a:test.a,num:test.num});
}
btn2.onclick = function(){
    pendulMove({obj:test,r:150,dir:'-',x0:test.x0,y0:test.y0,a:test.a,num:test.num});
}
btn3.onclick = function(){
    clearInterval(test.timer);
    test.timer = 0;    
}
</script>
</body>
</html>

拋物線運動

　　平面內到定點與定直線的距離相等的點的軌跡叫做拋物線。其中定點叫拋物線的焦點，定直線叫拋物線的準線。拋物線實際上就是一段特殊形式的曲線

　　拋物線方程為y=a*x*x+b*x+c

　　其中a、b、c為參數，以x為參照的話，當x以固定值遞增的方式進行變化時，y也會有相應變化

　　若a>0時，拋物線的開口向下；否則，開口向上

　　拋物線的準線的x軸坐標為(-2*a/b)。如果target目標設置為100，則(-2*a/b)儘量設置為50

　　若a = 0.01，則b=-1

　　將拋物線運動寫成parabolMove.js的形式

function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
} 
function parabolMove(json){
    //設置要操作的元素
    var obj = json.obj;
    //設置x軸上的目標值
    var target = json.target;
    target = Number(target) || 300;
    //設置x軸的步長值
    var stepValue = json.step || 2;
    //設置x軸的步長
    var step = 0;
    //設置回調函數
    var fn = json.fn;
    //參數a、b、c
    var a = json.a;
    a = Number(a) || 0.01;
    var b = json.b;
    b = Number(b) || -1*target/100;
    var c = json.c;
    c = Number(c) || 0;
    //初始值
    var left = parseFloat(getCSS(obj,'left'));
    if(left >= target){return;}
    var top = parseFloat(getCSS(obj,'top')); 
    //清除定時器
    if(obj.timer){return;}
    //聲明當前值cur
    var cur = {};
    obj.timer = setInterval(function(){
        //更新步長值
        step += stepValue; 
        //更新left和top值
        var x = left + step;
        var y = top + a*step*step + b*step + c;
        if(x > target){
            x = target;
        }
        test.style.left = x + 'px';
        test.style.top = y + 'px';  
        //如果到達目標點，清除定時器
        if(x == target){
            clearInterval(obj.timer);
            obj.timer = 0;
            fn && fn.call(obj);    
        }  
    },20);
}

　　下麵利用封裝的parabolMove.js來實現簡單的拋物線運動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button id="btn1">開始運動</button>
<button id="reset">還原</button>
<div id="test" style="height: 40px;width: 40px;background-color:pink;position:absolute;left:0px;top:100px;"></div>

<script src="http://files.cnblogs.com/files/xiaohuochai/parabolMove.js"></script>
<script>
reset.onclick = function(){
    history.go();
}
btn1.onclick = function(){
    parabolMove({obj:test,target:200});
}

</script>
</body>
</html>


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CSS3媒體查詢使用小結
    首先我們在使用Media的時候需要先設置下麵這段代碼，來相容移動設備的展示效果： 準備工作1：設置Meta標簽 這段代碼的幾個參數解釋： width = device-width：寬度等於當前設備的寬度 initial-scale：初始的縮放比例（預設設置為1.0） minimum-scale：允許 ...
  • avalon作用域圈定方法
    在使用avalonJS做前端開發時，需要圈定數據綁定作用域，存在三種方式： （1）ms-controller:此綁定屬性會按著就近原則來圈定作用域，先從本標簽開始網上查找 （2）ms-important:此綁定屬性僅查找本標簽，倘若查找不到vm綁定數據則原樣輸出在頁面上 （3）ms-skip:此綁定 ...
  • KnockoutJS 3.X API 第七章 其他技術(1) 載入和保存JSON數據
    Knockout允許您實現複雜的客戶端交互性，但幾乎所有Web應用程式還需要與伺服器交換數據，或至少將本地存儲的數據序列化。 最方便的交換或存儲數據的方式是JSON格式 - 大多數Ajax應用程式今天使用的格式。 載入或保存數據 Knockout不強制您使用任何一種特殊技術來載入或保存數據。 您可以... ...
  • avalon綁定屬性總結
    $model(所有非$屬性),$event(事件對象) 1、作用域圈定 ms-controller：按著就近原則自下而上掃描DOM樹 ms-important：僅掃描本節點及之下作為掃描區 ms-skip：使綁定失效 2、ms-duplex雙向綁定屬性：除了綁定（VM同步數據到V）數據到DOM節點中 ...
  • Web學習資源及手冊查詢整理
    入門瞭解html、css、js、jQuery：http://www.w3school.com.cn/， bootstrap、nodejs、php、jQuery入門：http://www.runoob.com/， bootstrp官方文檔及less教程：http://www.bootcss.com/， ...
  • [deviceone開發]-do_RichLabel的簡單示例
    一、簡介 do_RichLabel支持html格式的文本內容，但是只支持部分標簽，這個示例列出了一些支持的常用標簽，android能支持的標簽相對ios更少 二、效果圖 三、相關下載 https://github.com/do-project/code4do/tree/master/richlabe ...
  • zDialog 可拖拽彈出層
    zDialog彈出框： 代替window.open、window.alert、window.confirm；提供良好的用戶體驗； 水晶質感，設計細膩，外觀漂亮； 相容ie6/7/8、firefox2/3、Opera；彈出框在ie6下不會被select控制項穿透； 無外部css文件，引用Dialog.j ...
  • JavaScript--對象+函數
    1. 複雜數據類型 Object ECMAScript中的對象其實就是一組數據(屬性)和功能(方法)的集合。 1) 創建Object實例： 1.使用構造函數創建，new Object() var person = new Object(); person.name = "briup"; person ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類