前回、サンプル的にanime.jsを使ってアイコンとか文字を動かしてみた時、考え方が纏まらなくてソースが汚くなったので、考えた内容を自分なりに整理してみる。
１．サンプルアニメーション
２．枠というか、フレームを考える。
横からシュシュシュとか、拡大からのぎゅーんとかする時、動き始めの舞台袖で演者がスタンバってるとこ見えちゃうと若干萎えるから、アニメーションの表示エリアを絞って、枠外は表示しないようにする。
div.anime-str-arrow-left {
width: 220px;
height: 55px;
overflow: hidden;
}
widthとheightで大きさ決めたら、overflow: hiddenで範囲外の見切れ部分は表示しない設定。
あと、このフレームの左上を起点にして相対的な位置関係でシュッと出てきた文字をストップさせたいので、positionの指定を入れる。
/* 枠の方にはこれを設定 */ position: relative; /* 座標で配置する要素にはこれを設定 */ position: absolute;
アイコン画像を指定する。
img要素でもよかったんだけど、今はCSSも含めて勉強中だからClass使って背景画像の形で画像を設定してみる。
div.icon-base {
position: absolute;
width: 50px;
height: 50px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
div.wansuke-kirarin {
background-image: url(https://yizm.work/wp-content/uploads/2018/11/wan2.png);
}
同じ大きさでアイコン作ることになったら使いまわしできるよーに、icon-baseというClassで『相対位置、縦横50px、画像は領域のサイズに合わせて、繰り返し表示なし、位置は中央揃え』まで宣言しておく。
ほんで、wansuke-kirarinというクラスで背景に画像のURLを指定して画像をはめ込む。
これで、こんな感じのタグを書けばアイコンが標示される訳ですねー。
<div class="icon-base wansuke-kirarin"></div>
３．次にアニメーションさせるテキストに思いを馳せる。
しゅしゅしゅしゅって文字出したいんだけど、最初っからゴリゴリ文字の要素をHTMLに書くと違う文字で使いまわそうとした時、大変そうだなーと思う訳です。
かと言ってテキストで文字いれてしまうと文字が画面上に見えてしまうしなー
と、言うわけで今回はタグ属性に文字列を指定したら、その属性に設定したテキスト要素生成してスライドするようにしてみるのであります。
※ ここからのJavascriptコードにはJqueryを使っているよ。 ※
$('div.anime-str-arrow-left').each(function () {
let $logo = $(this);
let fonts = $logo.attr('anime-str').split('');
let face = $logo.attr('face');
let lg_width = parseInt($logo.css('width'))-80 ;
if (fonts.length) {
let step_lng = lg_width / fonts.length
for (let i=0 ; i < fonts.length ; i++) {
let $font = $("<font />").attr('face', face).attr('stop-pos',step_lng*i-lg_width - 10).addClass('slide-left').text(fonts[i]);
$logo.append($font);
}
}
});
はい、ズドン。
今回は、anime-str-arrow-leftというClassをターゲットに。
まず、「let fonts = $logo.attr('anime-str').split('')」でanime-str属性を取得して１文字づつ分けた配列作りまーす。
で、「let face = $logo.attr('face');」ではフォント設定を取ってきておきまーす。
（これは手抜きして機種依存のローカル設定なので見る端末によって反映されましぇん。）
はい、ここから計算入るよ。
「let lg_width = parseInt($logo.css('width'))-80 ;」この一行で、この枠の横幅CSS「220px」を取得してparseInt()に渡して「px」をカットした数値化した数字を取得する。（-80は微調整的な感覚）
そしたら、「let step_lng = lg_width / fonts.length」で、文字数で枠の幅を割ってぇ。
forループで１文字づつfontタグ作ったら、アニメーションの表示位置として、
「.attr('stop-pos',step_lng*i-lg_width - 10)」を設定。stop-pos属性に文字数で割った標示幅に何文字目を書けて「-10」は微調整的な感覚。それを、枠内の要素として追加！
４．アニメーションシナリオを組み立てる。
アイコンがぎゅんってなって、文字が１つづつすすすすって出てくる感じね。
ここから、いよいよanime.js使っていくぜ。
var anime_sample1 = anime.timeline({duration: 300, direction: 'normal', easing: 'easeInOutQuart', loop:1 });
anime.timelineでベースとなるtimeline構造体？みたいなのが取れる。
最初の引数で渡すのは、このアニメーションシナリオのベースになる基本ルールだけ指定しとく。
今回だと、ざっとこんな感じ。
duration : アニメーションのフレーム時間（300ミリ秒で指定のアクションするってこと。）
direction : 再生方向（他にreverse逆再生、alternate行って戻ってするとかあるよ。）
easing : 動きの特徴（これもいろいろあるけど種類多いから公式Documents見たほうが早いかな。）
loop : 繰り返し（１回で終わりってこと。trueにすると無限に繰り返すよ。）
で、動きを追加していく。。。
anime_sample1.add({ targets: '.spin-in-opacity', opacity: [0, 1], duration: 1500, scale: [3, 1], rotate: '2turn', easing: 'spring'});
さっき取得したtimelineに.addでアニメーションを追加する。
targets : セレクタクエリで対象オブジェクトが指定できるよ。
opacity : [0, 1] これはCSSの値に変化を加えるってことで、値を０→１に変化させる効果
duration : 1500 このアニメーションは1.5秒の時間をかけて変化
scale: [3, 1] ３倍の大きさから元の大きさへ変化する効果
rotate: '2turn' シュパッと２回転させる
easing: 'spring' びよよーんって感じの動きになる
あとは、文字をすすすすって所だね。
$('#wansuke_anime1 font.slide-left').each(function (){
anime_sample1.add({ targets: this, translateX: $(this).attr('stop-pos') });
});
さっき作ったfontタグに設定したクラス使って、jquery.eachで全部の文字にアニメーションを追加していく。
ここで新しいのは、translateXだけ。
文字の通り、X軸の横移動。移動距離はさっきstop-pos属性に指定した文字数あたりで按分した座標。
ふむ。こんな感じか。
anime.jsのプロパティとか、今度ちょっと情報整理しておこかな。