jq時間戳動畫

来源:http://www.cnblogs.com/hao123456/archive/2016/05/25/5525933.html
-Advertisement-
Play Games

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.or ...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>

<style>


#box{
opacity:1;
position: relative;
top:100px;
left: 0px;
width:300px;
height:300px;
border:1px #ccc solid;

}
#book{
opacity:1;
position:absolute;
top:100px;
left: 100px;
width:100px;
height:100px;
background: red;
}

#book1{
opacity:1;
position:absolute;
top:220px;
left: 0px;
width:100px;
height:100px;
background: red;
}
.line{

position:absolute;
top:0px;
left: 200px;
width:1px;
height:500px;
background:#000;

}
</style>
<!--<script src="../jquery-2.2.3.js"></script>-->
<body>
<button id="one">jQuery動畫的模擬實現:放大</button>
<button id="two">jQuery動畫的模擬實現:縮小</button>
<div id="box">
<div id="book" ></div>
</div>
<!-- <div id="book1" ></div>-->
<!-- <div class="line"></div>-->
<script >
/*在ie中 consloe.log 如果不在控制台的時候會報錯， 調試的時候 按f12 控制台 即可*/

var book = document.getElementById('book');
var book1 = document.getElementById('book1');
var one = document.getElementById('one');
var two = document.getElementById('two');

/*var $book = $('#book');
var i = 10
while(i){
$book.append("<li>11</li>")
i--;
}*/


////////////
//創建動畫緩動對象 //
////////////
//生成屬性對應的動畫演算法對象
// tweens保存每一個屬性對應的緩動控制對象
//properties[k] 值
// k 是建
//animation 動畫對象
// 參數為：animation.tweens.push( new Tween(properties[k], k, animation) )
//Tween 構造函數
// this.elem 就是用戶傳進來的dom節點
//this.prop = prop; 對象的屬性
//this.easing = "swing"; //動畫緩動演算法
//this.end動畫最終值
//單位 this.unit = "px"
//Tween 函數是初始化構造函數

function Tween(value, prop, animation) {
//初始化
this.elem = animation.elem;
this.prop = prop;
this.easing = "swing"; //動畫緩動演算法
this.options = animation.options;
//獲取初始值，就是獲取動畫樣式的值， this.get();
this.start = this.now = this.get();
//動畫最終值，就是用戶輸入的值
this.end = value;
//單位
this.unit = "px"
}
//獲取動畫樣式
function getStyles(elem, attr) {
//return elem.ownerDocument.defaultView.getComputedStyle(elem, null);

if(elem.currentStyle) {
// ie //這樣相容性強
//console.log('attr='+attr+'||elem.currentStyle[attr]='+elem.currentStyle[attr])
if(elem.currentStyle[attr]=='auto'){
elem.style[attr] = '0px';
}
return elem.currentStyle[attr];
} else {
//ff w3c.

return getComputedStyle(elem,false)[attr];
}
};

//動畫演算法
function swing(p) {
//p 是動畫時間比 0 ~ 1
//Math.cos(x) x 的餘弦值。返回的是 1.0 到 -1.0 之間的數；
//(p * Math.PI) 是 0到3.14
//(p * Math.PI)/2 是0到1.57
//所以 Math.cos(p * Math.PI) / 2 值： 0.5 ~ -05
//tmpe 值越大跑的越快
var tmpe = 0.5 - Math.cos(p * Math.PI) / 2;
// tmpe = Math.sin(p*Math.PI/2)
// console.log('p * Math.PI='+Math.sin(p * Math.PI))
//console.log('Math.sin(p * Math.PI)='+ Math.sin(p*Math.PI/2));
// console.log('Math.cos(p * Math.PI) / 2='+ Math.cos(p * Math.PI) / 2)
// console.log('tmpe='+tmpe)
return tmpe
}


