LoginSignup
0
1
@Mount(Build Mount)

第13回 JavaScript アニメーションによる拡大・縮小（animate版）

Last updated at Posted at 2024-04-05

はじめに

今回は、アニメーションによる要素の拡大・縮小を試したいと思います。
ウェブサイトの広告でよくみかける、広告表示時やクローズ時にアニメーションで拡大・縮小する動作です。

ちょっと動きがあるほうがほんの少しのユーザーの助けになったり、リッチに見えるのかなと思います。
その時間がもったいかなとも思ったり。
気にかけてウェブをみていると、あまり見かけないような気もしました。

Windowsでは、ウィンドウの切り替えでは短い時間ですが動きはあるようです。
あってもいいのかなとも思いましたので、トライしてみたいと思います。

今回実施する内容

JavaScriptのanimateを使用して、要素をクリックした時に拡大・縮小を実施します。
以下の４つのパターンを実施します。

  • 拡大
  • 縮小（縮小後、クリックしても動作なし）
  • 水平方向に拡大（拡大後、すぐに初期のサイズに戻る）
  • 垂直方向に縮小
    Scale1.gif

ソースコード(Git Hub)

環境

OS: Windows 11 JP (64bit)
Microsoft Edge:バージョン 123.0.2420.65 (公式ビルド) (64 ビット)

参考

Element: animate()メソッド
キーフレームの形式
transform-function
animation-fill-mode

用語

アニメーションによる拡大・縮小

関数の確認

Element: animate()メソッドを使用して、アニメーションを作成したいと思います。

構文
animate(keyframes, options)

引数

keyframes
　キーフレームオブジェクトの配列、またはプロパティが反復処理可能な値の配列である単一のキーフレームオブジェクトのどちらかです。詳しくは Keyframe の書式を参照してください。

options
アニメーションの再生時間を表す整数値（ミリ秒単位）、または KeyframeEffect() のオプションの引数 (en-US)や以下のオプションで記述された 1 つ以上のタイミングプロパティを含むオブジェクトのどちらかです。

上記の記載と参考になるJavaScriptも記載されていますので、それを用いて拡大・縮小のアニメーションを作成します。

引数のkeyframesとしては、キーフレームの形式に記載があります。

キーフレームは、animatable CSS propertiesのいずれかのプロパティと値のペアを指定します。プロパティ名はキャメルケースを使用して指定しますので、例えば background-color は backgroundColor となり、background-position-x は backgroundPositionX となります。margin のような一括指定も使用できます。

ということなので、CSSで定義されるプロパティ名を少し変えれば、animateの引数keyframesで使用できると理解しました。

transform-functionデータ型は、以下に示した変換関数のうちの一つを使用して指定します。各関数は 2D または 3D の座標操作を適用します。

とありますので、今回は、拡大縮小を実施するため、transform-functionの、scale、scaleX、scaleYを使用します。
そのほかにscale3dやscaleZがあるようですが、今回拡大・縮小で使用するdiv要素は平面なため、これらの確認は実施しません。

基本的な構文は、以下の通りです。

transform: scale(1,1);

transform:の後に変換関数を記載するということです。

optionsについては、今回はdurationとfillを使用します。

duration 随意
アニメーションの各反復が完了するまでにかかるミリ秒数。既定値は 0 です。これは技術的にはオプションですが、この値が 0 の場合、アニメーションは実行されないことに注意してください。

fill 随意
アニメーションの効果を再生前に要素に反映させるか ()、アニメーションの再生が完了した後も保持するか ()、または を指定します。デフォルトは です。"backwards""forwards"both"none"

MDNが日本語翻訳されており、意味が分かりづらくなってしまっています。

値 意味
backwards 再生前の状態に戻す
forwards 再生完了後の状態を保持する

初期値はbackwards。

ソース

シンプルに最初に示した動作を記載していきます。

transform_scale_js.html
transform_scale_js.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transform scale JavaScript</title>
    <link rel="stylesheet" href="transform_scale_js.css" type="text/css">
    <script src="transform_scale_js.js" defer></script>
</head>
<body>
    <div id="scale1">拡大はここをクリック</div>
    <div id="scale2">縮小はここをクリック</div>
    <div id="scale3">水平方向拡大はここをクリック</div>
    <div id="scale4">垂直方向縮小はここをクリック</div>
</body>
</html>
transform_scale_js.css
transform_scale_js.css
#scale1 {
  background-color:yellow;
  position: absolute;
  width: 300px;
  height: 100px;
}

#scale2 {
  background-color:red;
  position: absolute;
  width: 300px;
  height: 100px;
  top: 150px;
}

#scale3 {
  background-color:blue;
  position: absolute;
  width: 300px;
  height: 100px;
  top: 300px;
}

#scale4 {
  background-color:green;
  position: absolute;
  width: 300px;
  height: 100px;
  top: 450px;
}
transform_scale_js.js
transform_scale_js.js
document.getElementById("scale1").addEventListener("click", () => {
  clickScaleIn("scale1");
});

document.getElementById("scale2").addEventListener("click", () => {
  clickScaleOut("scale2");
});

document.getElementById("scale3").addEventListener("click", () => {
  clickScaleIn2("scale3");
});

document.getElementById("scale4").addEventListener("click", () => {
  clickScaleOut2("scale4");
});

