提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
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. 建议大家动手制作下,中间肯定会遇到问题,通过自己思考解决后自己对相应模块的理解会更深入;
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册