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))
    }
}

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])