[英]How to change the rectangle shape to a circle shape with animation
I have a label: 我有一个标签:
self.logInLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 100)];
self.logInLabel.backgroundColor = [UIColor clearColor];
self.logInLabel.backgroundColor = Color_Circle_Outer;
self.logInLabel.textColor = Color_Circle_Outer;
self.logInLabel.textAlignment = NSTextAlignmentCenter;
self.logInLabel.lineBreakMode = NSLineBreakByWordWrapping;
self.logInLabel.numberOfLines = 1;
self.logInLabel.font = [UIFont boldSystemFontOfSize:12*IPAD];
self.logInLabel.text = @"Log In";
[self addSubview:self.logInLabel];
self.logInLabel.layer.cornerRadius = self.frame.size.height/2.0;
self.logInLabel.layer.borderColor = Color_Circle_Outer.CGColor;
self.logInLabel.layer.borderWidth = 2*IPAD;
self.logInLabel.layer.masksToBounds = YES;
I want to change this shape to a Circle. 我想将此形状更改为圆形。 I have tried:
我努力了:
[UIView animateWithDuration:AnimationTime animations:^{
self.logInLabel.layer.bounds = CGRectMake(0, 0, self.frame.size.height, self.frame.size.height);
}];
But the shape changed immediately without animation, then the position change to center with animation. 但是在没有动画的情况下形状会立即更改,然后在有动画的情况下位置会更改为中心。 Then I tried with this:
然后我尝试了这个:
[UIView animateWithDuration:AnimationTime animations:^{
self.logInLabel.bounds = CGRectMake(0, 0, self.logInLabel.frame.size.height, self.logInLabel.frame.size.height);
}];
I have very ugly animation effect. 我的动画效果非常难看。
I do not care if this view is a label, I just want to implement changing a rectangle shape to a circle shape with an animation. 我不在乎此视图是否为标签,我只想实现通过动画将矩形形状更改为圆形形状。
Thank you. 谢谢。
It works only CABasicAnimation not the UIView animateWithDuration 它仅适用于CABasicAnimation,而不适用于UIView animateWithDuration
UIView *logInLabel = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
logInLabel.backgroundColor = [UIColor blackColor];
logInLabel.layer.masksToBounds = YES;
[self.view addSubview:logInLabel];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.fromValue = [NSNumber numberWithFloat:0.0f];
animation.toValue = [NSNumber numberWithFloat:100.0f];
animation.duration = 5.0;
[logInLabel.layer addAnimation:animation forKey:@"cornerRadius"];
[logInLabel.layer setCornerRadius:0.0];
From your code remove the line : 从代码中删除以下行:
self.logInLabel.layer.cornerRadius = self.logInLabel.frame.size.height / 2.0;
and put it in an animation block like this 并放在这样的动画块中
You can set cornerRadius
of your UILabel
to get a circular view. 您可以设置
UILabel
cornerRadius
以获取圆形视图。
[UIView animateWithDuration:AnimationTime animations:^{
self.logInLabel.layer.cornerRadius = self.logInLabel.frame.size.height / 2.0f;
}];
However, the animation will not look very good and the final frame will not be an exact circle because the height
and width
of your UILabel
are not in 1:1 proportion. 但是,由于
UILabel
的height
和width
不是1:1的比例,因此动画看起来不会很好,最终的帧也不是精确的圆形。
If you still don't get the animation try to check the value of AnimationTime
variable. 如果仍然无法获得动画,请尝试检查
AnimationTime
变量的值。
Look that might help you 看起来可能对您有帮助
[UIView animateWithDuration:0.4 animations:^{
CGPoint center = self.logInLabel.center;
self.logInLabel.layer.cornerRadius = self.logInLabel.frame.size.height/2;
self.logInLabel.frame = CGRectMake(0, 0, self.logInLabel.frame.size.height, self.logInLabel.frame.size.height);
self.logInLabel.center = center;
}];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.