Proseate DrawingをWebアニメーションに変える方法

私は最近、Apple Pencilを使用したProcreateアプリを使用してiPadに描画を始めました。私はこのように描く柔軟性を楽しんでいます。通常、私が家で絵を描くのを防ぐのは、セットアップ、ブラシの掃除、適切な換気、その他の要因など、絵画そのものに結び付けられていない基本的なものです。 Procreateは、絵画と描画プロセスをエミュレートするという非常に素晴らしい仕事をしていますが、元に戻す/やり直し、レイヤー、レイヤー効果などのデジタル機能を追加します。

これが私がウェブ上でエクスポートしてアニメーション化したことを作った繁殖の絵です。

あなたもこれを行うことができます！ここでカバーする2つの基本的なアニメーション効果があります。ホバーで行われる視差効果（前庭障害のある人のためにそれをオフにする能力）と、ページが読み込まれたときの小さな図面効果です。

描画層を備えた視差

私がiPadで絵を描くことを楽しんでいる理由の一部は、レイヤーで作業する能力であると述べました。レイヤーを作成するときは、特定の「テーマ」を同じレイヤーに保持するように注意します。たとえば、ゼブラストライプは1つのレイヤーにあり、ドットはストライプの下に独自のレイヤーにあります。

主に、視差効果で図面を動かすときに少し覗くことができるため、上のレイヤーからの線が終了する場所の境界を越えて図面を拡張します。ラインがいつでも鋭い場合、これは不自然に見えます。

レイヤーの作成が完了したら、Procreateのエクスポートオプションのおかげで、Photoshop（PSD）ファイルとしてエクスポートできます。

その後、私は一緒に参加しますので、私はせいぜい約8層だけで作業しています。 TinypngというPhotoshopプラグインを使用して、各レイヤーを個別にエクスポートします。より良い圧縮ツールがあると聞いたことがありますが、私はこれにかなり満足しています。

次に、コードエディターに移動し、レイヤーに含まれるさまざまな画像をすべて収容するためにDIVを作成します。その中のすべての画像が絶対的なポジショニングを取得しながら、私はそのdiv相対位置を与えます。これにより、画像の上に画像が配置されます。

 <div>
  <img  src="'https%EF%BC%9A//s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport6.png'/" alt="Proseate DrawingをWebアニメーションに変える方法" >
  <img  src="'https%EF%BC%9A//s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport5.png'/" alt="Proseate DrawingをWebアニメーションに変える方法" >
 …
</div>

 ＃Zebra-Ill {
  位置：相対;
  Min-Height：650px;
  最大幅：500px;
}

.zebraimg {
  位置：絶対;
  上：0;
  左：0;
  視点：600px;
  変換スタイル：preserve-3d;
  変換：translatez（0）;
  幅：100％;
  }

画像上の100％の幅は、すべての画像を親divのサイズに限定します。私はこれを行い、同じ制限で一度にそれらをすべて制御します。これは、応答性の高い条件に適しています。親の最大幅と最小高さにより、特にCSSグリッドレイアウトに落ちたときのように、Divが縮小して成長する方法を制限することができます。柔軟性が必要ですが、いくつかの制約もあり、CSSグリッドはそのために最適です。

次に、JavaScriptを使用してParent DivにMousemoveイベントリスナーを追加します。これにより、e.clientxとe.clientyを使用して、マウスの座標に関する情報をキャプチャできます。

 const zebraill = document.queryselector（ '＃zebra-ill'）

//ホバー
zebraill.addeventlistener（ 'mousemove'、e => {
  x = e.clientxとします。
  y = e.clientyとします。
}）

次に、各図面を調べて、それらの座標を使用して画像を移動します。これらの座標に接続された変換スタイルも適用します。

 const zebraill = document.queryselector（ '＃zebra-ill'）
const zebraillimg = document.queryselectorall（ '。zebraimg'）
constレート= 0.05

//ホバー
zebraill.addeventlistener（ 'mousemove'、e => {
  x = e.clientxとします。
  y = e.clientyとします。
  
  Zebraillimg.Foreach（（el、index）=> {
    el.style.transform = 
      `rotatex（$ {x} deg）rotatey（$ {y} deg）`
  }）
}） 

うわー、パートナーを遅くしてください！それはあまりにも多くの動きです、私たちはもう少し微妙な何かを望んでいます。したがって、0.05のような低速度を掛けることで、それを遅くする必要があります。また、レイヤーごとに少し変更したいので、レイヤーインデックスを使用して動きをスピードアップまたは遅くします。

 const zebraill = document.queryselector（ '＃zebra-ill'）
const zebraillimg = document.queryselectorall（ '。zebraimg'）
constレート= 0.05

//ホバー
zebraill.addeventlistener（ 'mousemove'、e => {
  x = e.clientxとします。
  y = e.clientyとします。
  
  Zebraillimg.Foreach（（el、index）=> {
    let speed = index = 1
    xpos =速度レート * xとします
    ypos =速度 * yとします
    
    el.style.transform = 
      `rotatex（$ {xpos -20} deg）rotatey（$ {ypos -20} deg）translatez（$ {index * 10} px）`
  }）
}）

最後に、この効果をオフにするかどうかをユーザーに尋ねるチェックボックスを作成できます。

 <p>
  
  <label for="motiona11y">前庭障害がある場合は、これを確認して、効果の一部をオフにします</label>
</p>

 const zebraill = document.queryselector（ '＃zebra-ill'）
const zebraillimg = document.queryselectorall（ '。zebraimg'）
constレート= 0.05
const MotionCheck = document.getElementById（ 'Motiona11y'）
ischecked = falseとします

//誰かが前庭障害部分をチェックしたかどうかを確認する
MotionCheck.addeventListener（ 'change'、e => {
  ischecked = e.target.checked;
}）

//ホバー
zebraill.addeventlistener（ 'mousemove'、e => {
  if（ischecked）返品
  x = e.clientxとします。
  y = e.clientyとします。
  
  // ...
}）

これで、ユーザーはホバー上の図面の層状の次元を見る機能を持っていますが、面倒な場合は効果をオフにすることもできます。

描画効果

ページに描かれているように見えるようにする能力は、しばらくの間存在しており、それがどのように行われているかについての記事がたくさんあります。フロントエンドマスターのために作ったコースでもそれをカバーします。

前提は次のようになります：

• SVGパスを取り、DashOffsetで破壊します。
• ダッシュを形状の全長にします。
• Dashoffset（ダッシュ間のスペース）をアニメーション化します。

最終的に得られるのは、一種の「描画」効果です。

しかし、この特定の図面では、私がアニメーション化した部分が手描きであるように見えることに気づいたかもしれません。これはもう少しユニークです。その効果は、より機械的な図面に対してうまく機能しますが、Webはテーパーラインの使用をまだサポートしていません（より手描きの感触に典型的な厚さが異なるライン）。

このアプローチのために、ファイルをイラストレーターに持ち込み、絵のその部分からの線をトレースし、ストロークパネルに入ることでそれらの線を先細にしました。そこでは「その他のオプション」を選択し、ドロップダウンから先細りオプションをクリックしました。

私はそれらの線を複製し、その下に太い均一なパスを作成しました。それから私はそれらの太った線を取り、それらをページにアニメーション化しました。今、私の絵は形を通して示しています：

これが私がしたことです：

• 私はペンツールで追跡し、テーパーブラシを使用しました。
• レイヤーを複製し、線を均一で厚くするように変更しました。
• 最初の層を取り、複合パスを作成しました。
• パスポイントを簡素化しました。
• クリッピングマスクを作成しました。

そこから、DrawSVGとGreensockですべてをアニメーション化できます。必要はありませんが、この種のアニメーションにCSSを使用できます。この場合、パスポイントがたくさんあるので、より強力なものを使用することは理にかなっています。私は、これらの種類のアニメーションの作成を開始する方法について詳しく説明する別の投稿を書きました。新鮮な場合は、そこから始めることをお勧めします。

drawSVGを使用するには、いくつかのことをする必要があります。

• プラグインスクリプトをロードします。
• JavaScriptファイルの上部にプラグインを登録します。
• パスが使用されていること、そしてそれらのパスにストロークがあることを確認してください。
• それらのパスがそれらを収容するグループではなく、ターゲットにされていることを確認してください。代わりに親要素をターゲットにすることができます。

DrawSVGの非常に基本的な例（Greensock提供）は次のとおりです。

したがって、グラフィックエディターには、より巧妙なラインのクリッピングマスクがあり、その下に脂肪の均一なラインが露出しています。ここから、それらの厚いパスをつかみ、DrawSVGプラグインを使用してページにアニメーション化します。

 //プラグインを登録します
gsap.registerplugin（drawsvgplugin）;

const drawlines =（）=> {
  gsap.set（'。Cls-15、#yellownunderline、.cls-13 '、{
    可視性：「可視」
  }）
  
  const timeline = gsap.timeline（{ 
    デフォルト：{
      遅延：1、
      使いやすさ：「cir」、
      期間：2
    }		  
  }）
  .add（ 'start'）
  .fromto（'。Cls-15 Path '、{
    DrawSVG： '0％'
  }、{
    DrawSVG： '100％'、
    即時者：本当です
  }、 '始める'）
  .fromto（ '＃yellowunderline path'、{
    DrawSVG：'50％50％ '
  }、{
    DrawSVG： '100％'、
    即時者：本当です
  }、 'start = 1'）
  .fromto（'。cls-13 '、{
    DrawSVG：'50％50％ '
  }、{
    DrawSVG： '100％'、
    即時者：本当です
  }、 'start = 1'）
}

window.onload =（）=> {
  drawlines（）
};

そして、私たちはそれを持っています！ Procreate iPadアプリの階層化された図面から作成された当社のサイトの最初の図。これにより、素晴らしい手描きのイラストであなたのウェブプロジェクトをユニークにすることを願っています。何かクールなものを作る場合は、以下のコメントでお知らせください！

以上がProseate DrawingをWebアニメーションに変える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。