Infinite spin animation with "ease in" and "ease out" in Swift?

Question

I want to create a "roulette" (a simple UIImageView with appropriate image) and spin it.

There are similar questions but they describe just how to spin with linear speed by using multiple recursive animation calls. But in my case I need to use easeIn animation on start of spinning and easeOut on stop. So no one answer from those topics help.

How to resolve this issue?

Code Example

func spin() {
        UIView.animate(withDuration: 0.3, delay: 0, options: UIView.AnimationOptions.curveLinear, animations: { () -> Void in
                self.imgViewRoulette.transform = self.imgViewRoulette.transform.rotated(by: .pi / 2)
            }) { (finished) -> Void in
                if finished {
                    self.spin()
                }
            }
    }

It's best to post your code so no-one has to guess what you are working with. Your code animates 1/4 circle at a time. How do you want the ease-in and ease-out applied? Do you want to ease-in the 1st 1/4, ease-out the 2nd 1/4, ease-in the 3rd 1/4, and ease-out the 4th 1/4 or something else? Please put that info in your question. — HangarRash, Mar 07 '23 at 05:42
@HangarRash `easeInOut` works normally for one animation only, not multiple "nested" animations. — Gargo, Mar 07 '23 at 05:53
OK, I think I finally get what you want. You want to ease in the start of the animation, make the wheel spin around a few times, then ease out to a full stop. Right? You don't just want an oscillating continuous animation, right? — HangarRash, Mar 07 '23 at 06:05
@HangarRash yes, I need to start spin with `easeIn` and stop with `easeOut` animation as I said in the title of this question. — Gargo, Mar 07 '23 at 06:08
To be fair, your title makes no mention of how you want to use ease-in and ease-out, just that you want them. Your requirements may have been clear to you but the trick is making those requirements clear in your question (which you still haven't done). You should update your question with a clearer description of the exact animation you want so people don't need to read through all of these comments to finally understand. :) — HangarRash, Mar 07 '23 at 06:12
FYI - I wasn't involved in closing your question but it would seem that others agree that your question needs more info. Edit your question with the details we worked out in the comments and people can work on getting your question reopened. Begin with removing the word "infinite" from the title. In the meantime, check out my answer. — HangarRash, Mar 07 '23 at 06:41

score 0 · Accepted Answer · answered Mar 07 '23 at 06:22

The following update to your spin function will start with an easeIn for a 1/4 turn, then do a series of linear 1/4 turns, and then end on an easeOut 1/4 turn.

func spin(_ iteration: Int = 0, count: Int) {
    let options: UIView.AnimationOptions
    switch iteration {
    case 0:
        options = .curveEaseIn
    case count:
        options = .curveEaseOut

    default:
        options = .curveLinear
    }

    UIView.animate(withDuration: 0.3, delay: 0, options: options, animations: { () -> Void in
        self.imgViewRoulette.transform = self.imgViewRoulette.transform.rotated(by: .pi / 2)
    }) { (finished) -> Void in
        if iteration < count {
            if finished {
                self.spin(iteration + 1, count: count)
            }
        }
    }
}

This can be called with something like:

someObject.spin(count: 8)

Infinite spin animation with "ease in" and "ease out" in Swift?

1 Answers1