在 SwiftUI 中平滑加速旋转

Question

I would like to smoothly accelerate the rotation speed of a shape in a SwiftUI application then slow it back down again to fixed speed. First I tried toggling the animation speed using a @State Bool as I would any other property (eg .speed(speedUp ? 5.0 : 1.0) ), but I suppose animation properties themselves are not themselves animatable. I've also tried using an AnimatableModifier to no effect:

import SwiftUI

struct SpeedModifier: AnimatableModifier {
    var speed: Double
    var animatableData: Double {
        get { speed }
        set { speed = newValue }
    }

    func body(content: Content) -> some View {
        return content.animation(
                Animation
                    .linear(duration: 5.0)
                    .speed(speed)
                    .repeatForever(autoreverses: false)
            )
    }
}

struct SwiftUIView: View {
    @State var isRotating = false
    @State var speedUp = false
    var body: some View {
        Rectangle()
            .frame(width: 200, height: 200)
            .rotationEffect(.degrees(isRotating ? 360 : 0))
            .modifier(SpeedModifier(speed: speedUp ? 5.0 : 1.0))
            .onAppear {
                self.isRotating.toggle()
                DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                    self.speedUp.toggle()
                }
            }
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
}

Answer 1

You may try .timingCurve animation. In this example rectangle rotated slower and faster all the time:

struct RotatingView: View {

    @State private var rotationDegree = 0.0
    private var timeCurveAnimation: Animation {
        return Animation.timingCurve(0.5, 0.8, 0.8, 0.3, duration: 6)
            .repeatForever(autoreverses: false)
    }

    var body: some View {
        Rectangle()
            .frame(width: 200, height: 200)
            .rotationEffect(.degrees(rotationDegree))
            .onAppear() {
                withAnimation(self.timeCurveAnimation) {
                    self.rotationDegree = 720.0
                }
        }
    }

}

Unfortunately there are almost no documentation what does ( c0x:c0y:c1x: c1y: ) parameters mean, tried some samples from this github . More complex animations are described in this article , it should be useful

Answer 2

So far as I've been able to determine, being able to dynamically change a running animation is, as of this writing (iOS 13, OSX 10.15), unfortunately a job for Core Animation, where it's reasonably simple.

For example, using Core Animation, we can add the following animation to a layer, causing it to rotate once every 0.5 seconds, indefinitely.

private let animation: CABasicAnimation = {
        
    let animation = CABasicAnimation(keyPath: "transform.rotation")
        
    animation.duration    = 0.5
    animation.fromValue   = 0.0
    animation.toValue     = 2.0 * -Float.pi
    animation.repeatCount = .infinity
        
    return animation
}()

Once you've got that going, then the following extension allows for smooth changing of the layer's speed, and stopping the layer in-situ.

import QuartzCore

extension CALayer {
    
    // Set up our view of the world such that time began from here,
    // so that we don't feel the need to change anything when our
    // properties are mutated. Handy for things like changing the
    // speed without first snapping back to the model state.
    
    func syncTimeToCurrent() {
        timeOffset = convertTime(CACurrentMediaTime(), from: nil)
        beginTime  = CACurrentMediaTime()
    }

    // Attempt to sync up the model transform with the presentation
    // transform. Handy for preventing the presentation from snapping
    // back to the model after removing a transform animation.
    
    func syncTransformToPresentation() {
        if let presentationTransform = presentation()?.transform {
            transform = presentationTransform
        }
    }
}

And you'd use it like so. Details of how the view is instantiated omitted; in my case, the view is a layer hosting view with 3 image sublayers, two of which are static, and one of which rotates.

final class Rotating: NSView {

    private let animation: CABasicAnimation = {
        
        let animation = CABasicAnimation(keyPath: "transform.rotation")
        
        animation.duration    = 0.5
        animation.fromValue   = 0.0
        animation.toValue     = 2.0 * -Float.pi
        animation.repeatCount = .infinity
        
        return animation
    }()
    
    private let rotatingLayer: CALayer = { return CALayer() }()

    // Our speed is that of our rotating layer; return it to callers when
    // requested, and allow them to set it.

    var speed: Float {
        get { return rotatingLayer.speed }
        set {
            
            // Starting rotation from a dead stop is just adding
            // the animation to the layer.
            
            func run() {
                rotatingLayer.add(animation, forKey: nil)
            }
            
            // Key to setting the speed, if we are already rotating,
            // is to ensure we don't jump to the start position when
            // we do that, so set up the layer's view of time such
            // that it'll feel there's nothing to do in that regard.
            
            func set() {
                rotatingLayer.syncTimeToCurrent()
            }
            
            // Stopping rotation is just removing the transform
            // animation, but we ideally want to halt it where it is
            // at the moment, rather than having it snap back to the
            // original position.
            
            func off() {
                rotatingLayer.syncTransformToPresentation()
                rotatingLayer.removeAllAnimations()
            }
            
            // If we're being asked to set a zero speed, then it's
            // likely that the caller knows things that we don't,
            // such as that we're about to disappear. Stop rotation,
            // so things are in a well-defined state.
            //
            // If the new speed isn't zero, but our current speed is
            // zero, then we need to run.
            //
            // Otherwise, we need to set the already-running rotation
            // to the new speed.
            
            if      newValue == .zero { off() }
            else if speed    == .zero { run() }
            else                      { set() }
            
            rotatingLayer.speed = newValue
        }
    }
}

So, reasonably simple there, really; all the tools are there to make things dynamically modifiable in a straightforward manner, so you could just do the same and then import the view into SwiftUI, bind it, etc.

I'd love to have someone explain how to accomplish the same thing in pure SwiftUI, without having to drop into Core Animation. At the moment, that's how I do it.