Tween.prototype = {
//獲取元素的當前屬性
get: function() {
var computed = getStyles(this.elem, this.prop);
//var ret = computed.getPropertyValue(this.prop) || computed[this.prop];
//var ret = computed[this.prop];
//獲取樣式的值
//return parseFloat(ret);
return parseFloat(computed);
},
//運行動畫
run:function(percent){
//percent 動畫時間比 0-1
var eased;
//根據緩動演算法改變percent
this.pos = eased = swing(percent);
//獲取具體的改變坐標值 this.now緩衝值

//this.now （等於結束動畫位置 - 開始動畫的位置）* 時間戳比例，時間戳比例是從0 ~ 1 this.start 是起始的位置
this.now = (this.end - this.start) * eased + this.start;
//console.log('this.now='+this.now)

//console.log('this.prop='+this.prop+'||this.start='+this.start)
//最終改變坐標
//console.log('this.prop='+this.prop+'||this.now='+this.now)

this.elem.style[this.prop] = this.now + "px";
return this;
}
}


////////
//動畫類 //
////////
//動畫對象 elem
//properties 動畫屬性
//options 動畫時間
function Animation(elem, properties, options){
//檢查動畫是否在執行
if (Animation.timerId !=undefined && Animation.timerId) {
return false;
}
//動畫對象
//animation.elem 動畫對象
//animation.props 動畫屬性
//options.options 動畫時間
//Animation.fxNow || createFxNow() 開始動畫的時間
//tweens : [] //存放每個屬性的緩動對象，用於動畫
var animation = {
elem : elem,
props : properties,
originalOptions : options,
options : options,
startTime : null,//動畫開始時間
tweens : [] //存放每個屬性的緩動對象，用於動畫
}

//生成屬性對應的動畫演算法對象
// tweens保存每一個屬性對應的緩動控制對象
//properties[k] 值
// k 是建
//animation 動畫對象
for (var k in properties) {

// tweens保存每一個屬性對應的緩動控制對象
animation.tweens.push( new Tween(properties[k], k, animation) )
}

//動畫狀態
//var stopped;
//把 animation.startTime=Animation.fxNow || createFxNow(); 放在這裡 為了避免 for (var k in properties) for迴圈的時候如果屬性多的時候會出現時間誤差，雖然不是很大，但是如果屬性很多的話就顯得很明顯
animation.startTime=Animation.fxNow || createFxNow();
//動畫的定時器調用包裝器 動畫迴圈函數 tick 每13毫秒執行一次
var tick = function() {
// console.log(1)
//如果 stopped 為真則 停止函數
//if (stopped) {
// return false;
//}

//動畫時間演算法 每次更新動畫的時間戳
var currentTime = Animation.fxNow || createFxNow();
//運動時間遞減
remaining = Math.max(0, animation.startTime + animation.options.duration - currentTime),
//時間比
temp = remaining / animation.options.duration || 0,
//取反時間比
percent = 1 - temp;

var index = 0,
length = animation.tweens.length;

//執行動畫改變
for (; index < length; index++) {
//percent改變值
//animation.tweens[index] 動畫的對 象percent 動畫時間比 0-1
// run 就是一個動畫執行多少個動畫屬性
animation.tweens[index].run(percent);
}

//是否繼續，還是停止動畫 percent <= 1 表示動畫已經到達位置了
if (percent <= 1 && length) {

return remaining;

} else {
//停止 動畫

return false;
}

}
tick.elem = elem;
tick.anim = animation;
//只是調用一次而已
//console.log(3333)
Animation.fx.timer(tick);
}

//創建 獲取時間戳 函數
function createFxNow() {
setTimeout(function() {
//給 Animation.fxNow = undefined; 一個空的對象
Animation.fxNow = undefined;
});
//Date.now() 時間戳
return (Animation.fxNow = Date.now());
}


