Simple implementation of the iOS Disk rotation guide diagram

Recently updated a batch of apps, many have used the effect of disc rotation, such as: Baidu Music, when, the approximate effect is as follows:

Let's see how this is going to come true.

I. Layout of view elements

First of all, we need to make it clear that these view elements are distributed around a circle, by sliding the position and rotating the corresponding angle in the center of the circle.

If the white disk and the villain view separate, you need code control, tilt angle, and then add to the parent view, the tilt is good to do, is the image rotation, but the frame of the tilted picture is not good control.

What should you think about then? Yes, design sister, I set the angle, let the design sister to the disk and small figure together transduction to me, as follows:

So you do not have to adjust the frame of a single picture, the picture of the center.x set to half the width of the device, by adjusting the center.y, to control the display of the image, the code is as follows:

_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];

Two, slide up

The first thing you might think about is adding a slide gesture to the added picture, and then changing the _circlebg.transform to rotate the angle, which rotates the picture, but it needs to maintain a lot of variables to control the whole process, such as: sliding

How many distances, flipping to the next page, sliding a little distance, letting go, reverting back to the current page, and so on.

How to control it?

The concerns we have just mentioned can be solved perfectly by scrollview, think about it.

So, what we have to do is to scrollview the angle of rotation of the picture and the sliding offset of the image , to drive the rotation of the picture through the ScrollView, think of the beautiful Ah!

The code is as follows:

Add a 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];

Proxy method

-(void) Scrollviewdidscroll: (Uiscrollview *) scrollview{    float OffSetX = scrollview.contentoffset.x;    _circlebg.transform = Cgaffinetransformmakerotation (-offsetx* (M_PI*4/9)/kscreenwidth);}

Isn't it very simple ah!

Simple implementation of the iOS Disk rotation guide diagram