Question

在我的用例中，我有一个从0.0移动到1.0的滑块。当移动滑块时，我希望按钮的图像能够平滑地从一个图像淡入另一个图像。该按钮仅在两个图像之间转换。当一个淡入时，另一个淡出，反之亦然。

关于如何在固定的持续时间内更改按钮图像，有关于SO的答案，但我无法根据更改的浮动找到某些内容。

那么有没有办法根据从0.0变为1.0的浮点数在一个图像到另一个图像的持续时间内更改按钮的图像？

编辑：例如，想象一个按钮，当您前后移动滑块时，该按钮可以从红色星形图像平滑过渡到绿色星形。（我知道你可以通过其他方式实现，但我想使用两个图像）

Answer 1

给它一个机会。它正在做我想你想做的事情。诀窍是将图层速度设置为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 2

对于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)

    }
}

或直接通过Storyboard / XIB

插入动作

Answer 3

这是另一种解决方法，因为我厌倦了单个按钮但无法实现结果，所以我做的是我把两个按钮相互重叠，具有相同的大小，约束，每个都有单独的图像。

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)!
}

您可以使用单个按钮使用交叉淡入淡出动画，但将其与滑块绑定是一项艰巨的任务。如果您需要任何帮助，请告诉我。

通过浮点值

3 个答案: