High-performance Animatable Vector for SwiftUI

AnimatableVector.swift

import SwiftUI
import enum Accelerate.vDSP

struct AnimatableVector: VectorArithmetic {
    static var zero = AnimatableVector(values: [0.0])

    static func + (lhs: AnimatableVector, rhs: AnimatableVector) -> AnimatableVector {
        let count = min(lhs.values.count, rhs.values.count)
        return AnimatableVector(values: vDSP.add(lhs.values[0..<count], rhs.values[0..<count]))
    }

    static func += (lhs: inout AnimatableVector, rhs: AnimatableVector) {
        let count = min(lhs.values.count, rhs.values.count)
        vDSP.add(lhs.values[0..<count], rhs.values[0..<count], result: &lhs.values[0..<count])
    }

    static func - (lhs: AnimatableVector, rhs: AnimatableVector) -> AnimatableVector {
        let count = min(lhs.values.count, rhs.values.count)
        return AnimatableVector(values: vDSP.subtract(lhs.values[0..<count], rhs.values[0..<count]))
    }

    static func -= (lhs: inout AnimatableVector, rhs: AnimatableVector) {
        let count = min(lhs.values.count, rhs.values.count)
        vDSP.subtract(lhs.values[0..<count], rhs.values[0..<count], result: &lhs.values[0..<count])
    }

    var values: [Double]

    mutating func scale(by rhs: Double) {
        vDSP.multiply(rhs, values, result: &values)
    }

    var magnitudeSquared: Double {
        vDSP.sum(vDSP.multiply(values, values))
    }
}

Trying this in Xcode 14.3 and iOS 16.4. When I run the code as-is, only the first value of the AnimatableVector is animated. Perhaps the behavior of SwiftUI has changed since the code was written?

In the existing version, animating the vector variable from [0.0] (.zero) to [50, 100, 75, 100] causes the first value of the array to smoothly interpolate between states, but the remaining values are set to 0.0 and do not change.

The workaround is to change the definition of AnimatableVector.zero. If .zero is redefined to be an array with an equal number of elements (i.e., [0.0, 0.0, 0.0, 0.0]), all four values of the array are smoothly interpolated.

I have a working implementation of animatable vector in this article

https://alexdremov.me/swiftui-advanced-animation/

I was trying it out by recreating the example explained in this article:

https://swiftwithmajid.com/2020/06/17/the-magic-of-animatable-values-in-swiftui/

I left AnimatableVector and LineChart unchanged, and made some minor changes to RootView so I could cycle through an array of vectors on tap. You can see a gist of my code here:

https://gist.github.com/joebez/b929d383d114b2144599a1597950b948

After reading your reply, I went back and looked at my code further. What I found is that the issue I was seeing apparently arises from my use of the .spring() animation. Your original code used a .default animation, and indeed when that animation is used, all of the elements in the vector are animated properly (first GIF). But if you use the .spring() animation instead, only the first element is animated (second GIF).

In that case, the workaround I mentioned above will create the desired behavior.

Having said that, even with the .default animation, you can see when vector is changed from vectorArray[2] (with 4 elements), to vectorArray[0] (with 1 element), there is a hiccup in the animation. My guess is this is because SwiftUI is animating between vectorArray[2][0] (100) and vectorArray[0][0] (0.0), instead of between the points that are at the rightmost end of the line chart in both cases (vectorArray[2][3] (0) to vectorArray[0][0] (0.0)).

I just noticed that the AnimatableVector code in the swiftwithmajid.com article includes this code:

mutating func scale(by rhs: Double) {
        values = vDSP.multiply(rhs, values)
}

while this gist makes a small change:

mutating func scale(by rhs: Double) {
        vDSP.multiply(rhs, values, result: &values)
}

However, even when using the code from the gist, the animation issue with the .spring() animation that I described above remains. 🤷‍♂️

I has same situation with .spring() animation. Spending whole day with this. Tks to ur comment. Now know why.

I solved this more delicately.

I reinitiated "static var zero" in AnimatableVector before I initiate the View's vector property.

AnimatableVector.zero = AnimatableVector(values: [0.0, 0.0, 0.0, 0.0])