lesson3:图片点击效果

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

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

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

好了,开始今天的实例。

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

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



flinto图片点击效果



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

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


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


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

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


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

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

最终效果


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 【说明:本文是从Principle官网翻译过来的,因个人能力和水平有限,部分术语可能不准确,对软件功能的理解也可能...
    shea阅读 42,977评论 23 117
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,724评论 25 709
  • 历经三个月的争斗,终于让自己安定下来。或许,和自己预期的结果有大相径庭,但也有些许的庆幸。 人一旦失去目标,就容易...
    一条闲鱼在岸上阅读 1,150评论 0 0
  • 月落秋风拂湖面,芦苇枯黄穗飞絮。 冷清湖水波浪起,夜半时分拍岸边。 阡阡长堤无人烟,遥见远岸灯昏黄。 慢慢长夜无人...
    徐一村阅读 3,452评论 1 4
  • 楼下传来一阵阵的鞭炮声,感觉所有人都沉浸在新年倒计时的节日气氛里,外面有多热闹,我不知道,我只知道圣诞节的那场雪里...
    Super李李李李李阅读 1,443评论 0 0