四种方式完成经典点句式效果

前言

最近发现很多人都喜欢点句式，Path那个绝对经典，而且也不难，作为入门案例我觉得刚刚好。

我将分别使用flinto，principle，QC+origami以及framer制作这个效果，朋友们根据自己需要选择

首先我们要准备好设计稿，我这里用sketch

（PS：借用一下船长大大的sketch文件，船长教程可以看这里http://www.ui.cn/detail/93169.html）

一、使用Flinto

1.从sketch导入flinto（事先安装好flinto插件）

2.选择红色按钮创建链接到第二个页面，新建过渡 

3.把两个屏幕合到一起，并且调整小图标位置

 

4.选中5个小图标，更改属性，旋转-Z：720，透明度0%；更改弹性属性阻尼0.7，持续时间600ms 

5.选中半透明图层把透明度设为0，并且选中红色按钮旋转-Z：45。 

6.保存退出并且创建反向链接 

7.完成！预览看看吧。

二、使用Principle

1.准备好sketch文件，这次只要用一个页面就行了 

2.开着sketch软件，打开principle，导入设计稿 

3.复制一个画板 

4.在画板1里选中红色按钮，点击闪电图标，选择tap，链接到画板2 

5.移动小图标位置并且修改旋转720度以及透明度设为0，红色按钮旋转45度，半透明背景透明度设为0 

6.创建反向链接，选择画板2的红色按钮，点击闪电选择tap，链接到画板1 

7.完成

三、使用QC+origami

1.QC比较麻烦，我们先把素材导出来 

 
2.新建origami文件，双击进入中间的layer group 模块（patch），直接把准备好的图片素材拖进去 

3.调整按钮和小图标的位置，每个小图标的位置都要设置，侧边栏点击显示 

如图调整坐标点、X轴和Y轴。

这里先记录一下坐标位置

开始 
音乐：95，-943 
地址：175，-863 
相机：285，-833 
引用：395，-863 
夜晚：475，-943

点击之后 
音乐：191，-1023 
地址：227，-973 
相机：285，-943 
引用：340，-973 
夜晚：375，-1023 

4.这里我们选择反过来做 

所以逻辑是，当我点击的时候，红色按钮旋转，小图标收回位置改变同时旋转并且透明度变为0，并且半透明背景透明度变为0 

5.先做点击按钮旋转，创建Patch 

    1.Hit Area 
    2.Interaction 2 
    3.Switch 
    4.Classic Animation 
    5.Transition

如图连接各个Patch并且设置属性参数 

最后value连接按钮图层的Z Rotation上

6.现在做半透明背景以及小图标透明度从1变到0。再创建一个Transition，设置属性值开始为1，结束为0，左边Process连接到前面的Classic Animation上，value连接到5个小图标图层和半透明背景图层的Opacity上

7.接下来制作小图标旋转。新建一个Transition控制动画时间，为了展开和关闭一样，我都设置为0.5s。再继续新建一个Classic Animation，一个Transition。Transition值为0到360，value连接到5个小图标。其他连接如图 

8.最后做小图标的位置变化，新建一系列Classic Animation和Transition的patch 

同样的道理，用Classic Animation控制动画。Transition控制动画变化的值 

如图所示，后面的value分别输出连接到相应的图层的X Position或者Y Position上，前面Duration连接到控制动画时间的那个Transiton上，并且这5个Classic Animation的Number都要链接Switch的输出on/off上。 

9.大功告成！ 

看下效果 

四、使用framer

1.为配合framer使用，先在sketch把图片整理一下编组，并且修改图层名字，免得图层乱七八糟。 

2.然后导入framer里 

3.设置缓动曲线参数，这里我随便用一个spring(350,35,0) 

这个缓动曲线我命名为animateInCurve 

4.定义一个函数(或者有的人叫方法)，设置默认home状态 

解释一下代码的含义： 
framer用的是Coffees cript，是一种很简洁的语言。 

goHome = -> 表示定义一个新的函数叫做goHome，后面是它的内容 

sketch2.bg.animate 中sketch2是我导入的sketch文件叫做sketch2，bg是sketch2里面的图层，animate表示设置动画 

properties: {opacity: 0}表示动画的要设置内容。属性opacity是透明度，x、y是位置坐标，rotationZ是绕Z轴旋转 

curve: animateInCurve表示动画给设置名字为animateInCurve的缓动曲线（之前定义好的） 
然后把每一个图层都设置好。

5.goActive = ->同理，调整好参数，设置激活状态 

6.

goHome()执行goHome函数，保证打开的时候是默认状态。 

toggler = Utils.toggle(goActive, goHome)意思是就是把俩函数作为一个交替点击事件，叫做togger 

sketch2.RedBtn.on Events.TouchStart, (e) ->同理，sketch2.RedBtn是sketch2里的RedBtn红色按钮。意思就是在sketch2里的RedBtn上设置一个点击事件 

e.preventDefault()取消事件默认动作 

movePage = toggler()把前面设置的交替事件用上 

7.完成！！

最终效果