Geekly Articles each Day

アニメーションのイースターエッグ、またはスタジオから解任されたスタジオへのオマージュ



Habréには多くの記事があります。 しかし、誰もが著者がどのように考え、レーキと行動を示しているとは限りません。
ここで、私が働いていたウェブスタジオのロゴ用にイースターエッグをどのように作ったかをお話ししたいと思います。

svgエフェクト用のmo-jsライブラリの作成者から魅力的なアニメーションを見た後、私は燃え上がり 、そのようなことをすることにしました。 スタジオの更新されたメインページに出会ったばかりで、二度考えずに、ロゴのアニメーションを作成しました。
そして、この記事ではこれがどのように起こったかを説明しているので、残念なことに、このライブラリのマニュアル全体を語るつもりはありません。 もちろんそのようなことをしたくない限り、あなたはそれを自分で読まなければなりません。

さて、すぐに記事を見るには：

→ 1204x400からのみ視聴するデモへのリンク、ベルをクリック
→ GitHubへのリンク

最初の始まり


私たちは皆間違っていますが、岩だらけの道を歩いていることを常に理解しているわけではありません。


最初は、ロゴを小さな断片に分割し、それらを1ポイントに圧縮してから、パズルとして、あらゆる種類の効果と組み合わせる必要がありました（いいと思います）。 しかし、私は非常に高速なアニメーションを実行しており、当然のことながら音が聞こえないことをすぐに実感しました。 私が書いたように、ライブラリの作成者のロゴが「魅力的」だったとき。

強迫観念のあるメロディー（ クラナドロールの歌 ）で2番目のインスピレーションを見つけました。 はい、彼女はただ触れています。 これは子守llなので、テーマは彼女に適しているはずです！

プロットは特に発明されていません。 子守--「夜、星、月」、素晴らしいアソシエーション、私のイースターエッグのプロットを開発するための素晴らしいオプション。

まず、この曲のマイナス部分を見つけて30秒にカットしました。これは、ゲストがページを閉じずに耐えることができる最大時間です（十分な時間がないと思います）。 その後、エフェクトラベルを作成し、Adobe Audition CC 2017を最適なツールとして選択しました（正直なところ、他の楽器を探していませんでした。目を引いたのはその楽器だけでした）。

このように見えた：



ライブラリは、TimeLine（）オブジェクトのネストされたタイムラインを提供します。すべてを個別のブロックに分割し、個別にアニメーションを開始できます。 しかし、以来 メロディーへのリンクがありました。タイミングと混同しないように、1つのタイムラインですべてを行う必要があると考えました。 ライブラリーが提供する遅延パラメーターの形式で開始時間を持つ配列の大きなブロックを作成しました。

虹の雨と成長している手紙


平均的なユーザーの観点から見ると、アニメーションのプロットは常に非常に単純です。 虹の光線が落ち、文字が成長し、浮き彫りが現れ、星と月が出てきて、フィニッシュライン、そこに何かを運ぶことができます。 しかし、どのように彼がそれをしたか、彼がどれだけ彼の強さ、忍耐と涙を彼のミューズに入れたかについて、だれも言いません。

