最近，我開始使用Apple Pencil使用Procreate應用在iPad上繪制iPad。我喜歡這種方式繪畫的靈活性。通常，讓我無法在家繪畫的是基本的事情，例如設置，清潔刷，適當?shù)耐L以及其他與繪畫本身并不息息相關的因素。 Procreate在模擬繪畫和繪畫過程方面做得很好，但是添加了數(shù)字功能，例如撤消/重做，層和圖層效果。

這是我做的一幅繁殖畫，我在網(wǎng)絡上遇到了出口和動畫。

您也可以做到！我們將在此處介紹兩個基本的動畫效果：懸停在懸停的視差效果（具有前庭疾病的人的能力），以及頁面加載時的小圖效果。

繪圖層的視差

我提到我喜歡在iPad上繪畫的部分原因是能夠分層工作。在創(chuàng)建圖層時，我要注意將某些“主題”放在同一層上，例如，斑馬條紋位于一層，點在條紋下方的下方。

我將將圖形擴展到末端上方的線的邊界之外，主要是因為當我們在視差效果中移動圖形時，您可以繞過它。如果線條在任何時候都很尖銳，這將看起來不自然。

創(chuàng)建圖層后，由于Prodreate的導出選項，我可以將其導出為Photoshop（PSD）文件。

然后，我將加入幾個，這樣我最多只能使用約8層。我使用一個名為TINYPNG的Photoshop插件單獨導出每一層。我聽說有更好的壓縮工具，但是我對此非常滿意。

接下來，我將進入我的代碼編輯器并創(chuàng)建一個DIV來容納層中包含的所有各種圖像。我給出該DIV相對定位，而其中所有圖像都具有絕對的定位。這將圖像放在另一個上方。

 <div>
  <img  src="'https%EF%BC%9A//s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport6.png'/" alt="如何將procreate繪圖變成網(wǎng)絡動畫" >
  <img  src="'https%EF%BC%9A//s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport5.png'/" alt="如何將procreate繪圖變成網(wǎng)絡動畫" >
 …
</div>

 ＃Zebra-ill {
  位置：相對；
  最小值：650px;
  最大寬度：500px;
}

.zebraimg {
  位置：絕對；
  頂部：0;
  左：0;
  透視圖：600px;
  轉換風格：Preserve-3D；
  變換：Translatez（0）;
  寬度：100％；
  }

圖像上的100％寬度將限制所有圖像的大小。我這樣做是為了使他們一次通過相同的限制來控制它們，這適合響應條件。父母的最大寬度和最小高度使我可以限制Div縮小和增長的方式，尤其是當它被掉入CSS網(wǎng)格布局時。它需要靈活，但也有一些約束，CSS網(wǎng)格對此非常有用。

接下來，我在javaScript上添加了父母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'）
常量率= 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'）
常量率= 0.05

