iOS Spin UIImageView，在任意位置具有减速运动 [英] iOS Spin UIImageView with deceleration motion at random position

问题描述

我试图创建一个在点击时旋转的自旋轮，它会旋转一定的时间，并以某个随机的圆角停止.

I trying to create a spin wheel which rotate on tap and it rotates for certain period of time and stops at some random circular angle.

import UIKit

class MasterViewController: UIViewController {

    lazy var imageView: UIImageView = {
        let bounds = self.view.bounds
        let v = UIImageView()
        v.backgroundColor = .red
        v.frame = CGRect(x: 0, y: 0,
                         width: bounds.width - 100,
                         height: bounds.width - 100)
        v.center = self.view.center
        return v
    }()

    lazy var subView: UIView = {
        let v = UIView()
        v.backgroundColor = .black
        v.frame = CGRect(x: 0, y: 0,
                         width: 30,
                         height: 30)
        return v
    }()

    var dateTouchesEnded: Date?
    var dateTouchesStarted: Date?

    var deltaAngle = CGFloat(0)
    var startTransform: CGAffineTransform?
    var touchPointStart: CGPoint?


    override func viewDidLoad() {
        super.viewDidLoad()
        self.imageView.addSubview(self.subView)
        self.view.addSubview(self.imageView)
        self.imageView.isUserInteractionEnabled = true
        self.setupGesture()
    }

    private func setupGesture() {
        let gesture = UITapGestureRecognizer(target: self,
                                             action: #selector(handleGesture(_:)))
        self.view.addGestureRecognizer(gesture)
    }

    @objc
    func handleGesture(_ sender: UITapGestureRecognizer) {
        var timeDelta = 1.0
        let _ = Timer.scheduledTimer(withTimeInterval: 0.2,
                                         repeats: true) { (timer) in
            if timeDelta < 0 {
                timer.invalidate()
            } else {
                timeDelta -= 0.03
                self.spinImage(timeDelta: timeDelta)
            }
        }
    }

    func spinImage(timeDelta: Double) {
        print("TIME DELTA:", timeDelta)

        let direction: Double = 1

        let rotation: Double = 1

        UIView.animate(withDuration: 5,
                       delay: 0,
                       options: .curveEaseOut,
                       animations: {

                        let transform = self.imageView.transform.rotated(
                            by: CGFloat(direction) * CGFloat(rotation) * CGFloat(Double.pi)
                        )
                        self.imageView.transform = transform

        }, completion: nil)
    }

}

我通过上面的代码尝试过，但始终停留在初始位置

I tried via above code, but always stops on initial position

即初始和最终转换是相同的.

i.e. the initial and final transform is same.

我希望它每次都是随机的.

I want it to be random at every time.

推荐答案

您可以做的一件事是使用指定范围内的随机数创建一个计数器.时间到时，调用 spinImage ，然后递减计数器.继续这样做，直到计数器达到零为止.这个随机数会给您带来一定的可变性，这样您每次都不会得到相同的结果.

One thing you can do is make a counter with a random number within a specified range. When the time fires, call spinImage then decrement the counter. Keep doing that until the counter reaches zero. This random number will give you some variability so that you don't wind up with the same result every time.

@objc func handleGesture(_ sender: UITapGestureRecognizer) {
    var counter = Int.random(in: 30...33)
    let _ = Timer.scheduledTimer(withTimeInterval: 0.2, repeats: true) { (timer) in
        if counter < 0 {
            timer.invalidate()
        } else {
            counter -= 1
            self.spinImage()
        }
    }
}

在 spinImage 中，而不是通过 CGFloat.pi 旋转，而通过 CGFloat.pi/2 旋转，这样您就有四个可能的结果而不是两个.

In spinImage, instead of rotating by CGFloat.pi, rotate by by CGFloat.pi / 2 so that you have four possible outcomes instead of two.

func spinImage() {
    UIView.animate(withDuration: 2.5,
                   delay: 0,
                   options: .curveEaseOut,
                   animations: {
                    let transform = self.imageView.transform.rotated(
                        by: CGFloat.pi / 2
                    )
                    self.imageView.transform = transform

    }, completion: nil)
}

您可能想要弄乱计数器值，计时器间隔和动画持续时间以获得所需的效果.我在这里选择的值有些随意.

You may want to mess around with the counter values, the timer interval, and the animation duration to get the effect that you want. The values I chose here are somewhat arbitrary.

这篇关于iOS Spin UIImageView，在任意位置具有减速运动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！