今回は呪術廻戦のアニメ公式サイトの ページ遷移時アニメーションについて解析してみました。
個人的にページ遷移時アニメーションは気になっていたけれども避けていたのですがアニメのサイトってページ遷移時のデザインに凝っているところが多いなと最近思い挑戦してみることにしました。
大雑把な動きとしてはページロード時に中央から呪力っぽい形のマスクが広がっていって2ndページ（伏魔御廚子の背景）に遷移するという動きです。
ボタンのホバーアニメーションにも同じマスクを使いまわしています。
解析概要
このアニメーションはcssのmaskプロパティとanimationプロパティのstepsを組み合わせて1コマずつ進めてGIFアニメのように作成していくイメージです。
呪術廻戦のページロードでは23コマでアニメーションを作成しています。
cssのmask-imageアニメーションを使用してレベルの高いアニメーションが可能になります。
また同アニメーションをオンマウスでも使用しています。
cssのmaskプロパティについて
まず、maskについて簡単に説明すると画像を使用してマスキングする方法です。
※maskは現在のところベンダープレフィックス-webkit-を付ける必要がある、もしくはFirefoxのみ対応のプロパティが複数存在します。
mask-image
マスクレイヤーとなる切り抜き用の透過画像を設定します。
mask-repeat
マスキングする画像の繰り返し方法を指定します。
background-repeatと同様の使い方です。
mask-position
マスキングする画像の位置を指定します。
background-positionと同様の使い方です。
mask-size
マスキングする画像のサイズを指定します。
background-sizeと同様の使い方です。
mask-clip
border、padding、marginなどのマスク適用の範囲がどこまでかを指定できます。
以下はbackimg.jpgという背景用画像をmaskimg.pngという画像で切り抜いています。
img.mask {
-webkit-mask: url(images/maskimg.png) center center no-repeat;
mask: url(images/maskimg.png) center center no-repeat;
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
}<img class="mask" src="images/backimg.jpg">
cssアニメーション制作
イメージサンプル
実際にページロード時に発生するアニメーションを作成します。
サンプルでは丸型のアニメーションが広がっていくマスクになります。
マスク画像作成
当サンプルでは縦600px、横1068pxのマスキング画像10コマ分がつながった画像（anime.png）を使用しています。
アニメーション作成
クラス.page_maskにマスク要素を設定します。
anime.pngを左橋からコマ送りにするアニメーションaniをleft: 0;からスタートさせ、9回コマ送りが必要なので animation: ani 0.7s steps(9) 0.3s both;とします。
.page_mask{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #7effe5;
-webkit-mask-image: url("../img/anime.png");
mask-image: url("../img/anime.png");
-webkit-mask-size: 1000% 100%;
mask-size: 1000% 100%;
animation: ani 0.7s steps(9) 0.3s both;
z-index: 999;
}
@keyframes ani {
from {
-webkit-mask-position: 0 0;
mask-position: 0 0;
}
to {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
}
}ローディング処理
cssアニメーションが終了したらマスク部分を削除する処理を追加します。
<script>
$(function(){
//LOADING
$(window).on("load", function(){
$("body#b_ani").addClass("active");
$("#loading").addClass("active");
$("#loading.active").on('webkitAnimationEnd AnimationEnd',function(){
$("#loading").remove();
});
});
});
</script>まとめ
cssのmaskとanimationのstepの組み合わせでアニメーションの幅が広がります。
メカ丸と三輪ちゃん推してます(ò_óˇ)
あと脹相かっこよくない？！
