LANG SELRCT

Google Apps Scriptのコードを書く場所  (新規作成: スプレッドシート | スクリプトエディタ

2021年5月5日水曜日

JavaScriptのanimate()でアニメーションを試してみたい


Elementの透明度と位置をアニメーションさせたい。

Element.animate() で実装できました。


デモ




コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>

<body>
<textarea id="ta">hello</textarea>
<script>

animation();
function animation() {
  elem("ta").animate({
    "opacity": [ 0, 1 ], // [ フレーム 1, フレーム 2 ]
    "color": [ "#fff", "#000" ] // [ フレーム 1, フレーム 2 ]
    },
    {
      "duration": 2000,
      "iterations": Infinity
    })

  elem("ta").animate({
    "marginLeft": ["0px", "100px"]
    },
    {
      "duration": 1000,
      "easing": "ease",
      "iterations": Infinity
    })
  
  // 移動後の位置を設定しないと元に戻る
  elem("ta").style.marginLeft = "100px";
}

function elem(id) {
  return document.getElementById(id);
}

</script>
</body>
</html>



参考

Element.animate()

Animation

Keyframe Formats

EffectTiming

最新の投稿

現在日時から四半期の開始日と終了日を知りたい

今の日時を取得して、現在の四半期の開始日と終了日を知りたくて書いたコードです。 コード.gs function myFunction() { const month = new Date().getMonth() + 1;// monthは0始まりなので+1 ...