(Original) IOS Metro implementation, with windows magnetic effect (1), iosmetro

(Original) IOS Metro implementation, with windows magnetic effect (1), iosmetro

Implementation of Metro in IOS with windows magnetic posts (1)

No nonsense-slag Graph

　　All the friends who transferred "blog Garden" Please indicate the source: http://www.cnblogs.com/xiaobajiu/p/4084717.html

Flat strikes, and Microsoft's metro style looks very scientific. So I want to write an IOS metro control. After a while, I got a look. My idea is that metro is similar to wp8. The display information is displayed in rotation. If you touch metro, it will shake or suck. Click metro to execute the event, and you can run other events by long-pressing the tile.

Structure: The outermost layer of metro is the skeleton layer. The role of this layer is to stay at the position. The internal size changes and the drag-and-drop operations of metro do not affect the external structure. Inside the skeleton is the mask layer and content layer. The mask layer serves as the metro topic color at the bottom, and the content layer stores the two views to be displayed. It is worth noting that the mask layer is hidden without a topic.

Metro structure-large image

Then, you can directly go to the most interesting part of your friend and perform an animation. IOS animation is cheap. Unlike Windows, other platforms are like painting with a pen, and IOS is like printing a printer. On IOS, the main graphics related to Quartz2D and core animations are enough to cope with simple rotation and scaling. The code is short. The rotation effect can be achieved through a single line: view. layer. transform = CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z. The following is the screenshot of a complete tile rotation code:

