資訊專欄INFORMATION COLUMN
摘要：代碼屬性運動框架高動畫寬動畫透明度動畫高寬透明度鏈式動畫高寬透明度同時動畫引入的代碼運動框架運動標桿假設(shè)所有運動都達到了目標值去當前的值獲取小數(shù)四舍五入獲取整數(shù)算速度檢測屬性動畫是否全部達到目標值如果不是所有的動畫都達到目標值，標桿
html代碼
css屬性運動框架
//運動
//startMove(obj,{attr1:itarget1,attr2:itarget2},fn)
function startMove(obj,json,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag=true;//標桿,假設(shè)所有運動都達到了目標值
for(var attr in json)
{
//1.去當前的值
var icur = 0;
if(attr == "opacity") {
icur = Math.round(parseFloat(getStyle(obj,attr)) * 100); //parseFloat獲取小數(shù).Math.round四舍五入
} else {
icur = parseInt(getStyle(obj, attr)); //parseInt獲取整數(shù)
}
//2.算速度
var speed = (json[attr] - icur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
//3.檢測屬性動畫是否全部達到目標值
if(icur !== json[attr])
{
flag=false;//如果不是所有的動畫都達到目標值，標桿設(shè)為false
}
if(attr == "opacity")
{
obj.style.filter = "alpha(opacity:" + (icur + speed) + ")";
obj.style.opacity = (icur + speed) / 100;
}
else
{
obj.style[attr] = icur + speed + "px";
}
}
//在動畫結(jié)束的時候檢測是否有回調(diào)函數(shù),如果檢測到有回調(diào)函數(shù)，執(zhí)行
if(flag)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
}, 30)
}
//獲取對象屬性
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];//IE
}
else{
return getComputedStyle(obj,false)[attr];//火狐 chrome
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/89621.html
摘要：貝塞爾曲線貝塞爾曲線是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學曲線。通過調(diào)整控制點，貝塞爾曲線的形狀會發(fā)生變化。讓我們看看貝塞爾曲線的工作原理。貝塞爾曲線需要四個值，或者更準確地說它需要兩對數(shù)字。每對描述立方貝塞爾曲線控制點的和坐標。 這是專門探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 13 篇。 如果你錯過了前面的章節(jié)，可以在這里找到它們： JavaScript 是如何工作的：...
摘要：網(wǎng)頁逐幀動畫的實現(xiàn)方式網(wǎng)頁中的逐幀動畫，大致可分為兩大類的實現(xiàn)方式，分別是使用控制，和單純使用實現(xiàn)，兩者的優(yōu)劣總體概括來說就是動畫可控性更強，但開銷大，實現(xiàn)復雜。 網(wǎng)頁逐幀動畫的實現(xiàn)方式 網(wǎng)頁中的逐幀動畫，大致可分為兩大類的實現(xiàn)方式， 分別是使用JS控制，和單純使用CSS實現(xiàn)，兩者的優(yōu)劣總體概括來說就是： JS動畫可控性更強，但開銷大，實現(xiàn)復雜。 CSS動畫實現(xiàn)相對JS更簡單。常見的網(wǎng)...
摘要：通過這種方法產(chǎn)生的動畫，無法按照原有軌跡收回，所以在事件之后設(shè)置了定時器，定義在執(zhí)行動畫之后，執(zhí)行另一個動畫。方式存在較多局限性動畫只能執(zhí)行一次，循環(huán)效果需要通過定時器完成。 在普通的網(wǎng)頁開發(fā)中，動畫效果可以通過css3來實現(xiàn)大部分需求，在小程序開發(fā)中同樣可以使用css3，同時也可以通過api方式來實現(xiàn)。 指路：小程序animatiom動畫API API解讀 小程序中，通過調(diào)用api來...
摘要：通過這種方法產(chǎn)生的動畫，無法按照原有軌跡收回，所以在事件之后設(shè)置了定時器，定義在執(zhí)行動畫之后，執(zhí)行另一個動畫。方式存在較多局限性動畫只能執(zhí)行一次，循環(huán)效果需要通過定時器完成。 在普通的網(wǎng)頁開發(fā)中，動畫效果可以通過css3來實現(xiàn)大部分需求，在小程序開發(fā)中同樣可以使用css3，同時也可以通過api方式來實現(xiàn)。 指路：小程序animatiom動畫API API解讀 小程序中，通過調(diào)用api來...
閱讀 2476·2023-04-26 02:54
閱讀 2411·2021-10-14 09:43
閱讀 3508·2021-09-22 15:19
閱讀 2905·2019-08-30 15:44
閱讀 2767·2019-08-30 12:54
閱讀 1052·2019-08-29 18:43
閱讀 1998·2019-08-29 17:12
閱讀 1389·2019-08-29 16:40
