优酷播放按钮动画

来源：互联网发布：gpu编程语言编辑：程序博客网时间：2024/04/27 22:10

这里只是粗略的实现以下效果主要看实现的方法。。

上传的GIF动画速度变快了实际比这要效果好很多

@property (nonatomic,strong)UIButton *playButton;

@property (nonatomic,assign)BOOL play;

@property (nonatomic,strong)CAShapeLayer *line1; 第一条弧线

@property (nonatomic,strong)UIBezierPath *line1Path;

@property (nonatomic,strong)CAShapeLayer *line2;第二条弧线

@property (nonatomic,strong)UIBezierPath *line2Path;

@property (nonatomic,strong)CAShapeLayer *line3;第一条竖杠

@property (nonatomic,strong)UIBezierPath *line3Path;

@property (nonatomic,strong)CAShapeLayer *line4;第二条竖杠

@property (nonatomic,strong)UIBezierPath *line4Path;

@property (nonatomic,strong)CAShapeLayer *line5; 尖角上一半

@property (nonatomic,strong)UIBezierPath *line5Path;

@property (nonatomic,strong)CAShapeLayer *line6; 尖角下一半

@property (nonatomic,strong)UIBezierPath *line6Path;

创建控件添加 layer

self.play =NO;

self.playButton = [UIButtonbuttonWithType:UIButtonTypeSystem];

[self.viewaddSubview:self.playButton];

self.playButton.backgroundColor = [UIColorwhiteColor];

self.playButton.frame =CGRectMake(100,100, 200,200);

self.playButton.layer.cornerRadius = 100;

self.playButton.layer.masksToBounds = YES;

[self.playButtonaddTarget:selfaction:@selector(playAction)forControlEvents:UIControlEventTouchUpInside];

self.line1 = [CAShapeLayerlayer];

self.line1.fillColor = [UIColorclearColor].CGColor;

self.line1.strokeColor = [UIColorcolorWithRed:0.03green:0.13blue:0.96alpha:0.60].CGColor;

self.line1.lineCap = kCALineCapRound;

self.line1.lineWidth =20;

self.line1Path = [UIBezierPathbezierPathWithArcCenter:CGPointMake(100,100) radius:80startAngle:M_PI_4endAngle:M_PI+M_PI_4clockwise:NO];

self.line1.path = self.line1Path.CGPath;

[self.playButton.layeraddSublayer:self.line1];

self.line1.strokeEnd =1;

self.line2 = [CAShapeLayerlayer];

self.line2.fillColor = [UIColorclearColor].CGColor;

self.line2.strokeColor = [UIColorcolorWithRed:0.03green:0.13blue:0.96alpha:0.60].CGColor;

self.line2.lineCap = kCALineCapRound;

self.line2.lineWidth =20;

self.line2Path = [UIBezierPathbezierPathWithArcCenter:CGPointMake(100,100) radius:80startAngle:M_PI+M_PI_4endAngle:M_PI_4clockwise:NO];

self.line2.path = self.line2Path.CGPath;

[self.playButton.layeraddSublayer:self.line2];

self.line2.strokeEnd =1;

self.line3 = [CAShapeLayerlayer];

self.line3.fillColor = [UIColorclearColor].CGColor;

self.line3.strokeColor = [UIColorcolorWithRed:0.03green:0.13blue:0.96alpha:1.00].CGColor;

self.line3.lineCap = kCALineCapRound;

self.line3.lineWidth =20;

self.line3Path = [[UIBezierPathalloc] init];

[self.line3PathmoveToPoint:CGPointMake(43,43.0)];

[self.line3PathaddLineToPoint:CGPointMake(157,43)];

self.line3.path = self.line3Path.CGPath;

[self.playButton.layeraddSublayer:self.line3];

self.line3.strokeEnd =0;

self.line4 = [CAShapeLayerlayer];

self.line4.fillColor = [UIColorclearColor].CGColor;

self.line4.strokeColor = [UIColorcolorWithRed:0.03green:0.13blue:0.96alpha:1.00].CGColor;

