将矩形 UIImageView 变成圆形

Posted 2023-02-24

【中文标题】将矩形 UIImageView 变成圆形

【英文标题】：Turn rectangular UIImageView into a circle

【发布时间】：2016-09-14 05:23:46

【问题描述】：

我的 ViewController 有一个 UIImageView（我们把它命名为 img）作为属性，一开始它全屏显示 img，也就是说，它的大小是一个类似于 ViewController 边界的矩形。

我想用 img 做一个动画，让它变成一个小圆圈（不仅仅是一个带圆角的矩形），然后将它移动到 ViewController 的某个角落。

我怎样才能做到这一点？我不想发送任何代码因为我很确定我做错了（我试图把它变成一个正方形，然后设置一个cornerRadius（半径宽度/ 2），然后立即进行缩放和平移位置，但是它乱七八糟，工作不正常，所以让我们忘记它）

【问题讨论】：

获取具有相同高度和宽度的imageView，并设置其图层属性：imageView.layer.masksToBounds = true imageView.layer.cornerRadius = img.frame.size.height / 2

【参考方案1】：

您的解决方案对我来说听起来不错，但可能出了问题的是 UIView.animateWithDuration 不支持动画圆角半径这一事实，如View Programming Guide for ios 所示。因此，结果有时不是预期的。

你可以试试下面的代码。

func animate() 

    //Some properties that needs to be set on UIImageView
    self.imageView.clipsToBounds = true
    self.imageView.contentMode = .ScaleAspectFill

    //Create animations
    let cornerRadiusAnim = changeCornerRadiusAnimation()
    let squareAnim = makeSquareAnimation()
    let boundsAnim = changeBoundsAnimation()
    let positionAnim = changePositionAnimation(CGPointMake(300,480))

    //Use group for sequenced execution of animations
    let animationGroup = CAAnimationGroup()
    animationGroup.animations = [cornerRadiusAnim, squareAnim, boundsAnim, positionAnim]
    animationGroup.fillMode = kCAFillModeForwards
    animationGroup.removedOnCompletion = false
    animationGroup.duration = positionAnim.beginTime + positionAnim.duration
    imageView.layer.addAnimation(animationGroup, forKey: nil)



func makeSquareAnimation() -> CABasicAnimation 

    let center = imageView.center
    let animation = CABasicAnimation(keyPath:"bounds")
    animation.duration = 0.1;
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    animation.fromValue = NSValue(CGRect: imageView.frame)
    animation.toValue = NSValue(CGRect: CGRectMake(center.x,center.y,imageView.frame.width,imageView.frame.width))
    animation.fillMode = kCAFillModeForwards
    animation.removedOnCompletion = false
    return animation



func changeBoundsAnimation() -> CABasicAnimation 

    let animation = CABasicAnimation(keyPath:"transform.scale")
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    animation.fromValue = imageView.layer.mask?.valueForKeyPath("transform.scale")
    animation.toValue = 0.1
    animation.duration = 0.5
    animation.beginTime = 0.1
    animation.fillMode = kCAFillModeForwards
    animation.removedOnCompletion = false
    return animation



func changeCornerRadiusAnimation() -> CABasicAnimation 

    let animation = CABasicAnimation(keyPath:"cornerRadius")
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    animation.fromValue = 0
    animation.toValue = imageView.frame.size.width * 0.5
    animation.duration = 0.1
    animation.fillMode = kCAFillModeForwards
    animation.removedOnCompletion = false
    return animation



func changePositionAnimation(newPosition: CGPoint) -> CABasicAnimation 

    let animation = CABasicAnimation(keyPath: "position")
    animation.fromValue =  NSValue(CGPoint: imageView.layer.position)
    animation.toValue = NSValue(CGPoint: newPosition)
    animation.duration = 0.3
    animation.beginTime = 0.6
    animation.fillMode = kCAFillModeForwards
    animation.removedOnCompletion = false
    return animation

【讨论】：

天哪，我不知道我是否应该在这里说，但我爱你

@Daniel 很高兴我能帮上忙

【参考方案2】：

// 试试这个，希望对你有用。

UIView.animateWithDuration(3, delay: 0.0, options: UIViewAnimationOptions.CurveEaseIn, animations:  () -> Void in

      img.layer.masksToBounds = true
       img.layer.cornerRadius = img.frame.size.height / 2 // here img must be in square shape (height == width) 

        )  (finished : Bool) -> Void in

【参考方案3】：

选项 1 从代码中调用下面的方法

// UIimageView Circle
class func roundImageView(imageView:UIImageView)
    imageView.layer.borderWidth = 1.0
    imageView.layer.masksToBounds = false
    //imageView.layer.borderColor = UIColor.whiteColor().CGColor
    imageView.layer.cornerRadius = imageView.frame.size.width/2
    imageView.clipsToBounds = true

选项 2 从情节提要中制作用户定义的运行时属性

view.layer.cornerRadius = 5.0f;
view.layer.masksToBounds = NO;