IOS uses animation and Bezier to achieve _ios effect

First up Effect chart:

Circular

Square

Thinking Analysis:

These four styles are actually two kinds, one is the animation effect in view of the interior, the other is outside the view! We can try to encapsulate the custom View settings related properties to achieve both styles. Click to touch the animation, indicating that you want to add gestures on this View! Analysis of animation effect is actually two kinds, the first is the proportion of the view from small to large, the second is the animation shows the effect is gradually darkened! So we can write two effects into an animation group! There is also a problem is the shape of the effect, that is, Layer animation show the shape of a square has a circle, this shape requires us to think how to draw and judge!

Code Analysis:

First, create a custom View class to achieve the animation effect of the Click! Because the analysis has two styles (outside) of the animation, so to be in. h file in the declaration of attributes to receive outside the style of telling! We can also add some values for external modification, such as the edge thickness of the animation, fill color, animation time and so on here I use a color for example! Outside can provide a color, how to use the specific code has!

The typedef ns_enum (Nsuinteger, Flashbuttontype) {
  # style defines the notation of an enumerated type to represent the animation both inside and outside (easy to understand)
  Ddflashbuttoninner = 0,
  ddflashbuttonouter = 1

};
# Two attributes defined
@property (strong, nonatomic) Uicolor *flashcolor;
@property (Assign, nonatomic) Flashbuttontype ButtonType;

# Write This method you can manipulate child controls on a view's child view, and you can expose the control without the handle
-(void) SetText: (NSString *) text withtextcolor: (Uicolor *) TextColor;

2nd step: In the initialization method, we can add some child views to this view, such as Uilabel to show some words to express (here also can write a way to change the label on the text of the property,)! You also need to add a click gesture to the View!

-(Instancetype) initWithFrame: (cgrect) frame{

  if (self = [Super Initwithframe:frame]) {
# Create gesture and add to View
    UI Tapgesturerecognizer *tap = [[UITapGestureRecognizer alloc] initwithtarget:self action: @selector (Didtap:)];
     [Self addgesturerecognizer:tap];
    Self.textlabel = [[Uilabel alloc] initWithFrame:self.bounds];
    Self.textLabel.backgroundColor = [Uicolor clearcolor];
    [Self.textlabel Settextalignment:nstextalignmentcenter];
    [Self AddSubview:self.textLabel];
    Self.backgroundcolor = [Uicolor cyancolor];
# to give a default style does not set is to represent the animation inside
    self.buttontype = Ddflashbuttoninner;
  }  
  return self;
}

Step 3rd: You can give the child control some properties here's a label and a way to write it.

-(void) SetText: (NSString *) text withtextcolor: (Uicolor *) TextColor
{
# is to give Label to the outside of the value if there are other controls can change some parameters in this way
  if (text)
  {
    [Self.textlabel settext:text];
  }
  if (TextColor)
  {
    [Self.textlabel settextcolor:textcolor];
  }
}

4th step: Depending on the style of the different we want to control the scope of animation, that is, add animation in the interior can not exceed the scope of View

# here is the rewrite of the ButtonType setter method, while judging the style based on the style to choose whether to cut out the portion of the view more than
-(void) Setbuttontype: (Flashbuttontype) ButtonType
{
  _buttontype = ButtonType;
    if (ButtonType = = Ddflashbuttoninner)
  {
//content and child views are clipped within the bounds of the view (only the view range is allowed to have child views and class tolerances to display)
    Self.clipstobounds = 1;
  } else
  {//outside can display
    self.clipstobounds = 0;
  }
}

The 5th step: The preparation work completes, one idea is to write clicks the event, needs what to create what! This first to think about what you need to click events, are satisfied to write a perfect click event! Animation effect first need animation, also need to be able to add animation Layer, first write a way to get animation!

-(Caanimationgroup *) Createflashanimationwisthscale: (cgfloat) scale duration: (cgfloat) Duratiton {# Create a scaled up animation//Specify the key path to be used to render animation performance is the way the graphics are converted here you can also use the shrinkage ratio. scale because our initial value setting is based on Catransform3d cabasicanimation *scalean
Nimation = [cabasicanimation animationwithkeypath:@ "Transform.scale"];
  Animation start point//This animation effect initial value is itself the original position scaleannimation.fromvalue = [Nsvalue valuewithcatransform3d:catransform3didentity];
Equivalent scaleannimation.fromvalue = [Nsvalue valuewithcatransform3d:catransform3dmakescale (1, 1, 1)]; Animation end point//ratio of changes in x-axis and y-axis scaleannimation.tovalue = [Nsvalue valuewithcatransform3d: (Catransform3dmakescale (scale, S

Cale, 1)];
  # Create a Transparency transform animation cabasicanimation *alphaanimation = [cabasicanimation animationwithkeypath:@ ' opacity '];
  Alphaanimation.fromvalue = @1;

