javascript animateを使用して斜めに移動する要素を作成する
- 作成日 2023.01.12
- javascript
- javascript

javascriptで、animateを使用して斜めに移動する要素を作成するサンプルコードを記述してます。「animate」を使用して「transform」に方向を指定することで可能です。
環境
- OS windows11 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 108.0.5359.125
斜めに移動する要素を作成
斜めに移動する要素を作成するには、
1. 「animate」で変化させるstyleに「transform」を指定
することで可能です。
<style>
.box {
width: 80px;
height: 80px;
background: #37B507;
margin: 5px;
position:absolute;
}
</style>
<div class="box"></div>
<script>
document.querySelectorAll('.box')[0].animate(
// 変化させるスタイル
[
{ transform: 'translate(0, 0)' },
{ transform: 'translate(150px, 150px)' }
],
// プロパティ
{
duration: 1000,
iterations: Infinity,
direction: 'alternate'
}
);
</script>
実行結果

「animate」のプロパティに設定できる値は、以下となります。
プロパティ名 | 内容 | 値 |
---|---|---|
duration | 再生時間 (ミリ秒) | ミリ秒を指定 |
delay | 再生までの 待機時間 (ミリ秒) | ミリ秒を指定(デフォルトは0) |
direction | 再生方向 | “normal” 0%から100%へ(デフォルト) “reverse” 100%から0%へ “alternate” 0%から100%→100%から0%で再生 “alternate-reverse” alternateの逆方向 |
easing | アニメーション 変化方法 | “linear” 一定の速度で変化(デフォルト) “ease” 開始時と終了時は緩やかに変化 “ease-in” 最初はゆっくり、だんだん速く “ease-in-out” 最初は速く、だんだんゆっくり “ease-out” 開始時と終了時はかなり緩やか “step-start”最初に100%の状態に変化 “steps( 引数1 , 引数2 )” 数値により段階的 “step-end” 0%の状態から、最後に100% “cubic-bezier( 引数1 , 引数2 , 引数3 , 引数4)” ベジエ曲線の座標で変化 |
endDelay | 再生終了後の 待機時間 | ミリ秒(規定値は0) |
fill | アニメーション 前後の状態 | “none” cssのみ(デフォルト) “forwards” 終了状態を維持 “backwards” 開始時の状態を適用 “both” forwardsとbackwardsの両方 |
iterationStart | 再生開始 タイミング 「0.5」だと 50% の位置から 始まり1周 | 0以上の小数(デフォルトは0) |
iterations | 再生回数 | 0以上の小数(デフォルトは1) 無限ループは「Infinity」 |
id | 識別ID | 文字列で指定 |
composite | アニメーションの 状態と処理 | “replace” 現在の状態で置き換え(デフォルト) “add” 状態にアニメーションの状態を追加 “accumulate” 状態にアニメーションの状態を累積 |
iterationComposite | 繰り返し時 の状態 | “replace” 現在の状態で置き換え “accumulate” これまでの状態を累積 |
「translate」の値を変えることで斜めに移動する方向を逆にすることができます。
<script>
document.querySelectorAll('.box')[0].animate(
// 変化させるスタイル
[
{ transform: 'translate(150px, 0)' },
{ transform: 'translate(0, 150px)' }
],
// プロパティ
{
duration: 1000,
iterations: Infinity,
direction: 'alternate'
}
);
</script>
実行結果

サンプルコード
以下は、
「実行」ボタンをクリックすると、要素を斜めに移動させる
サンプルコードとなります。
※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<!-- MDB -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>
<body>
<div class="container text-center w-25" style="margin-top:150px">
<h2><span class="badge badge-warning">要素</span></h2>
<button id="btn" type="button" class="btn btn-raised btn-warning">
実行
</button>
</div>
<script>
// クリックイベントを登録
btn.onclick = () => {
document.getElementsByClassName('badge')[0].animate(
// 変化させるスタイル
[
{ transform: 'translate(0, 0)' },
{ transform: 'translate(150px, 150px)' }
],
// プロパティ
{
duration: 1000,
iterations: Infinity,
direction: 'alternate'
}
);
};
</script>
</body>
</html>
横に伸びていることが確認できます。

-
前の記事
Rust 日時をUTCに変換する 2023.01.11
-
次の記事
Oracle Database 日付を文字列に変換する 2023.01.12
コメントを書く