javascript運動系列第四篇——抖動

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

× 目錄 [1]原理介紹 [2]代碼實現 [3]實例應用 前面的話 在運動系列中,前面分別介紹了勻速運動、變速運動和曲線運動。下麵介紹一種特殊的運動形式——抖動 原理介紹 抖動其實是往複運動的一種特殊形式,只不過往複運動是一種無摩擦力的無限運動,且以速度為參照依據;而抖動以位置作為參照依據,最終停在 ...


×
目錄
[1]原理介紹 [2]代碼實現 [3]實例應用

前面的話

  在運動系列中,前面分別介紹了勻速運動變速運動曲線運動。下麵介紹一種特殊的運動形式——抖動

 

原理介紹

  抖動其實是往複運動的一種特殊形式,只不過往複運動是一種無摩擦力的無限運動,且以速度為參照依據;而抖動以位置作為參照依據,最終停在起始點

  在網頁中最常見的一種抖動效果應該是視窗抖動提示了

  抖動元素從起始點開始,先向右移動最大距離len,然後移動到對稱的左邊位置;然後再向右移動稍微小一點的距離,再移動到對稱的左邊位置;以此迴圈,最終元素停止在起始點

 

代碼實現

  抖動在代碼實現上,無非就是通過定時器,每隔一段時間讓left或top值進行變化

  在運動實現中,有兩種距離變化的思路

思路一

div.style.left = div.offsetLeft + value;

  每次都獲取元素的當前樣式,再與變化的value值進行運算

思路二

left = div.offsetLeft;
......
div.style.left = left + value;

  在定時器開啟之前,獲取元素的初始樣式,再與變化的value值進行運算

  從抖動實現上來說,使用第二種方法,把距離變化完全交給value值變化來實現較為簡單

  所以,代碼實現的關鍵就是瞭解value是如何變化的

  假設最遠距離為目標target,同方向的距離間隔為步長step。如果用數字更直觀的表示,value的值類似於4、-4、2、-2、0。所以還需要一個變數dir來控制起始抖動方向,定時器每運動一次都要對dir進行更改

//定時器開啟前的變數聲明
dir = 1;
step = 0;
left = div.offsetLeft
//定時器裡面的代碼
value = dir*(target - step);
if(step >= target){
    step = target
}
div.style.left = left + value + 'px';
if(dir === -1){
    step++;    
}
dir = -dir;

  將抖動效果封裝為shakeMove.js

function getCSS(obj,style){
    if(window.getComputedStyle){
        return getComputedStyle(obj)[style];
    }
    return obj.currentStyle[style];
} 
function shakeMove(json){
    //聲明要進行抖動的元素
    var obj = json.obj;
    //聲明元素抖動的最遠距離
    var target = json.target;
    //預設值為20
    target = Number(target) || 20;
    //聲明元素的變化樣式
    var attr = json.attr;
    //預設為'left' 
    attr = attr || 'left'; 
    //聲明元素的起始抖動方向
    var dir = json.dir;
    //預設為'1',表示開始先向右抖動
    dir = Number(dir) || '1';
    //聲明元素每次抖動的變化幅度
    var stepValue = json.stepValue;
    stepValue = Number(stepValue) || 2;
    //聲明回調函數 
    var fn = json.fn;
    //聲明步長step
    var step = 0;
    //保存樣式初始值
    var attrValue = parseFloat(getCSS(obj,attr));
    //聲明參照值value
    var value;
    //清除定時器
    if(obj.timer){return;}
    //開啟定時器
    obj.timer = setInterval(function(){
        //抖動核心代碼
        value = dir*(target - step);
        //當步長值大於等於最大距離值target時
        if(step >= target){
            step = target
        }
        //更新樣式值
        obj.style[attr] = attrValue + value + 'px';
        //當元素到達起始點時,停止定時器
        if(step == target){
            clearInterval(obj.timer);
            obj.timer = 0;
            //設置回調函數
            fn && fn.call(obj);    
        }  
        //如果此時為反向運動,則步長值變化
        if(dir === -1){
            step = step + stepValue;    
        }
        //改變方向
        dir = -dir; 

    },50);        
} 

 

