JavaScript | animate()で伸縮アニメーション
JavaScriptのanimate()メゾッドを使った伸縮・拡縮アニメーションの実装サンプルを紹介しています。
伸縮アニメーション
animate()メゾッドを利用した伸縮アニメーションのシンプルな動作サンプルとJavaScriptのサンプルコードです。
See the Pen JavaScript | Bound animation with animate by yochans (@yochans) on CodePen.
HTMLには伸縮アニメーションさせたい要素としてdivタグで「.item」を設置しています。
「width」を調節して拡縮させるバージョンに「.width」、「scale」を利用したバージョンに「.scale」というクラス名も指定しています。
<div class="item width"></div>
<div class="item scale"></div>伸縮アニメーションさせるHTML要素「.item」には以下のCSSを指定しています。
「scale」で指定した場合は拡縮の基準点がデフォルトでは要素の中心となるので、サンプル用に「transform-origin」で変形の基準点を左上に変更しています。
.item {
width: 80px;
height: 80px;
background: #4169e1;
margin: 20px;
transform-origin: 0 0;
}widthやheightで伸縮アニメーション
サンプルではアニメーションのタイムラインに「width」を使って値を調節しています。
高さを伸縮させたい場合は「height」で指定する事が可能です。
オプションに「iterations: Infinity」「direction: 'alternate’」を指定して伸縮アニメーションを無限ループさせています。
document.querySelector(`.width`).animate(
[
{ width: '80px' },
{ width: '320px' }
],
{
duration: 1000,
iterations: Infinity,
direction: 'alternate'
}
);「width」や「height」を使う場合は他のHTML要素を押しやります。
他のHTML要素に影響しないようにするためにはアニメーションさせる要素は「position」プロパティで「absolute」など絶対位置で指定可能な状態にしておく必要があります。
scaleで伸縮アニメーション
アニメーションのタイムラインに「transform」の「scale」を使って値を調節しているバージョンになります。
「scale」の値はひとつであれば縦横セットの拡大率が指定可能で、横のみであれば「4, 1」縦のみであれば「1, 4」のように指定する事が可能です。
document.querySelector(`.scale`).animate(
[
{ transform: 'scale(1, 1)' },
{ transform: 'scale(4, 1)' }
],
{
duration: 1000,
iterations: Infinity,
direction: 'alternate'
}
);