swiftとUIViewAnimationを使用して徐々に図形を塗りつぶしますか？

Question

ボタンを含むiOS 10アプリ（「Press Me！」）と、塗りつぶされていない青い輪郭の四角形を含むUIViewがあります。可能な方法（私はUIView.animation(withDuration:, animations:)を使って試してみました）を使って、赤で矩形を徐々に（5秒のように）塗りつぶしたいと思います。

ここでのViewControllerです：

class ViewController: UIViewController { 

@IBOutlet weak var tronkyy: tronc! 

override func viewDidLoad() { 
    super.viewDidLoad() 

} 

@IBAction func didPress(_ sender: UIButton) { 
    tronkyy.full = true 
    tronkyy.setNeedsDisplay() 
} } 

とビュー：私は以下のコードが含まれます

@IBDesignable class tronc: UIView { 

//var value = 0.0 
var full = false 

override func draw(_ rect: CGRect) { 
    UIColor.blue.setStroke() 
    boxPath().stroke() 
    drawDynamic() 
} 

private func boxPath() -> UIBezierPath { 
    let path = UIBezierPath(rect: CGRect(x: 0.1 * frame.width, y: 0.1 * frame.height, width: 0.8 * frame.width, height: 0.8 * frame.height)) 
    UIColor.blue.setStroke() 
    return path 
} 

func drawDynamic() { 
    if full { 
     UIView.animate(withDuration: 10) { _ in 
      //while self.value < 1 { 
       let path = UIBezierPath(rect: CGRect(x: 0.1 * self.frame.width, y: 0.1 * self.frame.height, width: (0.8 * self.frame.width), height: 0.8 * self.frame.height)) //* CGFloat(value))) 
       UIColor.red.setFill() 
       path.fill() 

       //self.value += 0.1 
      //} 
     } 
     full = false 
    } 
} } 

ああ、はい、赤いビューは長方形をカバーすることを無視してください。 問題は、段階的な充填がないことです。それはただ一回、そしてすべてを満たすだけです。

編集：回答に示唆されているように、「値」プロパティとwhileループをコメントアウトしましたが、それでも機能しません。

Answer 1

これは、サブビュー付きのビューを使用するアプローチです。長方形よりも複雑な形状の場合は、マスクを使って行うことができます。

あなたは遊び場のページでこれを直接実行することができます。

import UIKit 
import PlaygroundSupport 

class TestViewController : UIViewController { 

    let btn: UIButton = { 
     let b = UIButton() 
     b.setTitle("Tap Me", for: .normal) 
     b.backgroundColor = .blue 
     b.frame = CGRect(x: 20, y: 20, width: 200, height: 30) 
     return b 
    }() 

    let blueRect: UIView = { 
     let v = UIView() 
     v.layer.borderColor = UIColor.blue.cgColor 
     v.layer.borderWidth = 2.0 
     v.backgroundColor = .clear 
     v.translatesAutoresizingMaskIntoConstraints = false 
     return v 
    }() 

    let redRect: UIView = { 
     let v = UIView() 
     v.backgroundColor = .red 
     v.translatesAutoresizingMaskIntoConstraints = false 
     return v 
    }() 

    var redRectHeightConstraint: NSLayoutConstraint? 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     self.view.addSubview(btn) 

     btn.addTarget(self, action: #selector(didTap(_:)), for: .touchUpInside) 


     blueRect.addSubview(redRect) 
     self.view.addSubview(blueRect) 

     redRect.leftAnchor.constraint(equalTo: blueRect.leftAnchor, constant: 0.0).isActive = true 
     redRect.rightAnchor.constraint(equalTo: blueRect.rightAnchor, constant: 0.0).isActive = true 
     redRect.bottomAnchor.constraint(equalTo: blueRect.bottomAnchor, constant: 0.0).isActive = true 

     redRectHeightConstraint = NSLayoutConstraint(item: redRect, 
                attribute: .height, 
                relatedBy: .equal, 
                toItem: nil, 
                attribute: .notAnAttribute, 
                multiplier: 1.0, 
                constant: 0.0) 

     redRect.addConstraint(redRectHeightConstraint!) 

     blueRect.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.5).isActive = true 
     blueRect.heightAnchor.constraint(equalTo: self.view.heightAnchor, multiplier: 0.5).isActive = true 
     blueRect.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true 
     blueRect.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true 

    } 

    func didTap(_ sender: Any?) -> Void { 
     UIView.animate(withDuration: 5.0, animations: { 
      _ in 
      self.redRectHeightConstraint!.constant = self.blueRect.frame.size.height 
      self.view.setNeedsLayout() 
     }, completion: { 
      finished in 
     }) 

    } 

} 


let vc = TestViewController() 
vc.view.backgroundColor = .yellow 
vc.view.frame = CGRect(x: 0, y: 0, width: 600, height: 600) 

PlaygroundPage.current.liveView = vc 

を注：これはただのサンプル、デモコード...コピー/ペーストソリューションを意味するものではありません。

Answer 2

アニメーション機能ではwhileループを使用しないでください。このバージョンを試す

UIView.animate(withDuration: 10) { _ in 
    let path = UIBezierPath(rect: CGRect(x: 0.1 * self.frame.width, y: 0.1 * self.frame.height, width: (0.8 * self.frame.width), height: 0.8 * self.frame.height)) 
    UIColor.red.setFill() 
    path.fill() 
}