//懸停
Zebraill.AddeventListener（'Mousemove'，e => {
  令x = e.clientx;
  令y = e.clienty;
  
  Zebraillimg.Foreach（（El，index）=> {
    讓speed = index = 1
    令xpos =速度 * x
    令ypos =速度 * y
    
    El.Style.transform = 
      `rotatex（$ {xpos -20} deg）rotatey（$ {ypos -20} deg）translatez（$ {index * 10} px）
  }））
}））

最后，我可以創(chuàng)建一個復選框，詢問用戶是否要關閉此效果。

 <p>
  
  的標簽，如果您患有前庭障礙，請檢查一下以關閉某些效果
</p>

 const Zebraill = document.queryselector（'＃Zebra-ill'）
const Zebraillimg = document.queryselectorall（'。Zebraimg'）
常量率= 0.05
const MotionCheck = document.getElementById（'Motiona11y'）
讓您進行檢查= false

//檢查是否有人檢查了前庭障礙部分
MotionCheck.AddeventListener（'change'，e => {
  檢查= e.target.Checked;
}））

//懸停
Zebraill.AddeventListener（'Mousemove'，e => {
  如果（檢查）返回
  令x = e.clientx;
  令y = e.clienty;
  
  // ...
}））

現(xiàn)在，用戶可以查看懸停圖紙的分層維度，但如果造成麻煩，也可以關閉效果。

繪畫效果

使某些東西看起來像已被吸引到頁面上的能力已經存在了一段時間，并且有很多關于如何完成的文章。我在前端大師的課程中也介紹了它。

前提是這樣的：

• 采用SVG路徑，使其與Dashoffset一樣。
• 使儀表板整個形狀的長度。
• 動畫DashOffset（破折號之間的空間）。

您最終獲得的是一種“繪制”效果。

但是，在這張?zhí)厥獾膱D紙中，您可能已經注意到，我動畫的零件看起來像是手繪的，這有點獨特。您會看到，盡管這種效果對于更機械的圖紙非常有效，但網(wǎng)絡尚未完全支持使用錐形線（厚度變化的線條，這是典型的手繪感覺）。

對于這種方法，我將文件帶入了插畫家，從圖紙的那部分中追蹤了線條，然后通過進入中風面板使這些行逐漸變細，在那里我選擇了“更多選項”，并從下拉菜單中單擊了錐形選項。

我復制了這些線，并在下面創(chuàng)建了越來越肥大的統(tǒng)一路徑。然后，我將那些胖線并將它們動畫到頁面上?，F(xiàn)在，我的圖紙呈現(xiàn)出形狀：

這是我所做的：

• 我用筆工具跟蹤并使用了錐形刷。
• 我重復了這一層，并將線更改為均勻且更厚。
• 我拿了第一層并創(chuàng)建了一個復合路徑。
• 我簡化了路徑點。
• 我創(chuàng)建了剪輯面具。

從那里，我可以用drawsvg和greensock對所有東西進行動畫動畫。盡管您不需要，但您可以使用CSS進行這種動畫。有很多路徑點，因此在這種情況下，使用更強大的東西是有意義的。我寫了另一篇有關如何開始創(chuàng)建這類動畫的文章。如果您新鮮，我建議您從那里開始。

要使用drawsvg，我們需要做一些事情：

• 加載插件腳本。
• 在JavaScript文件的頂部注冊插件。
• 確保使用路徑，并且這些路徑上有筆觸。
• 確保這些路徑是針對目標的，而不是容納它們的群體。父元素可以針對目標。

這是Drawsvg（由Greensock提供）的一個非?；镜睦樱?

因此，在圖形編輯器中，有一個帶有更巧妙的線條的剪裁面具，可暴露下面的脂肪均勻線。從這里開始，我們將抓住那些較厚的路徑，并使用drawsvg插件將它們動畫到頁面上。

 //注冊插件
gsap.registerplugin（drawsvgplugin）;

const drawlines =（）=> {
  gsap.set（'。cls-15，#yellowernelline，.cls-13'，{
    可見性：“可見”
  }））
  
  const Timeline = gsap.timeline（{{ 
    默認值：{
      延遲：1，
      輕松：“循環(huán)”，
      持續(xù)時間：2
    }		  
  }））
  .add（'start'）
  .fromto（'。cls-15路徑'，{
    drawsvg：'0％'
  }，{
    drawsvg：“ 100％”，
    直系人：是的
  }， '開始'）
  。
    drawsvg：“ 50％50％”
  }，{
    drawsvg：“ 100％”，
    直系人：是的
  }，'start = 1'）
  .fromto（'。cls-13'，{
    drawsvg：“ 50％50％”
  }，{
    drawsvg：“ 100％”，
    直系人：是的
  }，'start = 1'）
}

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

那里我們有！我們網(wǎng)站的初始插圖是由Procreate iPad應用中的分層圖創(chuàng)建的。我希望這能使您通過精美的手繪插圖使您的網(wǎng)絡項目與眾不同。如果您讓任何酷都很酷，請在下面的評論中告訴我們！

以上是如何將procreate繪圖變成網(wǎng)絡動畫的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！