Animation.fx = {
//開始動畫隊列 這個函數也是執行一次而已
timer: function(timer) {

//這裡是把函數放到一個數組裡面？有何用處
Animation.timer=timer;

if (timer()) { //timer() 只是調用一個而已,就是說有這個動畫時候就執行函數 返回一個false 或者是 remaining;
//開始執行動畫 走這裡
Animation.fx.start();
}
},
//開始迴圈 這個函數也是執行一次而已
start: function() {
if (!Animation.timerId) {

Animation.timerId = setInterval(Animation.fx.tick, 13);
}
},
//停止迴圈 停止定時器
stop:function(){
clearInterval(Animation.timerId);
Animation.timerId = null;

},
//迴圈的的檢測 重點是這裡
tick: function() {
var timer,
i = 0;
//每次更新時間戳
Animation.fxNow = Date.now();
//console.log(1)
//如果所有的動畫都執行完了就停止這個定時器
if (!Animation.timer()) {
//console.log('Animation.timer()')
//console.log(!Animation.timer())
Animation.fx.stop();
}
//問題出在這裡，因為當執行完只有 Animation.fxNow 時間戳變數值還在，所以就產生了bug
Animation.fxNow = undefined;
}
} 

one.onclick=function(){
Animation(book, {
'width': '300',
'height':'300',
'marginLeft':'-100',
'marginTop':'-100'
}, {
duration: 1000
})

}

two.onclick=function() {

Animation(book, {
width: '100',
height:'100',
marginLeft:'0',
marginTop:'0'
}, {
duration: 1000
})
} 

 

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


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

-Advertisement-
Play Games
更多相關文章
  • 清空Fragment回退棧中某個Fragment
    即彈出Tag為CreateOneFragment之上的所有（包括自身）的Fragment。 popBackStackImmediate(name,flag); 第二個參數：只能是 0 或者 1（POP_BACK_STACK_INCLUSIVE）； 第一個參數為null時， 第二個參數為0時： 會彈出 ...
  • Label自適應高度
    每次都逼我翻代碼 這次乾脆寫博客裡面算了 哈哈哈 CGSize maxSize = CGSizeMake(ScreenWith-30,NSIntegerMax); CGSize labelsize = [addressContentLabel.text boundingRectWithSize:ma ...
  • 安卓動態調試七種武器之長生劍 - Smali Instrumentation
    安卓動態調試七種武器之長生劍 - Smali Instrumentation 作者：蒸米@阿裡聚安全 0x00 序 隨著移動安全越來越火，各種調試工具也都層出不窮，但因為環境和需求的不同，並沒有工具是萬能的。另外工具是死的，人是活的，如果能搞懂工具的原理再結合上自身的經驗，你也可以創造出屬於自己的調 ...
  • color.xml
    寫控制項的時候經常會遇到顏色選擇問題，下麵貼出常用顏色表示，方便選擇。 <?xml version="1.0" encoding="utf-8"?><resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrim ...
  • android studio怎麼分享項目到Git@OSC托管
    鄙人初次發表，如有不妥之處，敬請批評指正 1，安裝git。 git下載地址：http://git-scm.com/downloads/ 2，在AS 的File->Settings->Version Control->Git 配置git.exe命令路徑，如下圖： 配置AS 的git 配置AS 的git ...
  • 類似京東商城客戶端應用源碼
    IOS商城，電商開源APP，類似京東商城，天貓商城，淘寶，去年開發的一個項目，現在把它分享出來。服務端是java 商城，對應項目是Shop-for-JavaWeb1.App使用MVC框架完成開發。2.使用CocoaPods引入各大第三方組件：pod 'Masonry', '~> 0.6.4'pod ...
  • android xml實現animation 4種動畫效果
    animation有四種動畫類型 分別為alpha(透明的漸變)、rotate(旋轉)、scale(尺寸伸縮)、translate(移動)，二實現的分發有兩種，一種是javaCode，另外一種是XML，而我今天要說的是XML實現的方法，個人感覺javaCode的實現方法比xml要簡單，所以有需要的可 ...
  • 高仿拼多多應用源碼
    本項目是用swift仿拼多多完整項目的APP。拼多多，用戶通過發起和朋友，家人，鄰居等的拼團，以更低的價格，拼團購買商品。拼多多凝聚更多人的力量，用更低的價格買到更好的東西。純代碼完成，自動佈局採用SnapKit框架，網路請求採用Alamofire框架............此項目是本人學習swif ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類