コードの構造化は、常に個々のモジュールのフレームワーク内で考えるのに役立ち、アニメーション要素を操作するための5つのオブジェクトを取得しました。

  1. Firstrainbow


    レインボーフォーリングアニメーションは私にとって非常に簡単でした。例からチュートリアルにコピーしました。 座標で配列を作成し、1つの方法で記述しました

    rainbow(200, 500, 'A', 'str1')

    パラメータは、アニメーションの持続時間、遅延時間（私の場合は開始）、最後の2つは座標を表します。

    秋の効果は明白でした：

    非表示のテキスト

    改善された変更：

    非表示のテキスト

  2. 手紙


    文字のアニメーションについて説明します。 彼は私にとって複雑さの最初の対象になりました。 アニメーションのコンセプトは、植物のように成長することでした。 私は文字をいじくり回さなければなりませんでした。誰もがIllustrator（私を含む）での作業方法を知っているとは限りません。 そして、これで経験を積んだ人として、私はアドバイスします：

    • エディターの後には常にsvgコードを削除してください。
    • クラスの名前を一意に変更します
    • 余分なレイヤーを削除することを忘れないでください。

    合計時間の60％を、同期、座標の調整、個々の線の描画（標準的な数値では模倣できない）のみに費やしました。 良い効果を得るには、1つのパラメーターを20回変更する必要がありました。 しかし、私の内なる完璧主義者は時間をかけて妥協し、あきらめました。

    コードのレビューは簡単です：

      ...that.plant_D(800, 10111), ...that.plant_A(800, 10200), ...that.plant_R(800, 10300), ...that.plant_N(800, 10400), ...that.plant_E(800, 10500), ...that.plant_O(800, 10600), ...that.plant_S(800, 12500), ...that.plant_T(800, 13100), ...that.plant_U(800, 13400), ...that.plant_D2(800, 13700), ...that.plant_I(800, 14000), ...that.plant_O2(800, 14300)

    私が出会った2番目のことは、マニュアルを読むことに対する私たち自身の無知であり、私たちは皆、ある程度これに苦しんでいます。 独自のsvgブランクを100x100の解像度にする必要があり、最初の文字「D」が間違っているという点を見逃したのは気の毒です。 そしてもちろん、そのような場合、私たちは常に松葉杖を作ります。 初期化後にサイズを変更しただけです（バーストオブジェクトを使用したため、一度にすべての子孫を変更する必要があります）。

      for (let el of equal.el.children) { el.style['height'] = '180px'; }

    後で、GitHubで質問をしましたが、これはマニュアルの流行で突かれました）

    独自のsvgトレースが追加されます。 方法：

     class elipceR2 extends mojs.CustomShape { getShape () { return '<path d="M0,120.5h13.9c39.6,0,59.6-30.6,59.1-61C73,29.8,52.8-0.2,13.3,0L0.1,0"/>'; } getLength () { return 200; } // optional }

    追加および使用（すべてがシンプル）：

     mojs.addShape( 'elipceR2', elipceR2'); new mojs.Shape({ shape: 'elipceR2'});

    または、デフォルトのsvg-shapesを使用します。

  3. 月の出


    地平線、山、月の出口について説明します。 彼は長い間月をいじりました。スタイルを観察する必要があり、詳細なレリーフの月はここに収まりませんでした。

    非表示のテキスト

    しかし、私はより良いオプションをうまくグーグルで検索しました：

    非表示のテキスト

    小さなファイルを修正して、私たちのスタイルに合った素晴らしい月を手に入れましょう。

    良識のために、コードは：

      that.moon(5000, 20000), that.mountains(1500, 18500), that.horizonLine(1600, 18500),

  4. 星


    2番目に難しいオブジェクト。 これは、エフェクトを「Bun Family」の音楽カットと同期させるためのメインソースになりました。

    星の配列をいくつか作成し、与えられた瞬間にそれらを取り出し、同時にそれらをオブジェクトのコンテキストに投げて、色、サイズ、および座標をさらに操作しました。

    パラメータは、アニメーションの時間、開始、星の数です。

      that.curentStars = [ ...that.star(200, 17050, 5), ...that.star(200, 17300, 15), ...that.star(200, 17600, 25), ...that.star(200, 17900, 30), ...that.star(200, 18200, 35), ];

    ライブラリツールでsvgをどうにかぼかしることはできませんでした。 いつものように、アニメーションの長さ、その開始、ランダムに取る星の数、配列、

      that.shineStars(10, 21200, that.curentStars, 3); that.shineStars(10, 21600, that.curentStars, 3); that.shineStars(10, 21900, that.curentStars, 3); that.shineStars(10, 22100, that.curentStars, 4); that.shineStars(10, 22400, that.curentStars, 4); that.shineStars(10, 22700, that.curentStars, 4); that.shineStars(10, 23300, that.curentStars, 10); that.shineStars(10, 23900, that.curentStars, 15); that.shineStars(10, 24500, that.curentStars, 12); that.shineStars(10, 25150, that.curentStars, 9); that.shineStars(10, 25700, that.curentStars, 6); that.shineStars(10, 26300, that.curentStars, 7); that.shineStars(10, 26600, that.curentStars, 4); that.shineStars(10, 27200, that.curentStars, 8); that.shineStars(10, 28170, that.curentStars, 3);

    同時にthis.curRimShineStarをプロパティに投げ込みます。

    星をランダムに選択すると、星が動き始めるはずの座標までの距離が非常に短い場合があります。 そしてその結果、私はちょうど下降点を見ました。 正しいゾーンの座標で配列をフィルタリングすることで、より長いアニメーションを実現し、星の後ろに尾を表示しました。

      that.shootingStar(500, 29600, {y: 52, x: PARAMS.COORDINATES_X.str1.D}); that.shootingStar(500, 29800, {y: 52, x: PARAMS.COORDINATES_X.str1.A}); that.shootingStar(500, 30100, {y: 52, x: PARAMS.COORDINATES_X.str1.R[0]}); that.shootingStar(500, 30400, {y: 52, x: PARAMS.COORDINATES_X.str1.N[0]}); that.shootingStar(500, 30700, {y: 52, x: PARAMS.COORDINATES_X.str1.N[1]}); that.shootingStar(500, 31070, {y: 52, x: PARAMS.COORDINATES_X.str1.E}); that.shootingStar(500, 31370, {y: 52, x: PARAMS.COORDINATES_X.str1.O});

    オブジェクト内のパラメーターの場所に関する詳細の欠如に非常にがっかりしましたが、すべてをコンソールに出力し、ソースを読み取ることによって決定されました（長いが、常に保証された結果）。 オブジェクトを操作した後、オブジェクトがいつアニメーションを完了するかを知る必要がありましたが、Object.timeline._props.timeプロパティがそれを示していることをすぐには理解できませんでした。最初にObject._oで探しました

    もちろんどこかで、私はコードをだましました。 しかし、全体的にアニメーションは素晴らしかったです。

  5. PointsTimer


    ゲストがスライダーをひねって、それがどのように起こったかを見ることができるように、彼はまたタイマーを追加しなければならず、それは数秒間の非アクティブ後にアニメーションを完了しました。 その後、私のファンタジーはすでに終わり、3つの縮小サークルを追加しました。 その後、同じJQuery.animate（）を使用して、ロゴ内の文字をディゾルブし、ライブラリが追加したすべてのタグを削除します。

残念ながら、ライブラリは非常に長いアニメーションを実行することはできません。スライダーを非常に素早く横に引くと、すべてが細かく動き、要素が存在する場所、存在しない場所が表示されます。 これは、スライダーの速度を強制的に操作することによってのみ解決できます。

Source: https://habr.com/ru/post/J322676/

More articles:


All Articles