self.line4.lineCap = kCALineCapRound;

self.line4.lineWidth =20;

self.line4Path = [[UIBezierPathalloc] init];

[self.line4PathmoveToPoint:CGPointMake(157,157)];

[self.line4PathaddLineToPoint:CGPointMake(43,157)];

self.line4.path = self.line4Path.CGPath;

[self.playButton.layeraddSublayer:self.line4];

self.line4.strokeEnd =0;

///

self.line5 = [CAShapeLayerlayer];

self.line5.fillColor = [UIColorclearColor].CGColor;

self.line5.strokeColor = [UIColorcolorWithRed:0.93green:0.11blue:0.16alpha:0.60].CGColor;

self.line5.lineCap = kCALineCapRound;

self.line5.lineWidth =20;

self.line5Path = [[UIBezierPathalloc] init];

[self.line5PathmoveToPoint:CGPointMake(80,60)];

[self.line5PathaddLineToPoint:CGPointMake(130,100)];

self.line5.path = self.line5Path.CGPath;

[self.playButton.layeraddSublayer:self.line5];

self.line5.strokeEnd =1;

///

self.line6 = [CAShapeLayerlayer];

self.line6.fillColor = [UIColorclearColor].CGColor;

self.line6.strokeColor = [UIColorcolorWithRed:0.93green:0.11blue:0.16alpha:0.60].CGColor;

self.line6.lineCap = kCALineCapRound;

self.line6.lineWidth =20;

self.line6Path = [[UIBezierPathalloc] init];

[self.line6PathmoveToPoint:CGPointMake(80,140)];

[self.line6PathaddLineToPoint:CGPointMake(130,100)];

self.line6.path = self.line6Path.CGPath;

[self.playButton.layeraddSublayer:self.line6];

self.line6.strokeEnd =1;

点击实现动画

- (void)playAction{

CABasicAnimation *strokeEndAnimation = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];

strokeEndAnimation.fillMode =kCAFillModeForwards;

strokeEndAnimation.removedOnCompletion =NO;

strokeEndAnimation.duration =0.35;

///

CABasicAnimation *strokeEndAnimation2 = [CABasicAnimationanimationWithKeyPath:@"strokeEnd"];

strokeEndAnimation2.fillMode =kCAFillModeForwards;

strokeEndAnimation2.removedOnCompletion =NO;

strokeEndAnimation2.duration =0.1;

if (self.play ==NO) {

strokeEndAnimation.fromValue =@(1);

strokeEndAnimation.toValue =@(0);

strokeEndAnimation2.fromValue =@(0);

strokeEndAnimation2.toValue =@(1);

[UIViewanimateWithDuration:0.35animations:^{

self.playButton.transform =CGAffineTransformRotate(self.playButton.transform,M_PI_2);

}];

[UIViewanimateWithDuration:0.15animations:^{

}completion:^(BOOL finished) {

[self.line3addAnimation:strokeEndAnimation2forKey:nil];

[self.line4addAnimation:strokeEndAnimation2forKey:nil];

}];

self.line5.hidden =YES;

self.line6.hidden =YES;

}else{

strokeEndAnimation.fromValue =@(0);

strokeEndAnimation.toValue =@(1);

strokeEndAnimation2.fromValue =@(1);

strokeEndAnimation2.toValue =@(0);

[self.line3addAnimation:strokeEndAnimation2forKey:nil];

[self.line4addAnimation:strokeEndAnimation2forKey:nil];

[UIViewanimateWithDuration:0.35animations:^{

self.playButton.transform =CGAffineTransformRotate(self.playButton.transform, -M_PI_2);

}];

[UIViewanimateWithDuration:0.2animations:^{

}completion:^(BOOL finished) {

self.line5.hidden =NO;

self.line6.hidden =NO;

}];

}

[self.line1addAnimation:strokeEndAnimationforKey:nil];

[self.line2addAnimation:strokeEndAnimationforKey:nil];

self.play = !self.play;

}

阅读全文

0 0