lesson3:图片点击效果

每个人接触新鲜事物初期，会对这个完全陌生的新事物产生恐惧感！导致自信心不足，望而生怯！这个时候你需要克服这种恐惧，尝试去接受它，一点一滴，慢慢地去接受它。这是学习Flinto第二周，好像也没强制要求自己一定要学到什么程度，或许这样轻松一点，但是发现这种进展速度太慢了，所以从这周开始，改变学习的方式。

第一周看了两三个实例视频，只有实践操作，学习效率才会提高。对这个软件有了一定了解之后，可以进入第二阶段了：每周做几个实例，可以看看现在市场上已经有的APP交互效果，按照它的效果，自己尝试做做。当你学会做它的效果之后，可以尝试升级它的交互效果，多尝试，或许有不一样的惊喜哦~

有时候觉得在上班时间看视频总是一件不太好的事情，总是希望网上能多一些文字性的具体的实例讲解。

好了，开始今天的实例。

先来分析一下这个动效，它的效果是怎样的？

虽然是两个页面，但是点击了是在当前页面图片放大的效果，要知道原理了才知道怎么做哦~做之前一定要先知道动效原理.

flinto图片点击效果

1.在sketch中设计两个页面，一个是图片列表页面，一个是点击放大的页面

2.将两个页面导入到flinto中，sketch有一个插件，可以直接将页面导入到Flinto中，这里需要注意的是，剪切蒙版的图层会转变成单个的位图。

3.选一个图片，绘制链接，绘制链接是指可点击或者操作的区域，因为转入到Flinto中时，是在sketch中原始图片的区域。

4.编辑过渡效果：开始为结束屏的页面，结束屏为开始的页面，开始和结束的时候，先让两个页面重合在一起。

5.开始是结束页面，结束是开始页面，这个刚开始的时候很难习惯，一定要提醒自己，在做动效的时候，思考你的动效，结束时候的页面是什么样的。这里，需要给图片点击放大的那个页面的图片添加链接图层，因为这里有个图层放大缩小的变化。（链接图层，是同一个图层不同的动效变化，创建链接图层，是最终的效果图链接到原始图层）

这里调节这三个值，可以多尝试哦，效果也会很不一样的。

6.创建反向链接，绘制链接，跟页面一样大小的框，然后过渡到反向链接。

最终效果