Principle入门
处理驱动程序和事件
Principle是一款出色的原型制作工具，非常方便，尤其是在您想在短时间内创建高保真动画的那些时刻。在本课程中，我们将讨论驱动程序，组件，事件，滚动和动画。对于最终项目，我们将使用iOS应用程序的全新设计。在第一个视频中，我们将处理iOS应用程序的“项目”部分，并且将教您如何创建Tinder卡类型动画。
Figma导入
让我们转到Figma项目并选择带有所有图层的Artboard。然后回到Principle并在工具栏上单击import。将会弹出一个新窗口。选择Figma选项卡，Principle将足够聪明，可以意识到您是在Figma上打开的最新文档。确保在“文档”上选择“主卡”，并选择2x作为分辨率。最后，点击导入所选框���。
在Principle上重新排列图层
确保���照从上到下的顺序排列卡片层：卡片1，卡片2和卡片3。
缩小卡
选择卡2，并将其比例更改为0.9，在卡3中，将其比例更改为0.8。
对齐底边
选择卡片3，然后从检查器中选择“卡片级别3 ”，然后单击“对齐底部边缘”，这是检查器顶部的按钮。对卡2 和卡级别2执行相同的过程。卡对齐后，您可以删除2级和3级卡。
大事记
选择卡1，在卡的中间，您将看到一个带有Thunderbolt图标的白色按钮。单击该按钮，将出现一个带有很多选项的弹出窗口。选择“拖动开始”，将出现一个箭头，将箭头指向同一画板。这将创建一个新的Artboard。让我们从第二个Artboard中选择Card 1创建一个新事件，然后选择Drag Ends并将其指向第二个Artboard本身。我们将创建第三个Artboard。
卡顺序
在Artboard 3上，让我们按照从上到下的顺序重新组织卡片，依次选择卡片2，卡片3和卡片1。选择卡片2并将其缩放到1，选择卡片3并将其缩放到0.9最后选择卡片1并将其缩小到0.8。最后，为卡片提供正确的Y轴，对于卡片2，将其Y轴更改为154，让我们选择卡片3，然后将其Y轴更改为192.7，对于卡片1，让其Y轴为231.4。
子弹点动画
让我们为动画添加一些动作。从第二个Artboard中选择Card 3，并将其不透明度更改为0％。现在，在同一Artboard上，打开检查器中的分页文件夹。选择“椭圆1”和“椭圆2”，并将其不透明度降低到40％。然后转到第三个Artboard，在那儿选择第二个项目符号点Ellipse 2并将其不透明度增加到100％，然后选择Ellipse 1并将其不透明度更改为10％
重复动画
现在我们已经完成了第一张卡片的动画，我们需要为其余卡片重新创建相同的动画并关闭动画循环。这样，当我们完成第三张卡片的滑动时，动画将自动转到开头。转到第三个Artboard，然后从中选择Card 2并创建一个事件Drag Begins，然后将该事件指向Artboard，此������将创建第四个Artboard。转到第四个Artboard，然后从中选择Card 2创建一个事件，然后选择Drag Ends并将其指向自己，这将创建第五个Artboard。
Artboard 4���置
让我们从Artboard 4中选择Card 1，将其不透明度更改为0％，然后从Artboard，Ellipse 2和Ellipse 3中选择项目符号点，并将其不透明度降低至40％
Artboard 5设置
从Artboard 5中选择Ellipse 3，然后将其更改为100％不透明度，并将Ellipse 2减少为10％。选择卡片2并将其缩小为0.8。选择Card 3并将其缩放至1， 然后选择Card 1并将其缩放至0.8。现在，让我们从上到下对卡片进行重新排序。卡片3>卡片1>卡片2。最后，更改卡的Y轴，选择卡3并将其Y轴更改为154，然后选择卡1并将其Y轴更改为192.7，对于卡2将其更改为231.4。
画板6
让我们创建最后一个Artboard。要在Artboard 5上执行此操作，我们选择Card 3并向其中添加一个事件，单击雷电图标，然后选择Drag Begins并将其指向自身，这将创建一个新的Artboard。在新的Artboard上，选择Card 3，然后创建一个事件Drag Ends并将其指向第一个Artboard。这样，我们将结束整个周期
Artboard 6设置
从检查器中选择Card 2，并将其不透明度更改为0％。然后选择椭圆1和3，并将其不透明度更改为40％
角度动画
如果要使卡片的动画效果更好，我们可以在每次刷卡时对卡片的角度进行动画处理。我们���添加驱动程序以将这些动画创建到每个偶数屏幕Artboard 2,4和6。选择检�����器上的每张第一张卡片，然后将“检查垂直”的“拖动垂直”更改为“检查器”上的“静态垂直”。从Artboard 2中选择Card 1，然后打开驱动程序。
车手
从“驱动程序”时间轴中选择“卡片1”，并为“中心Y”和“角度”属性创建两个关键帧。让我们为这些框架中的两个属性添加关键帧。100、187和274。在框架274上，将卡 的角度更改为12，将中心Y更改为120，然后将洗涤器移动到100，并将角度更改为-12，将中心Y更改为120。最后，重复了相同的步骤首先卡在画板4和6。
结论
在本节中，我们学习了如何从Figma导入Principle的UI，驱动程序，事件以及Principle拥有的一些基本工具。
