前言

Sketch草稿

本原型是我按照简书上的一篇进阶（相比我这篇）翻译教程写出来的。

参考翻译教程

原作者省略的内容很多，大部分只讲了最根本的方法。

但是我这篇会更加的详细，对不知道如何具体做的同学来讲应该可以顺利做出效果。但是需要一定的耐心，和基础。一定要耐心，并不难！

写作时间：2017年10月底

我还在学习中，如果本文有任何问题，请私信提醒我，或者添加我的微信，我的微信号是mepolizhan，欢迎大家来交流

下面就正式开始。

制作概要

所需硬件：Mac电脑  所需软件：Sketch（不必须）+Principle

先来看看最终的效果

日历-流程

可以看出，我基本上 1 : 1 制作出了原作者的效果，我制作的这个也是可交互的，整个过程是可逆的。

这里提一下 Principle 对 Sketch 支持导入，用导入键导入是可编辑的，也分组和图层。

然后还有几个问题需要注意：

两个软件的画板设置大小最好一样，iPhone7 都是 iPhone7 ，Plus 都是 Plus 尺寸。

在Sketch中复制的「元素」，可以直接复制到 Principle ，但是是以图片形式复制的，并且位置不是原始位置。

推荐将想导入的东西复制到新建的 Sketch 里再导入。

第一步：元素创作

现将所有出现的界面元素按照设计大小画出。不过之后有一部分是要在 Principle 中重画的。

第二部：开始日期和结束日期动效

原文作者也叫它「浮动标签」 Label。

首先建立两个画板，分别放入如下元素

创造一个浮动标签（label）的效果你需要准备三个文字图层：预填充文字（灰色），标签（label）文字（蓝色）和主文字（黑色）。

从左到右是「设置开始日期」标签的动效

左侧页面上半部分，图层中共有三部分文字：

1. 预填充文字「设置开始日期」透明度设置为100%以及合适的大小。

2. 标签文字「开始日期」，文字透明度设置为0%，文字大小以及位置和预填充文字一样。

3. 主文字透明度设置为0%，文字大小以及位置和预填充文字一样。

右侧页面上半部分，图层中还是这三部分文字

1. 预填充文字「设置开始日期」透明度由100变为0%，文字位置和大小变为和「开始日期」一致」。

2. 标签文字「开始日期」，文字透明度由0变为100%，文字位置和大小不变。

3. 主文字透明度由0变为100%，文字大小位置不变。

请注意每个元素对应的名称应该是一样的，Principel 根据名称来匹配动画。设置好后，点击闪电符号设置两页之间的跳转。得到的效果如下。

第三部分：日期动效

这里的动效看似简单，实际上还需要几步设置。

日期动效

建立一个画板(图中左侧)，先绘制好背景和三个日期文字。

这里是一个直角变为圆角的动画，由于 Principle 不支持单独编辑矩形的角，而我们只想修改里侧的角。所以我们用特殊的办法实现。

在左侧画板中，先创建两个矩形，加上圆角。为他们之间加上深色块。

在左侧画板中，我们继续创建两个矩形（用来产生圆角动画）大小位置如下图所示，并且颜色和圆角矩形一致。并且覆盖住深色块。

现在复制一个画板，将刚才新创建的两个矩形（用来产生圆角动画的）也调整为圆角。

设置两画板之间的跳转，即可达成效果。

第四部分：日期选择器

同样先来看效果。

需要先说清楚的是，可以看出这个日期选择器拥有三个状态分别是星期一在中间，星期二在中间，星期三在中间。只要设置好就可以任意跳转。

那么首先我们来做星期二到星期一的动画，做成之后自然反着的也就有了。

如图右先创建文字一共七行，

最上边和最下边是隐藏的，也就是透明度为0，

正数第二和倒数第二行，字体较小并且透明度 20%

正数第三行，和倒数第三行，字体适中并且透明度 50%

中间一行，字体最大并且透明度 100% ，加粗。

这时候复制画板到图左。（左右顺序无所谓，我这里反着讲的，因为我先做的左边）

一样的配置不过因为我们只做了7行，所以这次是下方两行字是 0%透明度。如图

然后在按刚才的透明度和字体大小排列，注意图层的名字一定要一一对应，这是 Principle动画的关键。并且要注意对齐哦，否则动画不美观。

两个状态的做完了，照此进行第三个状态，也就是星期三在中间，然后设置好跳转就行了

总体配置如下图，这下我们完成了时间选择器的制作。

第四部分：整合与动效优化

我们现在拥有了三个模块的制作方法，现在只要整理好思路，制作出全流程的各个状态，就可以完成整个交互了。

状态一（画板一）至 状态二（画板二）

可以看到三个模块，最下方的是不变的安排模块。

想要的效果是点击17号日期后，开始日期变换为2017年 10月 17 日。下方渐入出现时间选择器并且时间选择器时间和点选日期一致（这里我犯了一个错误，错弄成19号了），安排模块渐隐消失。

这里提一下渐入和渐隐的动画，状态一其实是存在时间选择器的，它的透明度为 0%，并且比状态二高度高一些，这样动画就会自动产生渐入的效果，同样还是状态二也有一个透明度为 0% 的日程安排模块，位置比状态一要低一些，这样会产生渐隐的效果。

接下来单击18号日期，设置结束时间变为 2017年 10月 18日。

状态1，2，3

在接下来单击19号，运用我们刚才的日期制作技巧，产生圆角动画变换到状态4，此时结束时间和日期选择器随之变化。同样的单击20号日期，结束时间和日期选择器同样随之变化。

状态4，5，6，7

单击SET，跳转到状态6，和状态一和二一样的渐隐渐入，日程安排模块回来。这里左方有一个成功的动画预设在屏幕外，然后状态7 在屏幕中间，这样一点击后就可以自动生成动画。

这里做好跳转后点击Animate,选择状态6-7的跳转线可以将成功插画的动画类型调到  Spring，数值大家看着给就可以，Tension代表着弹力，越大动画的动作就越夸张，Friction代表阻力（摩擦力）越大停下的越快。

动画设置

状态6 设置「添加」键跳转到状态7，这样点击「添加」后就会从左侧弹出成功的插画。

这7个状态中前6个都是可逆的，大家自由添加各种元素的之间的跳转，就可以形成最开始的Demo了。

最好再提醒，图层的名字一定一一对应的，只要是同一个模块，名字一定相同才会有动画，否则很容易漫天乱飞。

最后我将提供我的 Sketch 源文件 和 Principle 源文件，觉得不错的话，可以把本文分享给小伙伴哦！

百度云链接: https://pan.baidu.com/s/1qYmeZ9q 

密码: i31s

转载请联系我的微信。

感谢你的阅读！