如何將procreate繪圖變成網絡動畫

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

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

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

繪圖層的視差

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

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

創建圖層後，由於Prodreate的導出選項，我可以將其導出為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="如何將procreate繪圖變成網絡動畫" >
  <img  src="'https%EF%BC%9A//s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport5.png'/" alt="如何將procreate繪圖變成網絡動畫" >
 …
</div>

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

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

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

接下來，我在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）
  }））
}））

最後，我可以創建一個複選框，詢問用戶是否要關閉此效果。

 <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;
  
  // ...
}））

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

繪畫效果

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

前提是這樣的：

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

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

但是在這張特殊的圖紙中，您可能已經註意到，我動畫的零件看起來像是手繪的，這有點獨特。您會看到，儘管這種效果對於更機械的圖紙非常有效，但網絡尚未完全支持使用錐形線（厚度變化的線條，這是典型的手繪感覺）。

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

我複制了這些線，並在下面創建了越來越肥大的統一路徑。然後，我將那些胖線並將它們動畫到頁面上。現在，我的圖紙呈現出形狀：

這是我所做的：

• 我用筆工具跟踪並使用了錐形刷。
• 我重複了這一層，並將線更改為均勻且更厚。
• 我拿了第一層並創建了一個複合路徑。
• 我簡化了路徑點。
• 我創建了剪輯面具。

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

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

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

這是Drawsvg（由Greensock提供）的一個非常基本的例子：

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

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

const drawlines =（）=> {
  gsap.set（'。cls-15，#yellowernelline，.cls-13'，{
    可見性：“可見”
  }））
  
  const Timeline = gsap.timeline（{{ 
    預設值:{
      延遲：1，
      輕鬆：“循環”，
      持續時間：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（）
};

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

以上是如何將procreate繪圖變成網絡動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！