5分钟制作微信H5浮窗动效，浮窗吸附边缘

一、我们先来看下整体效果，如下：

效果为微信最新上线的浮窗功能，使用的交互制作工具为ProtoPie。

二、此教程将学到什么？

 1. 推拉、联动、范围、拖拽、抬起、单击、下击、条件怎么使用

三、交互效果分析及制作

1. 在手指向右滑动过程中有几处细节，不同的操作产品将有不同的交互效果。如果手指快速向右滑动或滑动距离超过屏幕一半则返回上一页。如果慢速滑动且横向滑动距离不超过屏幕一半，则当前阅读页弹性退回原点，如下图

使用知识点：

    a.推拉：推拉触发是一种含有成功和失败概念的触发方式。图层被拖动超过一定距离或一定速度时，则认为拖动成功。成功时图层将按照用户指定的距离发生移动，失败时图层回到原来的坐标；

制作过程如下图

2. 手指在左半屏滑动时，底部浮层跟随手指在横向上的距离而变化。如下图

使用知识点：

    a.联动：图层属性的变化影响另外一个属性发生变化；

    b.移动；

制作过程如下图

3. 如果此时手指快速向右滑动或手指横向向右移动超过一半屏时，当手指在此情况下抬起则浮窗隐藏。如下图

使用知识点：

    a.拖拽；

    b.条件：当触发动作满足预设条件时，指定反应动作发生；

制作过程如下图

4. 如果手指在向右滑动过程中，在右下角浮层区域手指抬起，则文章快捷入口浮层出现，如下图

使用知识点：

    a.抬起；

    b.条件；

制作过程如下图

注意事项：

    a.文章快捷入口的锚点设置为右中，方便缩小时相应对象出现在右中位置；

    b.为了达到缩小的效果，文章快捷入口开始的尺寸（667，667），透明度（0）；

5. 手指拖动文章快捷入口中，当手指抬起时如果手指在左半屏则文章快捷入口吸附到左半屏，右侧同理，如下图

使用知识点：

    a.抬起；

    b.条件；

制作过程如下图

注意事项：

    a.在设置文章快捷入口各参数时，要充分考虑其锚点在什么位置，在左侧，中间、右侧，对应设置的X位置都不一样；Y轴位置不输入任何数值；

6. 当手指刚按下文章快捷入口的时候出现取消浮层，抬起时取消浮层隐藏，如下图

使用知识点：

    a.下击；

    b.抬起；

    c.条件；

制作过程如下图

7. 当手拖拽文章快捷入口移动到右下角抬起时，文章快捷入口和取消浮层全部隐藏。具体步骤参考参考6

8. 点击文章快捷入口，打开文章，如下图

使用知识点：

    a.单击；

四、制作过程注意以下事项

1. 图层的锚点在什么位置，是相对当前页面，还是相对当前容器；

2. 根据实际情况勾选“可触碰低层级图层”，勾选后手指可穿透当前图层触碰当前图层下方的交互动触发；

3. 在设置范围或位置的参数时，涉及到元素的宽、高最好是偶数，方便取平均数；

4. 注意按下、抬起、拖拽、长按的区别；

五、总结

1. 以上是关键步骤的制作思路，部分细节忽略了，如需查看Demo源文件，请前去下载，里面包括一些没讲到的细节；

2. 建议大家动手制作下，中间肯定会遇到问题，通过自己思考解决后自己对相应模块的理解会更深入；