實例應用

  下麵利用封裝的shakeMove來實現一些簡單的抖動應用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test{
    height: 50px;
    width: 50px;
    position: absolute;
    top: 50px;
}    
</style>
</head>
<body>
<div id="box">
    <div class="test" style="left:10px;background:lightblue"></div>
    <div class="test" style="left:70px;background:lightgreen"></div>
    <div class="test" style="left:130px;background:pink"></div>
    <div class="test" style="left:190px;background:lightcoral"></div>
    <div class="test" style="left:250px;background:orange"></div>
</div>
<script src="http://files.cnblogs.com/files/xiaohuochai/shakeMove.js"></script>
<script>
var aDiv = box.getElementsByTagName('div');
for(var i = 0; i < aDiv.length; i++){
    aDiv[i].onmouseover = function(){
        shakeMove({obj:this,attr:'top'});
    }
}
</script>
</body>
</html>


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

-Advertisement-
Play Games
更多相關文章
  • 加 ^$ 整個字元串滿足要求 不加部分字元串滿足要求即可通過 \:轉義字元 \d:任意一個數字 (digit:數字) \w:任意一個單詞字元( 數字,字母,下劃線)(word:單詞) \s:任意一個空白字元(\t \r \n \f \x0B) (space:空) \D:任意一個非數字字元 \W:任意 ...
  • 1.查看id生成策略,2.查看是否是手動設置的id ;3.查看實體對象映射配置是否正確. 例如: public Emplopes(String name, char gender) { super(name, gender); // TODO Auto-generated constructor s ...
  • 一、滑鼠控制角色行走(每一步固定距離) 1.首先,要理解角色移動的原理。 2.現在來定義所需變數,在main窗體模塊中最頂端輸入以下代碼。 3.在main窗體中繪製一個timer時間控制項,將其Enabled(啟動)設為false,Interval(間隔)設為30(這個可以自定義,是用來調整角色移動速 ...
  • 1.領域驅動簡介 領域驅動本身是一款古老的軟體建模思想 領域驅動兩大特性:通用語言.限界上下文 1.通用語言是一種思想.解釋是:團隊共用的術語.便於交流.//比如行業的術語或者.一個圈子內通俗的名稱如開發者們對Visual Studio 的簡稱:VS. 2.限界上下文是整個應用程式之內一種概念性邊界 ...
  • 回到目錄 對於Lind.DDD這個敏捷框架來說,插件也是其中的一個亮點,所有被認為是插件(Plugins)的模塊都會繼承自IPlugins這個標示介面,它在程式啟動時會找到所有插件,並通過autofac註冊到運行時中,然後在使用時通過PluginManager對象進行獲取,即所有模塊只註冊一次,在使 ...
  • 談談互聯網後端基礎設施 談談互聯網後端基礎設施 來自:http://chuansong.me/n/717637351233 對於一個互聯網企業,後端服務是必不可少的一個組成部分。拋開業務應用來說,往下的基礎服務設施做到哪些才能夠保證業務的穩定可靠、易維護、高可用呢?縱觀整個互聯網技術體系再結合公司的 ...
  • 文檔目錄 本節內容: 簡介 一個快速示例 其它特性 啟動模板 如何使用 簡介 我們總是對不同的需求開發不同的應用。但至少在某些層面上,一次又一次地重覆實現通用的和類似的功能。如:授權,驗證,異常處理,日誌,本地化,資料庫連接管理,設置管理,審核日誌等功能。所以我們創建架構和最佳實踐,如分層和模塊架構 ...
  • letter-spacing:3px的意思就是字母之間的間距是3px; ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...