×

Framer之事件 | 如何制作安卓点击水波纹效果?

96
leadream
2017.03.17 22:08* 字数 1777

之前的 Framer 教程都是按照个人喜好去写的,没有按照难易程度形成系列。为了让大家能更好地入门,我准备由易到难写一个系列教程,尽量保持在每周一篇的频率。

导读:事件是 Framer 中的一个重要概念,它是交互动效的触发开关。它主要包括一些手势事件(触摸、滑动、双击等),还有动画运行、状态切换、页面切换等事件。我们一般通过监听事件的发生来触发一些交互动作。

事件是什么呢?你可以想象在 Framer 中有一个小人一直在盯着屏幕,当你点击或滑动屏幕时它就会告诉 Framer,Framer 就执行你写的这个事件对应的处理代码。我们经常要使用事件监听来实现一些交互效果,最常见的就是点击图层时切换图层状态。

我们一般这样定义一个事件监听操作。

每个图层对象上面都有一个 on 函数,它表示给图层添加一个事件监听方法。后面的 Events.Click 是事件类型,这里是点击事件,还有 Events.LongPress 表示长按事件、 Events.Swipe 表示扫滑事件等,具体可以在事件文档( http://framercn.com/docs#events )中查阅。而后面紧接着是一个函数,它里面的代码就是当这个事件发生之后需要执行的操作。比如这里是输出 Clicked 和图层名称。需要注意的是,你在定义后续操作时可以使用事件监听方法提供给你的两个对象: eventlayer ,第一个是当前事件对象,里面存储的有本次事件的鼠标坐标、鼠标移动距离等,第二个是事件发生所在的对象,这里就是 layerA 这个图层。

Framer 提供的事件种类非常丰富,甚至包括两指旋转、3D touch 等,完全可以满足各种原型的交互。

接下来我将用一个完整的例子具体讲解事件该如何使用。安卓 Material Design 里面的点击水波纹效果大家一定都知道:

那么用 Framer 怎么实现这个效果呢?我们先用中文描述一下这个过程:有一个按钮,当用鼠标点击它时,以点击时的位置为圆心绘制一个很小的圆,同时将其放大并不断降低透明度直至消失。接下来我们将其翻译成 Framer 的语言。

首先绘制一个按钮图层:


通过新建图层我们就在界面上绘制出了这个按钮。需要注意的是,我们要设置它的 clip 属性为 true ,这样才能保证点击时出现的水波纹超出按钮的部分被隐藏。 Utils.labelLayer(button, 'CLICK ME') 是快速给按钮设置文字并让其在按钮正中间; button.style.fontSize = '24px' 则是通过 CSS Style 将其字号变成 24 像素; button.center( ) 则是将该图层快速居中于屏幕中央。此时在屏幕正中间就出现了这个按钮。

接下来就是给它添加一个点击事件。当鼠标点击它时,会发生以下几件事:

1、在按钮中,以鼠标点击的坐标点为圆心,画一个圆形图层(水波纹)
2、将这个圆形图层逐渐变大(scale)且逐渐隐去(opacity)
3、当这个圆形图层不透明度变成0时,移除这个图层

第一步:

当鼠标点击它时,需要在点击处画一个圆形的图层作为水波纹。通过新建图层对象 ripple ,并设置它的一系列属性让它表现为一个圆形。需要注意的是,它的宽高( 这里是 240px )要比按钮大,然后我们再设置它的 scale 属性为 0.05 ,即缩小至原大小的5%,这样它刚出现时就是一个小圆点。为什么要先设置很大的宽高再通过 scale 让它显示很小,而不是设置很小的宽高点击时增大 scale 让它荡漾开呢?是因为第二种方式会导致放大后边缘模糊且有毛边。

因为是以点击处的坐标为圆心,我们不能直接写它的 x 、 y 坐标值,因为这个坐标值以它的左上角为准的。这里我们使用 midXmidY ,即其中心坐标值来表示。它的中心坐标值是动态的,即鼠标点击处的坐标值。这个事件监听方法所提供的 event 对象里面包含了鼠标坐标值,即 event.point 。但是我们不能直接使用它,因为这个坐标值是相对于 Framer 中的设备屏幕的。所以我们使用 Screen 对象的 convertPointToLayer 方法把它转换为相对于 button 图层的坐标。

然后通过 buttonaddChild 方法让这个圆形波纹变成它的子图层。

第二步:

给圆形波纹图层添加状态 bigger ,并让它通过动画切换到新状态。如下面的代码所示,在新状态 bigger 中它的 scale 变成 4 同时 opacity 变成 0 ,动画时间是 6 秒。最后通过 animate 方法执行状态切换动画。

第三步:

圆形波纹的状态切换也是一个事件,我们可以通过 onStateDidSwitch (这是一种事件简写形式,具体请看参考文档)来监听它在何时“切换完毕”,当切换完毕时将该圆形波纹删除。

其实不删除也可以,反正每个圆形波纹最终不透明度都变成 0 了,看不见了。但是点一次生成一个子图层,点击很多次就会生成很多子图层,会影响性能。关键是我是强迫症,不能忍。

这样我们就完成了安卓点击水波纹效果,总结一下事件的要点:

1、事件一般是发生在图层上的,包括手势、动画、状态切换事件等。
2、Framer 的事件方法一般会提供 layer 和 event 两个对象供你使用,可以通过它们获取事件发生的图层以及鼠标位置等。
3、Framer 提供的事件非常详细丰富,大大减少了设计师的设计难度。

点击此处,获取示例的源文件。

如需转载请注明:
** 来自 leadream 的简书 **

Framer学(入)习(坑)指南
Web note ad 1