如何旋转图像（动画） [英] How to make image spin (animation)

问题描述

我有一个正方形的图像，并且我知道如何旋转。但不确定如何使它像下面的动画一样旋转：

I have an image which is a square and I know how to make it spin. But not sure how to make it spin exactly like this animation here:

注意它如何旋转...然后停下来一点...然后再次旋转...依此类推。

Notice how it spins... then stops a little... then spins again... and so on.

我刚刚得到的是基本旋转，但看起来不像上面的gif：

What I have just is a basic spin but doesn't look like the gif above:

extension UIView {
    func rotate360Degrees(duration: CFTimeInterval = 3) {
        let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
        rotateAnimation.fromValue = 0.0
        rotateAnimation.toValue = CGFloat(M_PI * 2)
        rotateAnimation.isRemovedOnCompletion = false
        rotateAnimation.duration = duration
        rotateAnimation.repeatCount=Float.infinity
        self.layer.add(rotateAnimation, forKey: nil)
    }
}

任何

推荐答案

您需要使用一个定时函数来加速和减速，也称为缓动-渐进渐出计时功能。

You need to use a timing function that accelerates and decelerates, also known as an ease-in-ease-out timing function.

我已经修改了您的功能，以使用Core Animation的标准渐进渐出计时功能：

I've modified your function to use Core Animation's standard ease-in-ease-out timing function:

extension UIView {
    func rotate360Degrees(duration: CFTimeInterval = 0.8) {
        let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
        rotateAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        let radians = CGFloat.pi / 4
        rotateAnimation.fromValue = radians
        rotateAnimation.toValue = radians + .pi
        rotateAnimation.isRemovedOnCompletion = false
        rotateAnimation.duration = duration
        rotateAnimation.repeatCount=Float.infinity
        self.layer.add(rotateAnimation, forKey: nil)
    }
}

结果：

请注意，在您的图像中，框看起来像每180度暂停一次，所以我将函数更改为仅旋转180度。由于该框具有90度的径向对称性，因此看起来仍然可以绕180度和360度停顿。

Note that in your image, it looks like the box pauses every 180 degrees, so I've changed the function to rotate by only 180 degrees. Since the box has 90 degree radial symmetry, it still looks like it goes all the way around, with pauses at 180 and 360 degrees.

如果需要为图像设置动画没有任何径向对称性，则需要使用 CAKeyframeAnimation 来实现180度和360度的缓入缓出。

If you need to animate an image without any radial symmetry, you'll need to use a CAKeyframeAnimation to achieve the ease-in-ease-out at both 180 and 360 degrees.

这篇关于如何旋转图像（动画）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！