サイトのさまざまな効果を作成するためのアイデアを引き続き検討しています。 SVGマスクを完成させ 、今日ではパス要素とそれで作成されるフォームがアジェンダにあります。 より正確には、それらの変更。 繰り返しますが、複雑な技術の使用を避け、一部のアイコンを他のアイコンに変換すること、弾性要素の作成、サイトに雰囲気を与えるためのシルエットの使用を検討します。
なんでこんなこと？
サイトがユーザーに与える印象に取り組んでいる場合、インターフェイスのフォームを変更することは非常に便利です。
フォーム変換を使用すると、要素の状態が変化したことをユーザーに美しく表示できます。 これは、彼のアクションに対する応答（たとえば、ハンバーガーメニューを開いてそのアイコンを十字に変えた）またはそれ自体で発生した何か（通知が到着したか、ダウンロードが完了し、インジケーターを変更する必要がある）です。
一方、ページ上に既にある動きに勝つことができます。 同じメニューまたはポップアップ通知は、特にアイデアが加速して移動している場合は特に、移動するときに伸縮性を持ち、形状を少し変えることができます。 このアプローチは、しばしば漫画のキャラクターで使用されます-彼らは絶えず「平らにし」、「ソーセージ」、動きがより生き生きと見えるようにします。 それで、なぜそれをサイトに適用しませんか？
何を使用しますか？
再びSVG。 しかし、今回はパス要素です。 本質的に、パスは閉じることができる曲線であり、この場合、色または画像で塗りつぶすことができます。 また、パスは移動の軌跡として使用されますが、それについてはもう少し詳しく説明します。 この要素には属性dがあり、最初に興味があります。 通常、その値は次のようになります。
<path d='m 51.012704,994.53093 c 3.967595,2.89879 7.978605,5.78167 12.374577,7.97717 4.395972,2.1955 9.228469,3.6917. . . .' />
この情報は、曲線が作成されるポイントとそれらのすべてのパラメーターに関するものです。 画像が圧縮されている場合、数値の小数点以下の桁数は少なくなりますが、明確になるものはありません。 もちろん、そこで使用されている構文の説明をネットで検索し、スペースとコンマがどこにあるべきかを覚えておくことができますが、... 忘れてください。 誰もそのようなことを自分の手で支配しません。 すべてはベクトルグラフィックエディターで行われます。
同意します。画面上のマウスポイントを移動することは、ソース内の数値を直接修正するよりもはるかに簡単です。
最終的なタスクは1つの画像を別の画像に変換することであるため、重要な条件が発生します。両方の場合のポイントの数は同じでなければなりません。 また、それらのタイプも一致する必要があります。 これは、アニメーションに使用する可能性が最も高い最新のツールでは、非常に異なる曲線を適切に変換できないためです。 より正確には、彼らはそれを行うことができますが、それはひどく見えるでしょう。
より複雑な形状から始めて、その点から単純にします。 これにより、アニメーションをスムーズに保つことができます。
留意すべきもう1つの点は、ある複雑な図から別の図に移動するとき、曲線が作成される点が直線で移動することです（ほとんどの楽器はこの方法ですべてをアニメーション化します）。 これから別の観察結果が続きます。
複雑な形状のオブジェクト間を移動する場合、曲線と奇妙なクロスフィルの自己交差が表示されないように、中間ステップを実行する必要があります。
グラフィックエディタを使用して、その中にいくつかの簡単なフォームを描画できると仮定します。 さらなるアクションは、実用的な例で最もよく示されます。
実際に見てみましょう
最初の例はハンバーガーです。 象形文字に少し似ていますが、寿司バーやタトゥーパーラーの場所によく似合います。 しかし、あるアイコンを別のアイコンに変更する方法の一般的なアイデアに興味があります。
ここには、3つの要素、3つの曲線があります。
<svg id='hamburger' viewBox='. . .'> <g> <path id='part-1' fill='#000' d='. . .' /> <path id='part-2' fill='#000' d='. . .' /> <path id='part-3' fill='#000' d='. . .' /> </g> </svg>
どの要素が動いているかをよりよく理解するには、カラーイラストを見てください。
要素の数が異なる場合、再利用される要素の背後にある余分な部分を単純に非表示にします。
変換を実行するために行う必要があるのは、アニメーション用のお気に入りのツール（このシリーズの記事ではanime.jsを使用）を使用し、最初のアイコンにあった曲線のd属性の値を、 2番目に使用されます。
let hamburger = anime.timeline(); hamburger .add({ targets: '#part-1', d: '. . .' // }) .add({ targets: '#part-2', d: '. . .' // }) .add({ targets: '#part-3', d: '. . .' // });
しかし、アイコンがそれほど便利ではない場合はどうでしょうか？
任意の曲線など、さまざまなオブジェクトを扱うツールがあります。 たとえば、SVG Morpheus。 要素の単純な変換に加えて、このツールはさまざまな回転を追加します。 時々彼はおalreadyを出しますが、これはすでに上で述べましたが、ほとんどの場合、特にアイコンの幾何学的形状が多少厳密である場合、その効果は受け入れられます。 この場合のように、時には面白いこともあります。
しかし、ほとんどの場合、いくつかのアイコンが原因で別の依存関係をプロジェクトにドラッグするよりも、必要に応じてすべてをまとめて再描画する方が良いことを覚えておいてください。
弾力性に移る
ここでの主なアイデアは、いくつかの既存のインターフェース要素の形状を装飾することです。 多くの場合、同様の効果が移動パネルで使用されます。 基本的な考え方は、移動するオブジェクトの前面または背面の境界線をプロセスで変更することです。 たとえば、画面の端から飛び出す通知の背面に「尾」があり、動きが遅くなると減少し、停止すると完全に消えます。 同様の効果を実装していますが、サイドメニューの前面の境界線を使用しています。
このような効果を作成する方法には、既存のレイアウトへの最小限の変更が含まれます。 SVG要素は、絶対配置で要素の端に配置され、「それ自体」のように存在します。
この場合、長方形の形状が使用され、境界の1つが一方または他方の方向に曲がります。 これが最も簡単なオプションです。 すべての操作は最初の例と同じであるため、コード例を提供しても意味がありません。
より興味深いアプローチは、アニメーションがエンドポイントに到達し、さらに先に戻ったり、前後に移動したりする場合など、減衰振動に既製のソリューションを使用することです。 それらはネットで見つけることができます。
純粋な空白がたくさんあるミニマルなサイトでは、そのようなものが二重に美しく見えることに注意してください。 色で塗りつぶすのではなく、曲線自体（1〜2ピクセルの細い線）を描くと、要素の柔軟な分割線の効果が得られます。
思考を発達させる
単純な弾力性は確かに良いですが、それ自身の顔を持っていません。 パフォーマンスの面では、膨らみや凹みの代わりに、インターフェイス要素から意味のあるシルエットを作成することは興味深いかもしれません。
これにより、サイトに雰囲気を加えることができます。 テーマ別カフェ、演ずる人の展覧会、さまざまなクラブ
技術的には、すべてが前の例と同じですが、効果はまったく異なります。
このテイクは間違いなく採用する価値があります。 特に大きな画面でうまく機能します。 主なことは、適応性を覚えることです。これは例にはありませんが、実際のサイトにあるべきです。
結論の代わりに
曲線のアニメートは簡単で楽しいです（すべてがすぐにうまく描かれている場合）。 これは、非標準のサイトを作成する際にレイアウトデザイナーの武器の中で最も有用なツールの1つであり、長い調査を必要としないとも言えます。