header_v0.7.31

Pixate模拟“Android Lollipop的锁屏界面”制作思路分享

2年前发布

原创文章 / 多领域 / 观点
Jaret_Zen 原创,如需商业用途或转载请与Jaret_Zen联系,谢谢配合。

利用Pixate模拟“Android Lollipop的锁屏界面”

update:
此案例已经上传到Pixate官方,作为官方提供的Demo案例之一



因为不知何故,PS里导出的gif动画比实际播放的速度要慢一点。特别是在电话/拍照快捷键的收起动画显得有些慢。实际效果是正常的。


制作时也力求尽可能的与原生的Android Lollipop的锁屏界面的交互和动画属性逻辑相符。但由于本人技术方面和Pixate本身的限制,无法做出全部百分百的锁屏功能界面。

此案例中主要实现且重点实现思路:

1. 点击屏幕,通知条有动画弹动。并在动画结束后才可以点击电话,相机等快捷方式。但在播放弹动动画时可以随时上滑进入图形解锁界面。

2. 点击电话、相机的快捷按键需要播放完动画效果后才能进行另一个/同一个快捷键的再次点击,但同时准许直接上滑进入图形解锁界面。


制作要点:

1. 点击屏幕,通知条自动上滑后回到原始位置。且下拉无list的弹簧属性效果。

2.点击屏幕播放通知条相应动画时,亦能同时触发上滑通知条动作。

3. 点击电话相机快捷键,播放相应动画时不能重复点击触发。


制作思路:

1. 利用iOS中list本身带有的弹簧效果里实现建立一个“幽灵”list去对应通知条的滚动。新建一个可以scroll的空内容List。内容长度只需要比手机画布尺寸多出0.5,即可实现list的滚动。


特别说明:

因为通知条对应的逻辑动作比较复杂。不仅需要随手势滑动的list属性,又需要在点击屏幕和未滑动到制定位置后再次回到起始位置。所以不能单纯的给通知条赋予scroll属性。因为scroll list里的内容目前是无法做到强制定位的。也就是你无法控制通知条的位置自动回到初始状态。所以此实例仅能利用在iOS设备和模拟器中实现,而Android本身list不具有弹簧效果,故此案例无法正常运行在Android的设备上。


2. 因为点击事件与scroll滑动不可在一个list上同时触发。则需要在“幽灵”list上再分别拆成仅仅具有scroll和同时具有Tap和scroll功能的两个“幽灵list”。通过触发tap事件后将仅有scroll事件的“幽灵list”置前,来达到点击后亦可立即上滑的效果。


3. 避免在播放电话/相机快捷动画时多次触发它。需要先设置一个触控区域,并在触发此控制区域同时将其置底,当动画播放完毕后再将此设置回原来的层级关系即可。


图层分组参考:



展开全部图层参考:


13
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功