苗子

        前几个星期，借助工作之余，当然也是在主管的作业要求之下哈，学习了新动效软件-Priinciple，确实是个很赞的轻交互表现软件——操作简单、动效智能，在这之前如果接触过相对高阶的动效软件，如AE、Flash等，那学这个软件就更为简单了。

        在这过程，很庆幸在lofter发现学长比我先学一步哈 ~ 很感激学长推荐的两个网站——视频网站入门学习、中文手册全面了解（所以建议小伙伴们先看视频，模拟操作后，在细看中文手册）。

       视频网站：https://v.qq.com/x/page/q0170fuadvl.html?ptag=www_ui_cn

       Principle中文手册：https://principleux.com/principle-chinese-document/

       在学习过程中，我都是以特定的单一动效进行学习，但后来在完成主管的动效作业时，也发现复杂的动效就是简单的动效进行组合而已，所以在学习过程中，不要因为简单以为在脑子过一遍就行了，最好还是实打实地进行操作一遍，而在这里我也简单描述一下我是怎么解剖一个多重的动效组合。

       先总体展示一下，动效示范以及最终的作业模拟。

动效示范：

作业模拟：

        总的来说，经过研究，这个动效主要经过三个步骤构成：卡片滑动变化内容、选择后向上推出现二层内容、二层选择后页面内容向上推出详情，如下图所示，通过分层再细化，设计的思路也比较清晰，另外对于整理设计素材也有比较清晰的方向，但在这就不一一赘述了。

        在这里有必要强调一下，所有环节的图上所有的元素都是独立的，我主要都是通过sketch进行元素的切片，再导入principle（相关导入方式在中文手册里有详细解说），然后根据需要进行编组，总的来说，就是保证每个设计元素都是可编辑、可独立设置动效的。

第1步：卡片滑动变化内容

对应动效：

第2步：选择后向上推出现二层内容

对应动效：

第3步：二层选择后页面内容向上推出详情

对应动效：

        其实整体最考验我能力的有两个方面：第一动画细节的研究深度以及还原度；第二是对Priciple各种动效自带的动画曲线认识。当然第一方面主要是认真程度跟较真程度的体现，但第二方面就是各种pinciple的动画解读，也许由于我没有教好的物理基础，对各种曲线的动效原理能所见即所得，另外再加上在不同条件下的限制下，唯有一个字表达“晕”。

      所以在处理动效细节调整曲线模式或参数时，对于我来说只是各种类型、各种数据进行尝试，所以在做这个动效就在这方面花费的时间很多。但从一开始学习到最后做这个动效，虽然做了很多的调节，依然至今自我感觉还无法形成比较可行的方法论，所以很希望在这方面除了自己练习摸索，更希望有小伙伴有好的建议或方法论可以共享。