ホームページ > 記事 > ウェブフロントエンド > JS チェーン モーション フレームワークとサンプル (コード) の紹介
JS チェーン モーション フレームワークとサンプル (コード) の紹介
- 不言オリジナル
- 2018-09-01 11:47:311236ブラウズ
この記事では、js チェーン モーション フレームワークに関する概要 (コード) とサンプルを紹介します。必要な方は参考にしていただければ幸いです。
上記で紹介したモーションはすべて、オブジェクトが移動した後に終了します。たとえば、最初に幅が広くなり、次に高くなり、最後に透明度が高くなるなど、他の操作がある場合、前のモーション フレームでは状況が満たされません。モーションフレームワークに基づいて fnEnd 関数を追加して、モーションの完了後に操作を実行できます。
チェーンモーションフレーム
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}
else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj, attr, iTarget, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var cur=0;
if(attr==="opacity"){
cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100
}
else{
cur=parseInt(getStyle(obj,attr));
}
var speed = (iTarget - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur === iTarget) {
clearInterval(obj.timer);
if(fnEnd)fnEnd();//运动结束后，如果fnEnd参数传递进去了就执行fnEnd函数
} else {
if(attr==="opacity"){
obj.style.filter="alpha(opacity:"+cur+speed+")";
obj.style.opacity=(cur+speed)/100;
}else{
obj.style[attr]=cur+speed+"px";
}
}
}, 30)
}
チェーンモーションサンプル
上記のチェーンモーションフレームを使用して、最初に移動して幅を調整し、次に移動して高さを調整し、最後に移動して透明度を調整するpを作成します。
<!DOCTYPE html>
<html>
<head>
<title>链式运动</title>
<script src="move2.js"></script>
<style>
#p1{
width: 100px;
height: 100px;
background: red;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script>
window.onload=function(){
var op=document.getElementById("p1");
op.onmouseover=function(){
startMove(op,"width",300,function(){
startMove(op,"height",300,function(){
startMove(op,"opacity",100);
})
})
}
op.onmouseout=function(){
startMove(op,"opacity",30,function(){
startMove(op,"height",100,function(){
startMove(op,"width",100);
})
});
}
}
</script>
</head>
<body>
<p id="p1"></p>
</body>
</html>
関連する推奨事項:
JavaScript モーション フレームワーク チェーン モーションによる完璧なモーション サンプル コード (5)
javascript チェーン呼び出しをサポートする非同期呼び出しフレームワーク Async.Operation_javascript スキル
以上がJS チェーン モーション フレームワークとサンプル (コード) の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。