今回はCSSのプロパティ「transform-origin」の動作を確認します。
前回作成したラインアニメーション
前回の記事で作成したラインアニメーションは、rotateYでパスを回転させる際にY軸の位置がずれていたため、translateXでパスの位置を調節していました。
クリックでGIFアニメーションが再生されます
rotateY sample
transform-originを設定したサンプルです。
transform-origin
今回は上の画像のように、対象の中心にY軸の位置を設定します。
その際に使用するのが、transform-originプロパティです。
transform-originプロパティは変形させる要素の原点の位置を指定することができます。
サンプルコード
HTML
<script src="anime.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" class="Layer_1" version="1.1">
<g class="lines" fill="none">
<path id="a" stroke="#3cf" d="M 411.03,719.75 C ... "/>
</g>
</svg>
「anime.js」を読み込んで、パスにID「a」を設定しています。
d=”M 411…”の部分にはSVGファイルの値を貼り付けています。
CSS
#a {
transform-origin:50% 50%;
}
CSSのtransform-originプロパティで原点の位置を指定しています。
50% 50%とすることで要素の中心を指定することができます。
JavaScript
var animObj_1 = anime({targets:'#a',strokeDashoffset: [anime.setDashoffset, 0],easing:'linear',delay:0,
autoplay:true,duration:70000,rotateY:{value:'360deg',duration:28000}
});
targetsでID「a」を指定して、ラインの描かれる時間に70000、rotateYで回転する時間に28000を設定しています。
ラインアニメーションのサンプル
サンプルとして上記コードのラインアニメーションをキャプチャしたものを載せます。
クリックでGIFアニメーションが再生されます
