CALayer animation-use CAShapeLayer to create a button animation similar to a WeChat video,

CALayer animation-use CAShapeLayer to create a button animation similar to a small video,

Let alone code. Shows the project. Because the program is encapsulated, you only need to give the frame mview frame in the master controller. The radius of the display image is equal to half the width of the given frame.

For example: CustomView * customView = [[CustomView alloc] initWithFrame: CGRectMake (0, 0,100,100)]; that is, the position is (0, 0) create a view with a radius of 100/2 = 50.

Figure 1 Project

1 Code implemented in the CustomView. m file

@ Implementation CustomView

-(Instancetype) initWithFrame :( CGRect) frame {

Self = [super initWithFrame: frame];

If (self ){

// Reset the view size to the square area with width as the side length.

Self. frame = CGRectMake (frame. origin. x

, Frame. origin. y, frame. size. width, frame. size. width );

Self. layer. cornerRadius = self. frame. size. width/2;

Self. layer. masksToBounds = YES;

// Initial Angle

Angle = 0;

// Add button

_ Button = [UIButton buttonWithType: UIButtonTypeSystem];

_ Button. frame = CGRectMake (0, 0, self. frame. size. width, frame. size. width );

_ Button. backgroundColor = [UIColor greenColor];

[Self addSubview: _ button];

// Add the lable of the displayed text

_ Lable = [[UILabel alloc] initWithFrame: _ button. frame];

// Text Center

_ Lable. textAlignment = NSTextAlignmentCenter;

_ Lable. numberOfLines = 0;

_ Lable. lineBreakMode = NSLineBreakByWordWrapping;

_ Lable. text = @ "Click and hold ";

 

[Self addSubview: _ lable];

// Add the method for executing different events with buttons

[_ Button addTarget: self action: @ selector (cameraButtonTouchDown :) forControlEvents: UIControlEventTouchDown];

[_ Button addTarget: self action: @ selector (cameraButtonClicked :) forControlEvents: UIControlEventTouchUpInside];

// Drawing

[Self initLayout];

// Timer settings

_ Timer = [NSTimer scheduledTimerWithTimeInterval: 0.1 target: self selector: @ selector (isButtonClicked) userInfo: nil repeats: YES];

// Pause the timer

[_ Timer setFireDate: [NSDate distantFuture];

}

Return self;

}

 

-(Void) initLayout {

_ ShapeLayer = [CAShapeLayer layer];

_ ShapeLayer. strokeColor = [UIColor redColor]. CGColor;

_ ShapeLayer. fillColor = [UIColor clearColor]. CGColor;

_ ShapeLayer. frame = _ button. frame;

_ ShapeLayer. lineWidth = 5.0f;

[Self. layer addSublayer: _ shapeLayer];

_ BPath = [[UIBezierPath alloc] init];

// Draw an arc

[_ BPath addArcWithCenter: _ button. center radius: _ button. frame. size. width/2 startAngle: 0 endAngle: angle * M_PI/180 clockwise: YES];

_ ShapeLayer. path = _ bPath. CGPath;

}

# The pragma mark button is touched and pressed to execute the program in the method immediately

-(Void) cameraButtonTouchDown :( UIButton *) sender {

[_ Timer setFireDate: [NSDate distantPast];

IsClicked = YES;

}

# How to execute pragma mark after pressing the button: isClicked = NO takes effect only after the button is popped up.

-(Void) cameraButtonClicked :( UIButton *) sender {

IsClicked = NO;

}

# Pragma mark timer method re-painting angle, etc.

-(Void) isButtonClicked {

[_ ShapeLayer removeFromSuperlayer];

[_ BPath removeAllPoints];

If (isClicked ){

If (angle <360 ){

Angle = angle + 5;

// Redraw

[Self initLayout];

_ Lable. text = [NSString stringWithFormat: @ "loaded % ld", angle * 100/360];

} Else {

// Disable the timer

[_ Timer setFireDate: [NSDate distantFuture];

UIAlertView * alertView = [[UIAlertView alloc] initWithTitle: @ "Shooting completed" message: nil delegate: self cancelButtonTitle: @ "cancel" otherButtonTitles: @ "OK", nil];

[AlertView show];

// Return to the initial state

Angle = 0;

_ Lable. text = @ "Click and hold ";

[Self initLayout];

}

} Else {

// Disable the timer

[_ Timer setFireDate: [NSDate distantFuture];

// Return to the initial state

Angle = 0;

_ Lable. text = @ "Click and hold ";

[Self initLayout];

}

}

@ End

2 Code implemented in the ViewController. m file

# Import "ViewController. h"

# Import "CustomView. h"

 

@ Interface ViewController ()

 

@ End

 

@ Implementation ViewController

-(Void) viewDidLoad {

[Super viewDidLoad];

CustomView * customView = [[CustomView alloc] initWithFrame: CGRectMake (0, 0,100,100)];

CustomView. center = self. view. center;

[Self. view addSubview: customView];

}

-(Void) didReceiveMemoryWarning {

[Super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@ End

3. simulator running result