function clickScaleIn(name) {
  const animation = document.getElementById(name).animate(
    [
      //キーフレーム
      {transform: 'scale(1)'},
      {transform: 'scale(2)'}
    ],    
    {
      //タイミングオプション
      duration: 1000,
      fill: "forwards"
    }
  );
}

function clickScaleOut(name) {
  const animation = document.getElementById(name).animate(
    [
      {transform: 'scale(0.5)'}
    ],    
    {
      duration: 1000,
      fill: "forwards"
    }
  );
}

function clickScaleIn2(name) {
  const animation = document.getElementById(name).animate(
    [
      //キーフレーム
      {transform: 'scale(1)'},
      {transform: 'scale(2,1)'}
    ],    
    {
      //タイミングオプション
      duration: 1000,
    }
  );
}

function clickScaleOut2(name) {
  const animation = document.getElementById(name).animate(
    [
      //キーフレーム
      {transform: 'scale(1)'},
      {transform: 'scaleY(0.5)'}
    ],    
    {
      //タイミングオプション
      duration: 1000,
      fill: "forwards"
    }
  );
}

４つの動作の違いについて

以下の４つのパターンの動作の違いとソースの違いを説明します。

  • 拡大
  • 縮小（縮小後、クリックしても動作なし）
  • 水平方向に拡大（拡大後、すぐに初期のサイズに戻る）
  • 垂直方向に縮小

拡大のソースと動作

拡大
    [
      //キーフレーム
      {transform: 'scale(1)'},
      {transform: 'scale(2)'}
    ],    
    {
      //タイミングオプション
      duration: 1000,
      fill: "forwards"
    }

キーフレームは、「キーフレームの開始」と「キーフレームの終了」のscale(1)とscale(2) を設定し、「キーフレームの開始」は等倍で、「キーフレームの終了」は、２倍拡大します。

タイミングオプションは、animation-fill-mode を参照して、
duration: 1000でアニメーションは１秒間、
fill: "forwards"で、最後のアニメーションを保持であり、この例では２倍に拡大した状態が維持されます。
クリックしてアニメーション終了後に再度クリックすると、再度等倍に戻って、２倍まで拡大します。

縮小（縮小後、クリックしても動作なし）のソースと動作

縮小（縮小後、クリックしても動作なし）
    [
      {transform: 'scale(0.5)'}
    ],    
    {
      duration: 1000,
      fill: "forwards"
    }

キーフレームは、「キーフレームの終了」のscale(0.5)を設定し、「キーフレームの開始」は暗黙の等倍で、「キーフレームの終了」は、０．５倍に縮小します。

タイミングオプションは、duration: 1000でアニメーションは１秒間、
fill: "forwards"で、最後のアニメーションを保持であり、この例では０．５倍に縮小した状態が維持されます。
クリックしてアニメーション終了後に再度クリックすると、何もアニメーションは起こりません。
暗黙の等倍の場合、「キーフレームの終了」である０．５倍になっているとその状態から暗黙の「キーフレームの開始」の等倍に戻って、「キーフレームの終了」の０．５倍に縮小されることはないようです。

水平方向に拡大（拡大後、すぐに初期のサイズに戻る）のソースと動作

水平方向に拡大（拡大後、すぐに初期のサイズに戻る）
    [
      //キーフレーム
      {transform: 'scale(1)'},
      {transform: 'scale(2,1)'}
    ],    
    {
      //タイミングオプション
      duration: 1000,
    }

キーフレームは、「キーフレームの開始」と「キーフレームの終了」のscale(1)とscale(2,1) を設定し、「キーフレームの開始」は等倍で、「キーフレームの終了」は、X方向（水平方向）を２倍拡大します。
scaleの引数2つ目は省略可能で、１つのみの場合は、X軸、Y軸とも同じ値で拡大・縮小しますが、２つ記載する場合、X軸とY軸を別々に設定できます。
scale(2,1)とするとX軸は２倍、Y軸は等倍となります。

タイミングオプションは、duration: 1000でアニメーションは１秒間のみで、
これまで設定していたfill: "forwards"を設定しないと、アニメーションの最後で「キーフレームの開始」の等倍に戻ります。
クリックしてアニメーション終了後に再度クリックすると、水平方向に２倍まで拡大し、その後最初の「キーフレームの開始」の等倍に戻ります。

垂直方向に縮小のソースと動作

垂直方向に縮小
    [
      //キーフレーム
      {transform: 'scale(1)'},
      {transform: 'scaleY(0.5)'}
    ],    
    {
      //タイミングオプション
      duration: 1000,
      fill: "forwards"
    }

キーフレームは、「キーフレームの開始」と「キーフレームの終了」のscale(1)とscaleY(0.5) を設定し、「キーフレームの開始」は等倍で、「キーフレームの終了」は、Y方向（垂直方向）を０．５倍に縮小します。
scaleYはY軸方向のみの拡大・縮小します。

タイミングオプションは、duration: 1000でアニメーションは１秒間、
fill: "forwards"で、最後のアニメーションを保持であり、この例では０．５倍に拡大した状態が維持されます。
クリックしてアニメーション終了後に再度クリックすると、等倍に戻って垂直方向に０．５倍まで縮小します。

おわりに

animateとtransform:scaleを使用して、要素の拡大・縮小を実施しました。
次回は、animateではなく、CSSで実施する方法を試したいと思います。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1