UIView animateWithDuration不会对cornerRadius变体进行动画处理

时间:2011-05-10 09:44:47

标签: uiview uiviewanimation cornerradius

我正在尝试设置cornerRadius实例UIView layer的更改动画,但cornerRadius的变体会立即发生。

以下是代码:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 100, 100)];
view.layer.masksToBounds = YES;
view.layer.cornerRadius = 10.0;
[UIView animateWithDuration:1.0 animations:^{

    [view.layer.cornerRadius = 0.0;

}];

感谢所有想要给我提示的人。

修改

我设法使用Core Animation使用CABasicAnimation设置此属性的动画。

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.fromValue = [NSNumber numberWithFloat:10.0f];
animation.toValue = [NSNumber numberWithFloat:0.0f];
animation.duration = 1.0;
[viewToAnimate.layer addAnimation:animation forKey:@"cornerRadius"];
[animation.layer setCornerRadius:0.0];

8 个答案:

答案 0 :(得分:86)

tl; dr:角落半径在animateWithDuration:animations:中无法设置动画。


文档中有关视图动画的内容。

正如“查看iOS编程指南”中的section on Animations所说

  

UIKit和Core Animation都支持动画,但每项技术提供的支持程度各不相同。在UIKit中,使用UIView对象

执行动画

完整的属性列表,您可以使用较旧的

进行动画处理
[UIView beginAnimations:context:];
[UIView setAnimationDuration:];
// Change properties here...
[UIView commitAnimations];

或更新的

[UIView animateWithDuration:animations:];

(您正在使用)是:

  • 边界
  • 中心
  • 转换(CGAffineTransform,而不是CATransform3D)
  • alpha
  • 的backgroundColor
  • contentStretch

如您所见,cornerRadius不在列表中。

有些困惑

UIView动画实际上仅用于为视图属性设置动画。令人困惑的是,您还可以在UIView动画块内的图层上设置相同属性的动画,即框架,边界,位置,不透明度,backgroundColor。因此,人们会在animateWithDuration中看到图层动画,并相信他们可以为其中的任何视图属性设置动画。

同一节继续说:

  

在您想要执行更复杂的动画或UIView类不支持的动画的地方,您可以使用Core Animation和视图的底层来创建动画。由于视图和图层对象错综复杂地链接在一起,因此对视图图层的更改会影响视图本身。

您可以在几行内阅读Core Animation动画属性列表,其中您会看到以下内容:

  
      
  • 图层的边框(包括图层的边角是否圆角)
  •   

因此,如您在更新的问题(和答案)中已经说过的那样,为您需要 cornerRadius动画使用核心动画。我刚补充试图解释为什么会这样。


一些额外的澄清

当人们阅读说明animateWithDuration是推荐的动画制作方式的文档时,很容易相信它正在尝试替换CABasicAnimation,CAAnimationGroup,CAKeyframeAnimation等,但实际上并非如此。它取代了您在上面看到的beginAnimations:context:commitAnimations

答案 1 :(得分:25)

我使用此扩展来设置角半径的变化:

extension UIView
{
    func addCornerRadiusAnimation(from: CGFloat, to: CGFloat, duration: CFTimeInterval)
    {
        let animation = CABasicAnimation(keyPath:"cornerRadius")
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
        animation.fromValue = from
        animation.toValue = to
        animation.duration = duration
        layer.add(animation, forKey: "cornerRadius")
        layer.cornerRadius = to
    }
}

答案 2 :(得分:15)

角半径变化可以设置动画,但唯一的方法是使用CABasicAnimation。希望这有助于那里的人。

答案 3 :(得分:13)

您可以在此处实现UIView动画:http://maniacdev.com/2013/02/ios-uiview-category-allowing-you-to-set-up-customizable-animation-properties

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
animation.duration = DURATION;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
animation.toValue = @(NEW_CORNER_RADIUS);
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
[view.layer addAnimation:animation forKey:@"setCornerRadius:"];

答案 4 :(得分:6)

iOS 10开始,您实际上可以为cornerRadius设置动画:

UIViewPropertyAnimator(duration: 3.0, curve: .easeIn) {
    square.layer.cornerRadius = 20
}.startAnimation()

答案 5 :(得分:1)

答案 6 :(得分:1)

您可以通过在视图类中实现+[UIView animateWithDuration:],在-[actionForLayer:forKey]中设置此属性的动画。有关如何使用的示例,请参阅this question

答案 7 :(得分:0)

CornerRadius属性可以设置动画

工作代码在以下

// layer init

let imageLayer = CALayer() 
imageLayer.frame = CGRect(x: 0, y: 0.0, width: tenPercent, height: tenPercent)
imageLayer.contents = imageNew.cgImage
imageLayer.masksToBounds = true

//动画初始化

let animationCornerRadius = CABasicAnimation(keyPath: "cornerRadius")
animationCornerRadius.beginTime =  0.01
animationCornerRadius.duration = CFTimeInterval(5)
animationCornerRadius.fromValue = 1
animationCornerRadius.toValue = tenPercent / 2
animationCornerRadius.fillMode = .forwards
animationCornerRadius.isRemovedOnCompletion = false
imageLayer.add(animationCornerRadius , forKey: "cornerRadius")