如何将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中文网其他相关文章！