iOS开发:关于旋转动画的实现

时间:2024-04-05 15:37:29

    那天在boss直聘上投了一家公司的简历然后接到了电话面试,最后他们给我发了一个简短的视频叫我实现。大致内容是有某种图案(自定义即可)组成的一个圆形,可以旋转,可以修改元素个数。还能通过UITouch(发的要求不让用手势)实现放大缩小。

 

iOS开发:关于旋转动画的实现

图1、默认不显示

 

iOS开发:关于旋转动画的实现

图2、输入数值之后会显示相对应个数的元素

一、关于修改元素个数的实现

修改元素效果如下图所示

iOS开发:关于旋转动画的实现

图3、修改元素个数

1、修改元素个数

       修改元素使用的是CAReplicatorLayer复制图层类,并不是经过准确计算画上去的。首先,我们要创建一个复制图层,并将复制图层添加在背景灰色的背景view上(图1、图2、图3为了效果明显一点先将背景图设置了透明)。

2、显示元素

       图案的显示使用的是UIImagView控件,需要注意的是要想产生被复制的效果,需要添加在复制图层对象上的是imageView.layer属性。

iOS开发:关于旋转动画的实现

图4、复制图层的使用

3、修改元素的时候需要注意的地方

图4的第一句代码的注释是“(再次)创建复制图层”,为什么说要再次创建复制图层呢?因为第二次复制图层之前如果不将第一次的清除,就会产生叠加的效果,效果如下图所示

iOS开发:关于旋转动画的实现

图5、再次复制之前不清除上一个图层就会造成叠加效果

二、旋转动画的实现

旋转动画的实现使用的是CAKeyframeAnimation(帧动画)类,要想实现旋转动画,必须规定其对象animation的keyPath属性为@"transform.rotation";values对象的值域从0°~360°。(必须将角度转换为弧度)。代码如下图所示。

 

iOS开发:关于旋转动画的实现

图6、这里要说有什么值得注意的话,那就是别拼错keyPath的值就行了

三、图片伸缩的实现

      如果是伸缩的话,用手势类的UIPinchGestureRecognizer(捏合),很容易就实现了。但是规定要求就是要使用UITouch类,那我们就怪怪的用UITouch类就好了。

     要实现图片的缩放,我们首先要得到几个变量:

  (1)、当手指触碰到屏幕的起始点(touchesBegan)

  (2)、手指在屏幕上不断移动的点(touchesMoved)

  (3)、前两者的横坐标相减与屏幕宽度一半的比值(如果从屏幕边缘开始滑动,到一半的时候正好缩小成一个点)。

 

iOS开发:关于旋转动画的实现

图7、touchesBegan方法

 

iOS开发:关于旋转动画的实现

图8、touchesMoved方法

到这里放大缩小的动画就基本完成了(只是基本完成),这个时候会有一个bug,那就是我开始滑动的时候缩放的会很慢,但是当我再次滑动的时候会先返回至上一个动画的结束位置再开始滑动,如下图所示:

 

iOS开发:关于旋转动画的实现

图9、bug

暂时解决不了,希望各位大神可以帮忙解决一下。

github地址:https://github.com/myNameIsZuiCai/rotationAnimatin-makeScale