方法-アイコンをアニメーション化する
アイコンを使用してアニメーション効果を作成する方法を学びます。
バッテリーの充電
ステップ1)HTMLを追加します。
例
<div id="charging" class="fa"></div>
ステップ2)FontAwesomeアイコンライブラリを含める:
例
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Font Awesomeの詳細については、 FontAwesomeチュートリアルをご覧ください。
ステップ3)JavaScriptを追加します。
例
<script>
function chargebattery() {
var a;
a = document.getElementById("charging");
a.innerHTML = "";
setTimeout(function () {
a.innerHTML = "";
}, 1000);
setTimeout(function () {
a.innerHTML = "";
}, 2000);
setTimeout(function () {
a.innerHTML = "";
}, 3000);
setTimeout(function () {
a.innerHTML = "";
}, 4000);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>
例の説明
この例では、バッテリーが充電されているように見えますが、代わりに5つの異なるアイコンが表示されています。
呼び出された関数chargebattery()
は、アイコンのすべての置換と表示を行います。
この機能は、空のバッテリーアイコンを表示することから始まります。
1秒後、アイコンは新しいアイコンに置き換えられます。
「バッテリーが完全に充電される」まで、アイコンは毎秒新しいアイコンに置き換えられます。
このプロセスは5秒ごとに繰り返され、バッテリーが充電されているように見えます。
その他のアニメーションアイコン
例
例
例
例
例
例