ホームページ > 記事 > ウェブフロントエンド > JavaScriptモーションフレームワーク - チェーンモーションからパーフェクトモーションまでのサンプルコード (5)
JavaScriptモーションフレームワーク - チェーンモーションからパーフェクトモーションまでのサンプルコード (5)
- 黄舟オリジナル
- 2017-05-21 13:25:421340ブラウズ
この記事では主に JavaScriptMotionFramework の 5 番目の部分、チェーンモーションからパーフェクトモーションまでを紹介します。興味のある方は以前の記事に基づいたモーションフレームワーク
を参照してください。この記事では主に、動きの後に移動するチェーンの動きについて説明します。たとえば、多くの Web サイトでは、ボックスの出現と終了について説明します。出現すると、最初は幅が広くなり、次に高くなり、出現すると、最初は短くなり、次に狭くなります。終了します！ 以前の model
は:
のまず、動作の最後に fn() を実行します。fn は渡されるパラメータです。このパラメータは
をクリーンアップした後、手動で fn() を実行します。 fn で startMove(obj, json, fn) を呼び出し、fn で startMove(obj, json, fn) を呼び出すと、再生を続けることができます<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运动框架(五)：链式运动到完美运动</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
background: orange;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
op.onmouseover = function() {
startMove(op, {width:300,opacity:30}, function() {
startMove(op, {height:500});
});
};
op.onmouseout = function() {
startMove(op, {height:100}, function() {
startMove(op, {width:100,opacity:100});
})
};
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr];
}
}
function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true;
for (var attr in json) {
var cur = 0;
if (attr === 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
if (cur != json[attr]) {
bStop = false;
}
var speed = (json[attr] - cur)/10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
cur += speed;
if (attr === 'opacity') {
obj.style.filter = 'alpha(opacity:' + cur + ')';
obj.style.opacity = cur/100;
} else {
obj.style[attr] = cur + 'px';
}
}
if (bStop) {
clearInterval(obj.timer);
if (fn) fn();
}
}, 30);
}
</script>
</body>
</html> 最終的に抽出されたパーフェクト モーション フレームは、motionFrame.js のようになります:リーリー
以上がJavaScriptモーションフレームワーク - チェーンモーションからパーフェクトモーションまでのサンプルコード (5)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。