/*** (Private) metro rotation animation */-(void) revolveMetro {_ isViewDleaying = NO; [UIView animateWithDuration: _ turnTimes [_ currentViewID] delay: 0.0 options: UIViewAnimationOptionCurveEaseIn | UIViewAnimationOptionAllowUserInteraction animations: ^ {_ isAnimating = YES; // modify the animation status _ container. layer. transform = CATransform3DMakeRotation (M_PI_2, 1.0, 0.0, 0.0); if (! _ MaskingView. hidden) _ maskingView. layer. transform = CATransform3DMakeRotation (M_PI_2, 1.0, 0.0, 0.0);} completion: ^ (BOOL finished) {(UIView *) self. views [_ currentViewID]). hidden = YES; (UIView *) self. views [[self nextIndexNowNextView]). hidden = NO; [UIView animateWithDuration: _ turnTimes [_ currentViewID] delay: 0.0 options: UIViewAnimationOptionCurveEaseOut animations: ^ {_ container. layer. transform = CATra Nsform3DMakeRotation (-M_PI_4/2, 1.0, 0.0, 0.0); if (! _ MaskingView. hidden) _ maskingView. layer. transform = CATransform3DMakeRotation (-M_PI_4/2, 1.0, 0.0, 0.0);} completion: ^ (BOOL finished) {[UIView animateWithDuration: _ turnTimes [_ currentViewID] delay: 0.0 options: UIViewAnimationOptionCurveEaseIn animations: ^ {_ container. layer. transform = CATransform3DMakeRotation (0, 1.0, 0.0, 0.0); if (! _ MaskingView. hidden) _ maskingView. layer. transform = CATransform3DMakeRotation (0, 1.0, 0.0, 0.0);} completion: ^ (BOOL finished) {_ isAnimating = NO; // modify the animation status}];}

Three animations are combined.OptionsOption to set many useful properties. For example, the animation time curve, simply put, is the speed of the animation gradually, it is painted on the coordinate axis is a variety of curves. There are many ways to switch images in the rotation of the magnetic post, for example, I do not use a method: [view exchangeSubviewAtIndex: 0 withSubviewAtIndex: 1]; this method can directly swap the positions of the Child layers 0 and 1 in the child level index of the parent layer. To achieve the goal of switching layers. I am using a method to hide layers, so that I don't want to disrupt the order of layers, so that I can easily find a layer.

In addition to the rotation of metro, there is also an animation effect that is the tilt effect when metro is touched. By observing wp8, the longer the touch point falls from the center, the greater the intensity. But close to the center area is the sinking effect rather than the tilting effect. Through observation, we can also find that the animation effect is triggered when you touch metro. The animation effect can be executed in the-(void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event function.

A tedious problem is the problem of skewed computing. The promise rotates with the geometric center as the symmetric axis, only the rotation angle can be controlled to calculate the Rotation Angle Based on the distance to the geometric center when a metro line is touched through the geometric center. The axis of symmetry to be rotated is the line obtained by Rotating 90 degrees through the straight line of the geometric center (the link between the touch point and the geometric center) in the previous sentence.

You can create a structure to represent this vector:

/*** Vector with weight */struct MetroVector {CGFloat x; CGFloat y; CGFloat power; // The weight value indicates the sinking intensity of metro. <-[0.0, 1.0]}; typedef struct MetroVector;

The next step is to get touch point a when you touch metro. A vector V1 is calculated from a and the center o. The 90 degree rotation of V1 is the required symmetric axis V2. Enter x and y of V2 in the rotation function. It is worth noting that the view. layer. transform = CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z) the value range of x, y, and z in this function is [0.0, 1.0]. I used the ao length of the Line Segment to compare the distance from o to any corner of metro, that is, the half length of the diagonal line. Get a 0 ~ The quantity of 1 can be used to measure the strength.

Code for calculating vector V2:

/*** (Private) Calculate the vector of the 3D Skewed Symmetry Axis when a metro click ** @ param view touch view * @ param touchPoint the touch point */-(MetroVector) getVectorByTouchedView :( UIView *) view in :( CGPoint) touchPoint {MetroVector vector; CGFloat width = view. frame. size. width; CGFloat height = view. frame. size. height; CGFloat diagonal = sqrt (width * width + height * height); // diagonal vector. x = touchPoint. x-width/2; // vector with the ry center as the origin. y = touchPoint. y-height/2; CGFloat lenTouchBetweenCenter = sqrt (vector. x * vector. x + vector. y * vector. y); // The distance between the touch point and the geometric center CGFloat max = MAX (vector. x, vector. y); // take the maximum value and perform the Division so that the maximum value of the two is 1.0 CGFloat temp = vector. x; // exchange the values of x and y, one of which returns the inverse (indicating that the vector is rotated 90 degrees to become the axis of the layer) vector. x =-vector. y/max; vector. y = temp/max; CGFloat len4maxPower = diagonal/2; // obtain the diagonal 1/2 as the most powerful vector. power = lenTouchBetweenCenter/len4maxPower; return vector ;}

With V2, you can directly access the code.

-(Void) touchesBegan :( NSSet *) touches withEvent :( UIEvent *) event {[super touchesBegan: touches withEvent: event]; if (self. isAnimating) return; // touch allowed. re-animation of CGPoint touchPos = [(UITouch *) [touches anyObject] locationInView: self] is not allowed. // CGSize viewSize = self in the central area. frame. size; CGRect centerRect = CGRectMake (viewSize. width/4, viewSize. height/4, viewSize. width/2, viewSize. height/2); if (CGRectContainsPoint (centerRect, touchPos) {// whether it is in the center area, then the sinking animation [UIView animateWithDuration: macroTouchOneAnimationInterval/5 delay: 0.0 options: UIViewAnimationOptionCurveEaseOut | UIViewAnimationOptionAllowUserInteraction animations: ^ {_ isAnimating = YES; self. layer. transform = CATransform3DMakeScale (0.975, 0.975, 1.0);} completion: ^ (BOOL finished) {[UIView animateWithDuration: macroTouchOneAnimationInterval/2 delay: 0.0 options: Invalid animations: ^ {self. layer. transform = CATransform3DMakeScale (1.0, 1.0, 1.0);} completion: ^ (BOOL finished) {_ isAnimating = NO; // ..}] ;}];} else {// skewed animation MetroVector vecor = [self getVectorByTouchedView: self in: touchPos]; [UIView animateWithDuration: macroTouchOneAnimationInterval delay: 0.0 options: enabled | required animations: ^ {_ isAnimating = YES; self. layer. transform = CATransform3DMakeRotation (randianFromAngle (30 * vecor. power), vecor. x, vecor. y, 0.0); //} completion: ^ (BOOL finished) {[UIView animateWithDuration: macroTouchOneAnimationInterval/2 delay: 0.0 options: UIViewAnimationOptionCurveEaseOut animations: ^ {self. layer. transform = CATransform3DMakeRotation (0, vecor. x, vecor. y, 0.0);} completion: ^ (BOOL finished) {_ isAnimating = NO; //...}] ;}] ;}}

Up to now, the most core animation content has been implemented. There is still the processing of touch events, and a bunch of so-called business logic and some functional implementations. I would like to introduce it in the next blog. And assigned the code to download, tucao that kind of copy box rolling, resulting in one hundred degrees one hundred pieces of the same content behavior.

　　If any errors occur, please correct them to avoid mistakes.