如何着色动画UIImageView？

Question

I'm attempting to apply tint of a UIImageView consisting of programatically loaded animationImages . Currently using iOS 9.3.

I think I've tried every proposed solution found here for applying the tint including:

• Setting the .renderMode on load with: let newImage: UIImage? = UIImage(named: filename as String)!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate) let newImage: UIImage? = UIImage(named: filename as String)!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
• Setting the tintView either in the Storyboard or programatically with: zeroImageView.tintColor = UIColor.redColor()
• Setting the image .renderMode through the UIImageView itself: zeroImageView.image = zeroImageView.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
• Setting the UIImageView's renderMode through the Interface Builder user defined runtime attributes: imageRenderingMode Number 2

The image sequence is of PNGs with transparency, so, I would like to re-colour the image and maintain the transparency.

I've had no luck and am sort of at a loss. Wondering if maybe these methods only work for a still UIAnimationView? Any help would be greatly appreciated, thanks!

Here's some code:

// Load all images
    while let element = enumerator.nextObject() as? String {
        if element.hasSuffix("png") {
            let filename: NSString = "Digits/0/" + element
            print(filename)
            imageNames.append(filename as String)
            let newImage: UIImage? = UIImage(named: filename as String)!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
            images.append(newImage!)
            zeroImageView.tintColor = UIColor.redColor()

        }
    }

// Make animated UIImageView
    zeroImageView.userInteractionEnabled = false
    zeroImageView.animationImages = images
    zeroImageView.animationDuration = 2.0
    zeroImageView.startAnimating()
    zeroImageView.tintColor = UIColor.redColor()

Answer 1

If none of those worked the next step I would do is programmatically place an empty UIView on top of the UIImageView. First off, it would not interfere with anything going on in the UIImageView.

I would check out this tutorial here: http://www.apptuitions.com/programmatically-creating-uiview-uislider-uiswitch-using-swift/

this will teach you how to programmatically add a UIView to the storyboard. I would add this code in the viewDidLoad() method.

The main thing you need to change is the background color of the UIView. First you have to decide what the color of the tint (which from what I see in your code is red) and then explicitly change the 'Alpha' of the color so that it is barely showing. You change the 'Alpha' because that is basically the opacity of the color.

Hope this helps.

Answer 2

Try this...

extension UIImage {
    func image(withTint tint: UIColor) -> UIImage? {
        guard let cgImage = cgImage else {
            return nil
        }

        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        guard let context = UIGraphicsGetCurrentContext() else {
            return nil
        }

        let rect = CGRect(origin: .zero, size: size)

        context.translateBy(x: 0, y: size.height)
        context.scaleBy(x: 1.0, y: -1.0)
        context.setBlendMode(.normal)
        context.clip(to: rect, mask: cgImage)
        tint.setFill()
        context.fill(rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }
}