android水波纹动画制作,Framer之事件 | 如何制作安卓点击水波纹效果？

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

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

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

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

每个图层对象上面都有一个 on 函数，它表示给图层添加一个事件监听方法。后面的 Events.Click 是事件类型，这里是点击事件，还有 Events.LongPress 表示长按事件、 Events.Swipe 表示扫滑事件等，具体可以在事件文档( http://framercn.com/docs#events )中查阅。而后面紧接着是一个函数，它里面的代码就是当这个事件发生之后需要执行的操作。比如这里是输出 Clicked 和图层名称。需要注意的是，你在定义后续操作时可以使用事件监听方法提供给你的两个对象： event 和 layer ，第一个是当前事件对象，里面存储的有本次事件的鼠标坐标、鼠标移动距离等，第二个是事件发生所在的对象，这里就是 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 坐标值，因为这个坐标值以它的左上角为准的。这里我们使用 midX 和 midY ，即其中心坐标值来表示。它的中心坐标值是动态的，即鼠标点击处的坐标值。这个事件监听方法所提供的 event 对象里面包含了鼠标坐标值，即 event.point 。但是我们不能直接使用它，因为这个坐标值是相对于 Framer 中的设备屏幕的。所以我们使用 Screen 对象的 convertPointToLayer 方法把它转换为相对于 button 图层的坐标。

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

第二步：

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

第三步：

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

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

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

1、事件一般是发生在图层上的，包括手势、动画、状态切换事件等。

2、Framer 的事件方法一般会提供 layer 和 event 两个对象供你使用，可以通过它们获取事件发生的图层以及鼠标位置等。

3、Framer 提供的事件非常详细丰富，大大减少了设计师的设计难度。

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

如需转载请注明：

** 来自 leadream 的简书 **