Превратите прямоугольный UIImageView в круг

Мой ViewController имеет UIImageView (назовем его img) в качестве атрибута, и вначале он показывает img в полноэкранном режиме, то есть его размер представляет собой прямоугольник, аналогичный границам ViewController.

Я хотел бы сделать анимацию с помощью img, превратив его в маленький круг (а не просто прямоугольник с круглыми углами), а затем переместить его в какой-то угол ViewController.

Как я могу этого добиться? Я предпочитаю не отправлять какой-либо код, потому что я почти уверен, что сделал это неправильно (я попытался превратить его в квадрат, а затем установить угловой радиус (с радиусом ширины / 2), затем одновременно сделать масштаб и перевести положение, но его беспорядок и работает неправильно, так что давайте забудем об этом)


ios uiimageview cornerradius
person Daniel    schedule 14.09.2016    source источник
comment
возьмите imageView с одинаковой высотой и шириной и установите его свойство слоя: imageView.layer.masksToBounds = true imageView.layer.cornerRadius = img.frame.size.height / 2   -  person Kirit Modi    schedule 14.09.2016

Ответы (3)


arrow_upward
1
arrow_downward

Ваше решение звучит хорошо для меня, но что может пойти не так, так это тот факт, что анимация углового радиуса не поддерживается UIView.animateWithDuration, как показано в Просмотр руководства по программированию для 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
}
person Carien van Zyl    schedule 14.09.2016
comment
омг, я не знаю, должен ли я был сказать это здесь, но я люблю тебя - person Daniel; 14.09.2016
comment
@Daniel рад, что смог помочь - person Carien van Zyl; 16.09.2016

arrow_upward
0
arrow_downward

// попробуй так, надеюсь у тебя получится.

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

}
person Andey Satyanarayana    schedule 14.09.2016

arrow_upward
0
arrow_downward

вариант 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;
person amit gupta    schedule 14.09.2016