Исчезать изображение кнопки с одного изображения на другое с помощью значения с плавающей запятой

Question

В моем случае у меня есть ползунок, который перемещается от 0,0 до 1,0.При перемещении этого ползунка я хочу, чтобы изображение кнопки плавно переходило от одного изображения к другому.Кнопка будет только переходить между двумя изображениями.По мере того, как один затухает, другой гаснет, и наоборот.

Есть ответы на SO о том, как изменить изображение кнопки за фиксированную длительность, но я не могу найти что-то, основанное на изменяющейся поплавке.

Итак, есть ли способ изменить изображение кнопки в течение продолжительности с одного изображения на другое на основе значения с плавающей запятой, которое изменяется от 0,0 до 1,0?

РЕДАКТИРОВАТЬ: Например, представьте себекнопка, которая плавно переходит от изображения красной звезды к зеленой звезде, когда вы перемещаете ползунок вперед и назад.(Я знаю, что вы могли бы сделать это другими способами, но я хочу использовать два изображения)

Answer 1

Это еще один обходной путь, так как я устал от одной кнопки, но не смог достичь результата, поэтому я взял две кнопки, накладывающиеся друг на друга, с одинаковыми размерами, ограничениями и каждая с отдельным изображением.

var lastSlideValue : Float = 0.0
@IBOutlet weak var slideImage: UISlider!
@IBOutlet weak var btnImageOverlay: UIButton!
@IBOutlet weak var btnSecondOverlayImage: UIButton!

override func viewDidLoad() {
    super.viewDidLoad()
    btnImageOverlay.imageView?.alpha = 1.0
    btnSecondOverlayImage.imageView?.alpha = 0.0
}
@IBAction func sliderValueChanged(_ sender: Any) {//UIControlEventTouchUpInside connected method
    let sliderr = sender as? UISlider
    let value = sliderr?.value

    if lastSlideValue < (sliderr?.value ?? 0.0) {
        btnSecondOverlayImage.imageView?.alpha =  CGFloat(value!)
        btnImageOverlay.imageView?.alpha =  1 - CGFloat(value!)
    } else if lastSlideValue == sliderr?.value {
        print("equal")
    } else {
        btnImageOverlay.imageView?.alpha =  CGFloat(value!)
        btnSecondOverlayImage.imageView?.alpha =  1 - CGFloat(value!)
    }

}
@IBAction func userTouchedSlider(_ sender: Any) { //UIControlEventValueChanged connected method
    let sliderr = sender as? UISlider
    lastSlideValue = (sliderr?.value)!
}

Вы можете использовать анимацию перекрестного затухания с помощью одной кнопки, но связать ее с ползунком - сложная задача.Дайте мне знать, если вам нужна помощь с тем же.

Answer 2

Дайте этому шанс.Я думаю, он делает то, что ты хочешь.Хитрость заключается в том, чтобы установить скорость слоя на 0 и просто обновить timeOffset.

import UIKit

    class ViewController: UIViewController {

        lazy var slider : UISlider = {
            let sld = UISlider(frame: CGRect(x: 30, y: self.view.frame.height - 60, width: self.view.frame.width - 60, height: 20))
            sld.addTarget(self, action: #selector(sliderChanged), for: .valueChanged)
            sld.value = 0
            sld.maximumValue = 1
            sld.minimumValue = 0
            sld.tintColor = UIColor.blue
            return sld
        }()


        lazy var button : UIButton = {
            let bt = UIButton(frame: CGRect(x: 0, y: 60, width: 150, height: 150))
            bt.center.x = self.view.center.x
            bt.addTarget(self, action: #selector(buttonPress), for: .touchUpInside)
            bt.setImage(UIImage(named: "cat1"), for: .normal)

            return bt
        }()


        override func viewDidLoad() {
            super.viewDidLoad()
            self.view.addSubview(button)
            self.view.addSubview(slider)
        }

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

        func addAnimation(){
            let anim = CATransition()
            anim.type = kCATransitionFade
            anim.duration = 1.0

            button.layer.add(anim, forKey: nil)
            button.layer.speed = 0
            button.setImage(UIImage(named: "cat2"), for: .normal)
        }


        @objc func sliderChanged(){
            print("value \(slider.value)")
            button.layer.timeOffset = CFTimeInterval(slider.value)
        }

        @objc func buttonPress(){
            print("pressed")
        }
    }

Вот результат:

Answer 3

Для Swift 4

//This is slider
@IBOutlet weak var mSlider: UISlider!

//Add Target for valueChanged in ViewDidLoad
self.mSlider.addTarget(self, action: #selector(ViewController.onLuminosityChange), for: UIControlEvents.valueChanged)

//called when value change
@objc func onLuminosityChange(){
    let value = self.mSlider.value
    print(value)
    if value > 0.5 {
        btnImage.imageView?.alpha =  CGFloat(value)
        UIView.transition(with: self.btnImage.imageView!,
                          duration:0.3,
                          options: .showHideTransitionViews,
                          animations: { self.btnImage.setImage(newImage, for: .normal) },
                          completion: nil)

    }else{
        btnImage.imageView?.alpha =  1 - CGFloat(value)
        UIView.transition(with: self.btnImage.imageView!,
                          duration:0.3,
                          options: .showHideTransitionViews,
                          animations: { self.btnImage.setImage(oldImage, for: .normal) },
                          completion: nil)

    }
}

Или вставить действие напрямую через раскадровку / XIB