将矩形UIImageView转换为圆形

时间:2016-09-14 05:23:47

标签: ios uiimageview cornerradius

我的ViewController有一个UIImageView(让它命名为img)作为属性,在开始时,它以全屏显示img,也就是说,它的大小是一个类似于ViewController边界的矩形。

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

我怎样才能做到这一点?我不喜欢发送任何代码cos我很确定我做错了方法(我试图把它变成一个正方形,然后设置一个cornerRadius(半径宽度为2),然后立刻进行缩放和平移位置,但是一团糟,错误地工作,所以让我们忘记吧)

3 个答案:

答案 0 :(得分: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
}

答案 1 :(得分:0)

//尝试这样,我希望它对你有用。

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

}

答案 2 :(得分:0)

选项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;