Alphaanimation.tovalue = @0;
  # Create an animation group add the above two animations caanimationgroup *animation = [Caanimationgroup new];
Animation.animations = @[scaleannimation,alphaanimation]; Animation effects (rhythm, Timing function is used to compute the interpolation between the starting point and the end point of the change. Image point that is timing function determines the animation of the Rhythm (pacing), such as the uniform change (same time changes in the same amount), first fast after the slow, first slow, fast or slow, then faster and slower.

Animation.timingfunction = [Camediatimingfunction functionwithname:kcamediatimingfunctioneaseineaseout];
# Return to the animation effect we want the group returns animation;

 }

Step 6th: Get a layer of cashapelayer type (because you want to combine Bezier curves to get the shape path), draw a shape so you need to have a location

-(Cashapelayer *) Creatcircleshapwithpostion: (cgpoint) position pathrect: (cgrect) rect

Radius: (cgfloat) Radius {cashapelayer *circleshap = [Cashapelayer layer]; From a Bezier curve to the shape Circleshap.path = [Uibezierpath bezierpathwithroundedrect:frame Cornerradius:radius].

Cgpath;
  Although the shape, but did not get a specific frame (bounds) that is actually no scope just can show the effect of animation then anchor Point is actually set the location point circleshap.position = position;
   if (Self.buttontype = = Ddflashbuttoninner) {# Here to set the frame is to meet the anchor point we want to let the animation effect move up, the following is the same, you can not set the test effect on the understanding!
   Circleshap.bounds = CGRectMake (0, 0, radius *2, radius *2);
    Circleshap.frame = CGRectMake (Position.x-radius, Position.y-radius, radius*2, radius*2);
    Line width circleshap.linewidth = 1; The color of the fill is not set by default to yellow Circleshap.fillcolor = Self.flashcolor? Self.flashcolor.cgcolor:[uicolor Yellowcolor].

  Cgcolor;
   }else {circleshap.frame = self.bounds;
    Line width circleshap.linewidth = 5; Circleshap.fillcolor = [Uicolor Clearcolor].
  Cgcolor; //Edge Line Color does not set the default to a purple Circleshap.strokecolor = Self.flashcolor? Self.flashcolor.cgcolor:[uicolor Purplecolor].

  Cgcolor;
  //opacity to be set to transparent otherwise the interior style will be drawn when the pattern point circleshap.opacity = 0;
return circleshap;

 }

Step 7th: Click the event to complete the OK

-(void) Didtap: (UITapGestureRecognizer *) tapgesture {//Get the location of the click Point cgpoint taplocation = [Tapgesture locationinview:self
];
Define a layer below the situation to give different shapes cashapelayer *circleshape = nil;
Default one change ratio 1 time times cgfloat scale = 1.0f;
   Gets the View's width and height cgfloat width = self.bounds.size.width, height = self.bounds.size.height; if (Self.buttontype = = Ddflashbuttoninner) {# Here is the effect within the view, that is, to draw a small circle with the point of the click (here is a radius of 1) and then animate it (which is constantly becoming larger and transparent) so the magnification can be as large as possible
    Change on the line does not necessarily have to write like this, you happy is good! CGFloat Biggeredge = width > height? 
    Width:height;
CGFloat radius = 1 scale = Biggeredge/radius + 0.5; # call method to get the layer anchor position is the location of the click CircleShape = [Self Creatcircleshapwithpostion:cgpointmake (taplocation.x, TAPLOCATION.Y)   
  Pathrect:cgrectmake (0, 0, RADIUS * 2, RADIUS * 2) Radius:radius]; }else {# This is an external animation effect setting can be magnified 5.5 times times scale = 5.5f; # anchor position in the center of view this layer and view are the same shape range circleshape = [self creatcircles
 Hapwithpostion:cgpointmake (WIDTH/2, HEIGHT/2) pathRect:self.bounds Radius:self.layer.cornerRadius];  Add a custom layer with a shape on the//view layer [Self.layer addsublayer:circleshape];
# Add animations to custom layers [CircleShape addanimation:[self createflashanimationwisthscale:scale duration:1.0f] forKey:nil];

 }

Finally say: When used in Viewcontroller, create a custom View instance object, change the incoming style and color can show the effect!

iOS Basics-Animation Effect Summary--(calayer-powder bones are not afraid, to stay clean in the world!< Small Fist stone > Animation of the Mind Map basics: The way iOS can be animated: (as pictured above) UIView Foundation Realization Way one UIView basic realization way two coreanimation implementation way animation effect brief: Communicates the state enhances the user to the direct operation the perception helps the user to visualize the result of the operation UIView the basic animation: Uikit directly inherits the animation into the UIView class, and when some of the internal properties change, UIView provides animated support for these changes. The work of performing the animation is done automatically by the UIView class, but it is hoped that the ...

Original link: Http://www.jianshu.com/p/c187c7005ce1
Copyright belongs to the author, reproduced please contact the author to obtain authorization, and labeled "Jane book author."