iOS圆盘转动引导图的简单实现

最近更新的一批app，好多都采用了圆盘转动的效果，比如：百度音乐、当当，大概效果如下：



看看这个是怎么实现的吧。

一、视图元素布局

首先需要明确，这些视图元素是分布在一个圆周上的，通过滑动位置，以圆周中心旋转相应角度，那么该怎么布局呢？

如果把白色圆盘和小人视图分开，就需要代码控制，倾斜角度，然后add到父视图上，倾斜好办，就是图像的旋转，但是，倾斜后的图片的frame就不好控制了。

这时应该想到什么呢？没错，设计妹妹，我订好角度，让设计妹妹把圆盘和小人图一起切图给我，如下：



这样就不用自己去调整单张图片的frame了，将该图片的center.x设置为设备宽度的一半，通过调整center.y，来控制图像的展示，代码如下：

_circleBg = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 1355, 1292)];

_circleBg.center = CGPointMake(self.view.frame.size.width/2.0, self.view.frame.size.height+100);

_circleBg.image = [UIImage imageNamed:@"circle.png"];

[self.view addSubview:_circleBg];

二、滑动起来

首先可能会想到，在添加好的图片上面去添加滑动手势，然后改变_circleBg.transform来旋转角度，这样做能旋转图片，但是需要维护很多变量来控制整个过程，比如：滑动

多少距离，翻转到下一页；滑动一点点距离，松手，还原回当前页等等。

怎么控制好呢？

刚才提到的这些顾虑可以通过scrollview完美解决，想想是不是。

那么，我们要做的就是把图片旋转的角度和scrollview的滑动偏移量绑定在一起，通过scrollview来带动图片的旋转，想想都美好啊！


代码如下：

添加一个scrollview

_scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];

_scrollView.backgroundColor = [UIColor lightGrayColor];

_scrollView.contentSize = CGSizeMake(self.view.frame.size.width*3, self.view.frame.size.height);

_scrollView.delegate = self;

_scrollView.pagingEnabled = YES;

[self.view addSubview:_scrollView];

代理方法

- (void)scrollViewDidScroll:(UIScrollView *)scrollView

{

float offSetX = scrollView.contentOffset.x;

_circleBg.transform = CGAffineTransformMakeRotation(-offSetX*(M_PI*4/9)/kScreenWidth);

}

是不是很简单啊！