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

因为不知何故，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. 避免在播放电话/相机快捷动画时多次触发它。需要先设置一个触控区域，并在触发此控制区域同时将其置底，当动画播放完毕后再将此设置回原来的层级关系即可。

图层分组参考：

展开全部图层参考：