iOS开发之模仿Mac版QQ登录动画

每次登录QQ的时候都觉得登录框的动画挺小清新的,今天想着自己实现一下这个小功能 ,首先效果如图

iOS开发之模仿Mac版QQ登录动画_第1张图片
效果图

功能实现不难,就是刚开始的时候思路走了些弯路,刚开始我是打算先把动画的蓝色圆环先添加在界面上,然后通过改变该圆环的layer的strokestart和strokeend的数值来达到目标效果的,我首先设置了两个float类型的start和end属性,其中start默认0.25,end默认0.75,每秒钟start和end默认增加0.1,但是当end的值大于1后,为了使strokeend有效,我设置当end大于1时。end-1,然而并没用,甚至干脆动画都没了。然后我想过当end大于1后,交换start和end的值,发现圆环会突然变成反向的,所以我就放弃了使用strokestart和strokeend达到效果的方法。

然后我就用了这个方法,达到了最终的效果。

iOS开发之模仿Mac版QQ登录动画_第2张图片
主要代码

if判断语句是为了看看在添加新的layer之前有没有旧的蓝色圆环,有的话就删除,然后添加,如果不加这个判断的话,就会导致圆环逐渐形成整环。另外使用insertSublayer是为了让蓝色圆环加在最底层从而达到滑过下面的绿色圆圈是不要遮盖住它。


demo地址github.com/hmj0930/QQLogin.git

你可能感兴趣的:(iOS开发之模仿Mac版QQ登录动画)