ベースに実装しています。テクニックが有効であることを実感しています。本記事では、これらのプロジェクトで得られた経験を踏まえながら、画像をスキャニメーション(スリットアニメーション)のように加工するマイクロアプリを作成していきます。基本的な特徴については、以下の記事で言及しています。今回作成するアプリの完成形は以下です。本アプリは、レンジスライダーを操作して変更した値の組み合わせによって、視覚への負担が大きくなりますので、使用する際にはご注意ください。有効にする必要があります。SheetMove0「LEVEL」のレンジスライダーを変更すると、シュレッダーで裁断したような効果が生まれます。SHEET」をオンにすると認識できるようになります。この状態で「MOVE」のレンジスライダーを動かすと、スキャニメーションやレンチキュラーのような独特な効果が得られます。SIZE」で表示する画像サイズを変更できる機能を備えています。本アプリの前提条件は以下とします。位置をずらすことで、コマ送りのアニメーションを表現しています。枚の画像が斜め上に遷移するだけの表現にとどめています。本アプリは以下の機能を実装します。順番で具体的な実装内容を説明していきます。以下に該当するコードを抜粋します。つのエリアから構成されています。個のフレーム(.c-preview-frame)と、その上に重ねるスリットシート(.c-preview-sheet)の要素で構成されています。対象の要素を特定するための属性です。フォームコントロール見出し「フォームコントロール」フォームコントロールの種類としては、以下の要素が含まれています。カスタム変数を指定するときに使用します。全体のコード量はそれほど多くはありません。MicroApp);トピックごとに順番に説明していきます。以下のコードでカスタム要素を定義しています。独自の振る舞いを付与することができるようになります。要素やオブジェクト(インスタンス)をまとめて定義できるので、コードの可読性が高くなり重宝しています。ように先頭にハッシュ(#)を付与すると、クラス内のみでアクセスできるプライベートなクラスフィールドになりますが、カスタム要素の場合にはクラスの外側を気にすることがほとんどないので、パブリックにしています。カスタム要素におけるプライベートなクラスフィールドの利点(もしくはパブリックなクラスフィールドの欠点)が見つかれば、今後書き方を変えるかもしれません。カスタム要素が追加されたときに呼び出されます。いったように指定しています。続いて、レンジスライダーと画像アップロードボタンにイベントリスナーを設定しています。変数(カスタムプロパティ)として設定するという手法を取っています。使用して柔軟に値を調整することができます。側のコード量は減りますし、その分の処理の負担を軽減できます。つのメソッドを定義しています。コードを見ていきます。すべてを掲載するとかなり長くなってしまうので、プレビューエリアまでに限定し、フォームコントロールのスタイルは割愛します。*/それでは順番に説明していきます。指定して同一のグリッドセルに重ねています。各フレームの画像やスリットシートにマスクを適用する方法を見ていきます。マスクの基準となるサイズを定義していますが、「LEVEL」のレンジスライダーの値が大きくなると基準サイズが小さくなります。関連のスタイルに着目します。各プロパティで指定している内容を順番に見ていきましょう。分のストライプパターンを作成しています。指定順を逆にすることで、ストライプを交互に表示しています。コードを擬似的に適用したデモです。「SPLIT」や「3D」を選択すると、フレームとスリットシートのレイヤーが分かれるので、互い違いになっていることが視覚的に把握できます。マスクを開始する水平方向の位置を指定しています。各フレームは以下のとおり、マスクの基準サイズにフレームのインデックス番号を乗算して、フレームごとにマスクの位置をずらしています。値によって、マスクのサイズ分、水平方向に移動しています。移動によって、コマ送りのようなアニメーションが実現しています。文字どおりマスクのサイズを指定していますが、この値によってストライプの密度が決まります。サイズが大きいとその分、画像が隠れる部分が大きくなり、アニメーションも大雑把になります。一方で、細かくしすぎると「LEVEL」を上げたときに画像が見えなくなってしまいます。続いて、各フレームに指定している背景画像のスタイルについて解説します。オブジェクトに変換された画像が反映されます。属性としてデフォルト画像を指定することもできるので、コンポーネントごとにデフォルト画像を変えたい場合にはこの方法を使います。冒頭の図版で説明したように、アニメーションを表現するために画像を段階的に右上に移動している指定です。乗算しているので、フレームごとに位置が変わります。フレームを囲っているコンテナ要素(.c-preview-inner)のインラインサイズを指しています。SIZE」のレンジスライダーから受け取った値が反映されます。auto;}なお、背景画像は幅が基準になるため、縦横比が異なる画像の場合には、部分的に見切れたりリピートして表示されます。