swift动画 —— 图片跟着slider变化大小和高斯模糊效果

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

首先先创建一个ImageView好方便来展示高斯模糊效果。 声明一个ImageView

imageView = UIImageView(image: UIImage(named: "happy"))

在viewDidLoad中创建一个方法,方法里面设置其大小，并且将其放在View的中间，然后将其添加为View的子view。

        imageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
        imageView.center = view.center
        view.addSubview(imageView)

运行后发现图片的比例不是非常正确，并且大小也超过了给予的大小，添加代码：

  imageView.contentMode = .scaleAspectFill
  imageView.clipsToBounds = true

给view添加一个点击手势

 view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap)))

添加打印方法确认添加成功。

  @objc func handleTap() {
        print("tapped")
    }

确认之后，给图片增加一个放大的效果。

 UIView.animate(withDuration: 2) {
            self.imageView.transform = CGAffineTransform(scaleX: 2, y: 2)
        }

这样做的话就无法控制想要放大的倍数，添加一个slider。添加一个setUpSlider设置好slider，然后在viewDIdLoad 中调用setUpSlider。

  func setUpSlider() {
        let slider = UISlider()
        view.addSubview(slider)
        slider.frame = CGRect(x: view.center.x - 100 , y:  view.center.y + 120 , width: 200, height: 20)
    }
            slider.addTarget(self, action: #selector(handleSliderChange), for: .valueChanged)

这样就可以获取到slider里面的值了。

@objc func handleSliderChange(slider:UISlider) {
        print(slider.value)
    }

接下来声明一个UIViewPropertyAnimator属性，这是一个为视图的更改制作动画并允许动态修改这些动画的类。

    let animator = UIViewPropertyAnimator(duration: 0.5, curve: .linear, animations: nil)

在viewDidLoad中为animator添加动画

 animator.addAnimations {
            self.imageView.transform = CGAffineTransform(scaleX: 4, y: 4)
        }

在handleSliderChange中修改animator的fractionComplete,fractionComplete 代表动画的完成进度。

 @objc func handleSliderChange(slider:UISlider) {
        animator.fractionComplete = CGFloat(slider.value)
    }

到这里图片的大小就会随着进度条的拖动而变化了。接下来要添加高斯模糊。 声明一个blurEffectView属性。

let blurEffectView = UIVisualEffectView(effect: nil)

在animator.addAnimations中添加

self.blurEffectView.effect = UIBlurEffect(style: .regular)

设置好frame，添加为view的子view，在viewDidLoad中调用。

  func setUpBlurEffect() {
 
        blurEffectView.frame = view.frame
        view.addSubview(blurEffectView)
    }

这样一个能跟着slider变化而改变大小和高斯模糊效果的图片就做好了 完整代码

import UIKit

class ViewController: UIViewController {
  let imageView = UIImageView(image: UIImage(named: "happy"))
  let animator = UIViewPropertyAnimator(duration: 0.5, curve: .linear, animations: nil)
  let blurEffectView = UIVisualEffectView(effect: nil)


  override func viewDidLoad() {
      super.viewDidLoad()
      setUpImageView()
      setUpBlurEffect()
      animator.addAnimations {
          self.imageView.transform = CGAffineTransform(scaleX: 4, y: 4)
          self.blurEffectView.effect = UIBlurEffect(style: .regular)

      }
      setUpSlider()

     // view.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleTap)))
      
      
  }
  func setUpBlurEffect() {
      blurEffectView.frame = view.frame
      view.addSubview(blurEffectView)
  }
  
  func setUpSlider() {
      let slider = UISlider()
      view.addSubview(slider)
      slider.frame = CGRect(x: view.center.x - 100 , y:  view.center.y + 120 , width: 200, height: 20)
      slider.addTarget(self, action: #selector(handleSliderChange), for: .valueChanged)
  }
  
  @objc func handleSliderChange(slider:UISlider) {
      animator.fractionComplete = CGFloat(slider.value)
  }

  
  @objc func handleTap() {
      
      UIView.animate(withDuration: 2) {
          self.imageView.transform = CGAffineTransform(scaleX: 2, y: 2)
      }
  }
  
  fileprivate func setUpImageView() {
      // Do any additional setup after loading the view.
      imageView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
      imageView.center = view.center
      imageView.contentMode = .scaleAspectFill
      imageView.clipsToBounds = true
      view.addSubview(imageView)
  }
  


}