Ios 是否将视图设置为图像？是否向下查看整个内容视图？

你好

在过去的一周里，我一直在尝试解决如何在viewController中创建两个ProgressView的问题，但几乎没有成功。请看我所附的图表，作为我所问问题的想法

我正在创建一个带有计时器的游戏，计时器会随着每个问题的出现而消失。随着时间的推移，我希望UIProgressView能够在整个屏幕上层叠下来，从蓝色过渡到白色（请参见图中的数字1，这表示白色）

图中的数字2（青色部分）表示progressTintColor。该图应该很清晰，因为我希望定制progressView，使其向下跟踪。这是目前的主要问题之一。（我似乎只能浏览带有小的可定制进度视图的漫游，这些视图是横向移动的，而不是上下移动的）

我试图实现的最困难的部分是（图中的第3个部分），定制UIImageView，使其以相反的颜色慢慢向下排至背景（这样狗将是白色的，青色向下泛，与它后面经过的progressView一致）

这些都是我试图解决这个问题的方案，到目前为止，都没有用

我曾尝试使用progressView作为背景色，但我找不到任何其他人这样做（向下）的例子，所以我不确定这是否可能

对于这张图片，我尝试过画一个CAShape图层，但对于像我这样的新手来说，这只狗的形状太难了，无法有效地画出来。当我意识到我不能在狗后面设置一层不同的颜色来向下移动，因为屏幕也会改变颜色，我放弃了使用这个选项的所有希望

我曾尝试过为狗的图像进行UIView过渡，但是，我能找到的唯一选择是过渡CrossDissolve，它没有产生我所希望的向下效果，而是从一只白色的狗变为一只青色的狗，这是不合适的。我应该使用progressImage吗？如果是这样的话，我可以在哪里找到关于语法的帮助？我好像到处都找不到

目前，我的资产文件夹中有55幅图像，每幅图像的青色略多于上一幅，并逐渐向下移动（当它通过一系列图像设置动画时）。虽然这是可行的，但它并不是完全无缝的，看起来有点像用户在等待拨号加载图像

如果有人有任何想法或可以抽出时间来告诉我如何做，我将非常感谢。我还是一个初学者，所以细节越多越好！哦，是的，让事情变得更困难，到目前为止，我已经成功地用编程的方式做了这个应用程序，所以以这种形式给出答案会很好

---

提前谢谢

我会给你一些弗兰肯斯坦式的回答，部分是Obj-C部分是Swift。我希望有帮助

首先，可以创建用作模板的图像遮罩的贝塞尔路径：

- (UIImage *)cerateImageFromImage:(UIImage *)image
                withMaskImage:(UIImage *)mask {
CGImageRef imageRef = image.CGImage;
CGImageRef maskRef = mask.CGImage;

CGImageRef imageMask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                         CGImageGetHeight(maskRef),
                                         CGImageGetBitsPerComponent(maskRef),
                                         CGImageGetBitsPerPixel(maskRef),
                                         CGImageGetBytesPerRow(maskRef),
                                         CGImageGetDataProvider(maskRef),
                                         NULL,
                                         YES);

CGImageRef maskedReference = CGImageCreateWithMask(imageRef, imageMask);
CGImageRelease(imageMask);

UIImage *maskedImage = [UIImage imageWithCGImage:maskedReference];
CGImageRelease(maskedReference);

return maskedImage;
}

UIImage *image = [UIImage imageNamed:@"Photo.png"];
UIImage *mask = [UIImage imageNamed:@"Mask.png"];
self.imageView.image = [self cerateImageFromImage:image
                                     withMaskImage:mask];

接下来，您可以基于路径创建自定义进度视图：

func drawProgressLayer(){

   let bezierPath = UIBezierPath(roundedRect: viewProg.bounds, cornerRadius: viewCornerRadius)
   bezierPath.closePath()
   borderLayer.path = bezierPath.CGPath
   borderLayer.fillColor = UIColor.blackColor().CGColor
   borderLayer.strokeEnd = 0
   viewProg.layer.addSublayer(borderLayer)


}

//Make sure the value that you want in the function `rectProgress` that is going to define 
//the width of your progress bar must be in the range of
// 0 <--> viewProg.bounds.width - 10 , reason why to keep the layer inside the view with some border left spare.
//if you are receiving your progress values in 0.00 -- 1.00 range , just multiply your progress values to viewProg.bounds.width - 10 and send them as *incremented:* parameter in this func

func rectProgress(incremented : CGFloat){

    print(incremented)
    if incremented <= viewProg.bounds.width - 10{
        progressLayer.removeFromSuperlayer()
        let bezierPathProg = UIBezierPath(roundedRect: CGRectMake(5, 5, incremented , viewProg.bounds.height - 10) , cornerRadius: viewCornerRadius)
        bezierPathProg.closePath()
        progressLayer.path = bezierPathProg.CGPath
        progressLayer.fillColor = UIColor.whiteColor().CGColor
        borderLayer.addSublayer(progressLayer)

    }

  }

func drawProgressLayer（）{
设bezierPath=UIBezierPath（roundedRect:viewProg.bounds，cornerRadius:viewCornerRadius）
bezierPath.closePath（）
borderLayer.path=bezierPath.CGPath
borderLayer.fillColor=UIColor.blackColor（）.CGColor
borderLayer.strokeEnd=0
viewProg.layer.addSublayer（边界层）
}
//确保要定义的函数“rectProgress”中所需的值
//进度条的宽度必须在
//0 viewProg.bounds.width-10，原因是要将层保留在视图中，并留有一些边框。
//如果您收到的进度值在0.00--1.00范围内，只需将进度值乘以viewProg.bounds.width-10，并将其作为此函数中的*递增：*参数发送
func rectProgress（递增：CGFloat）{
打印（递增）
如果递增我希望你已经完成了
第1个
和
第2个
，非常完美。我已经尝试了第3个

我尝试了两个UIView。它工作得很好。我想，它会给你一些想法来实现你的

我有两张照片


借助于
定时器
，我尝试了这个
ProgressView
的示例

最初，
cyanDogView
高度应为零。一旦计时器启动，高度应增加
2px
。一旦
cyanDogView的高度应大于
BlackDogView
，则
计时器停止

编码

@IBOutlet weak var blackDogView: UIView!
@IBOutlet weak var blackDogImgVw: UIImageView!

@IBOutlet weak var cyanDogView: UIView!
@IBOutlet weak var cyanDogImgVw: UIImageView!

var getHeight : CGFloat = 0.0
var progressTime = Timer()

override func viewDidAppear(_ animated: Bool) {

    cyanDogView.frame.size.height = 0

    getHeight = blackDogView.frame.height
}

@IBAction func startAnimateButAcn(_ sender: UIButton) {

    progressTime = Timer.scheduledTimer(timeInterval: 0.2, target: self, selector: #selector(self.update), userInfo: nil, repeats: true)

}


@objc func update() {
    cyanDogView.frame.size.height = cyanDogView.frame.size.height + 2

    if cyanDogView.frame.size.height >= getHeight
    {
        progressTime.invalidate()
        cyanDogView.frame.size.height = 0
    }
}

故事板


输出

好的，使用McDonald_11的答案，我成功地使progressView工作，但是，我仍然遇到一些问题。我无法在progressView上添加任何内容，它只是覆盖了下面的所有内容，在狗开始动画制作成青色狗之前，整个青色狗图像会短暂闪烁。

代码如下

private let contentView = UIView(frame: .zero)
private let backgroundImageView = UIImageView(frame: .zero)
private let progressView = ProgressView(frame: .zero)
private let clearViewOverProgress = UIView(frame: .zero)
private let blackDogView = UIView(frame: .zero)
private let blackDogViewImage = UIImageView(frame: .zero)
private let cyanDogView = UIView(frame: .zero)
private let cyanDogViewImage = UIImageView()

var timer = Timer()
var startHeight : CGFloat = 0.0

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    self.progressView.setProgress(10.0, animated: true)
    startHeight = cyanDogViewImage.frame.height
    self.cyanDogViewImage.frame.size.height = 0
    self.timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(self.updateImage), userInfo: nil, repeats: true)
}


override func viewDidLoad() {
    super.viewDidLoad()
    setupViews()

}

func setupViews() {

self.view.addSubview(backgroundImageView)
    self.backgroundImageView.addSubview(progressView)
    self.progressView.addSubview(clearViewOverProgress)
    self.clearViewOverProgress.addSubview(blackDogView)
    self.blackDogView.addSubview(blackDogViewImage)
    self.blackDogViewImage.addSubview(cyanDogView)
    self.cyanDogView.addSubview(cyanDogViewImage)

//设置两个标签的约束（为简洁起见，已省略）

我已经更新了我的asnwerr，你对我的答案满意吗？有什么疑问吗？嗨，我正在试用你提供的答案。到目前为止，我对你给我的深入的答案感到非常高兴，所以谢谢你。我还没有完全让它工作，所以一旦我尽我所能实现它，我会与你的gr联系een tick:）。善意的问候。如果您有任何疑问，请告诉我是否仍在工作？我的答案是否不好？谢谢您的耐心，对不起，我一直在工作非常忙。好的，我目前正在使用您提供的代码工作。但是，我有几个问题，我仍然有这个观点。请查看以上问题的答案w给你
    self.blackDogViewImage.image = UIImage(named: “BlackDogImage”)

self.cyanDogViewImage.contentMode = UIViewContentMode.top
    self.cyanDogViewImage.clipsToBounds = true
    self.cyanDogViewImage.image = UIImage(named: “CyanDogImage”)
}

func updateImage() {
    cyanDogViewImage.frame.size.height = 
cyanDogViewImage.frame.size.height + 0.07

    if cyanDogViewImage.frame.size.height >= blackDogViewImage.frame.size.height
{
 timer.invalidate()
 cyanDogViewImage.frame.size.height = blackDogViewImage.frame.size.height
    }
}

func outOfTime() {
    timer.invalidate()
}