basic support for CSS animations (#27)

* wip

* wip

* basic "push-to-DOM" animation mechanism

* 'tis a bit tricky

* animation combining fix

* fixed multi-transaction and combining animations

* fixed embedded build

Author: sliemeobn

Examples/Basic/Sources/App/AnimationsView.swift

@@ -4,24 +4,45 @@ import _ElementaryMath
 @View
 struct AnimationsView {
     @State var angle: Double = 0
+    @State var isBallFading: Bool = false
+    @State var isOffset: Bool = false
+    @State var isRotated: Bool = false
 
     var content: some View {
 
         div {
-            AnimatedView(angle: angle)
-            button { "Animate" }
-                .onClick { _ in
-                    withAnimation(.bouncy(duration: 1)) {
-                        angle += 1
+            AnimatedView(angle: angle, isBallFading: isBallFading)
+            div(.style(["display": "flex", "flex-direction": "row", "gap": "10px"])) {
+                button { "Animate" }
+                    .onClick { _ in
+                        withAnimation(.smooth) {
+                            angle += 1
+                            isBallFading.toggle()
+                        }
                     }
-                }
+                Square(color: "blue")
+                    .rotationEffect(.degrees(0))
+                    .rotationEffect(.radians(angle), anchor: .topTrailing)
+                Square(color: "red")
+                    .rotationEffect(.degrees(isRotated ? 360 : 0))
+                    .offset(x: isOffset ? 100 : 0)
+                    .onClick { _ in
+                        withAnimation(.bouncy(duration: 3)) {
+                            isOffset.toggle()
+                        }
+                        withAnimation(.easeIn(duration: 1).delay(1)) {
+                            isRotated.toggle()
+                        }
+                    }
+            }
         }
     }
 }
 
 @View
 struct AnimatedView {
     var angle: Double
+    var isBallFading: Bool
 
     let size = 100.0
     var x: Double { size * (1 - cos(angle)) }
@@ -37,6 +58,7 @@ struct AnimatedView {
                         "position": "relative",
                     ])
                 )
+                .opacity(isBallFading ? 0.1 : 1)
         }.attributes(
             .style([
                 "height": "\(2 * size + 10)px",
@@ -47,6 +69,22 @@ struct AnimatedView {
     }
 }
 
+@View
+struct Square {
+    var color: String
+
+    var content: some View {
+        span {}
+            .attributes(
+                .style([
+                    "background": color,
+                    "height": "20px",
+                    "width": "20px",
+                ])
+            )
+    }
+}
+
 extension AnimatedView: Animatable {
     var animatableValue: Double {
         get { angle }

Sources/ElementaryDOM/Animation/AnimatedValue.swift

@@ -81,25 +81,25 @@ struct AnimatedValue<Value: AnimatableVectorConvertible>: ~Copyable {
             context: &context
         )
 
-        self.currentAnimationValue = Value(animationBase + animatedVector)
-
         if let finishedAnimationIndex {
             removeAnimations(upThrough: finishedAnimationIndex)
         }
 
-        #if DEBUG
-        if !isAnimating {
-            assert(self.currentAnimationValue == self.currentTarget)
-            assert(self.animationBase == self.currentTarget.animatableVector)
+        if isAnimating {
+            self.currentAnimationValue = Value(animationBase + animatedVector)
+        } else {
+            // NOTE: avoid floating point weirdness
+            self.currentAnimationValue = self.currentTarget
+            self.animationBase = self.currentTarget.animatableVector
         }
-        #endif
     }
 
     // TODO: figure out the shape for this
     func peekFutureValues(_ times: StrideThrough<Double>) -> [Value] {
         var results: [Value] = []
         var contextCopy = context
         var runningAnimations = runningAnimations[...]
+        var base = animationBase
 
         results.reserveCapacity(times.underestimatedCount)
 
@@ -110,12 +110,19 @@ struct AnimatedValue<Value: AnimatableVectorConvertible>: ~Copyable {
                 context: &contextCopy
             )
 
-            results.append(Value(self.animationBase + animatedVector))
-
             if let completedIndex {
-                //TODO: update base
+                for i in runningAnimations.startIndex...completedIndex {
+                    base += runningAnimations[i].target
+                }
                 runningAnimations = runningAnimations[(completedIndex + 1)...]
             }
+
+            if runningAnimations.isEmpty {
+                results.append(self.currentTarget)
+                break
+            }
+
+            results.append(Value(base + animatedVector))
         }
         return results
     }
@@ -138,6 +145,7 @@ private func calculateAnimationAtTime<AnimationList>(
 ) -> (animatedVector: AnimatableVector, finishedAnimationIndex: AnimationList.Index?)
 where AnimationList: Collection<RunningAnimation> {
     guard runningAnimations.count > 1 else {
+        assert(runningAnimations.first != nil, "Running animations should not be empty")
         if let vector = runningAnimations.first!.animate(time: time, context: &context, additionalVector: nil) {
             return (vector, nil)
         } else {
@@ -161,7 +169,7 @@ where AnimationList: Collection<RunningAnimation> {
             carryOverVector = runningAnimation.target - vector
         } else {
             finishedAnimationIndex = index
-            totalAnimationVector += runningAnimation.target
+            //totalAnimationVector = zero
             carryOverVector = zero
         }
 
@@ -170,3 +178,17 @@ where AnimationList: Collection<RunningAnimation> {
 
     return (totalAnimationVector, finishedAnimationIndex)
 }
+
+internal extension AnimatedValue {
+    mutating func setValueAndReturnIfAnimationWasStarted(_ value: Value, context: borrowing _RenderContext) -> Bool {
+        let wasAnimating = isAnimating
+
+        if let animation = context.transaction?.animation {
+            self.animate(to: value, animation: AnimationInstance(startTime: context.currentFrameTime, animation: animation))
+        } else {
+            self.setValue(value)
+        }
+
+        return isAnimating && !wasAnimating
+    }
+}

Sources/ElementaryDOM/Animation/Transaction.swift

@@ -26,6 +26,7 @@ public func withTransaction<Result, Failure>(
     defer {
         Transaction._current = previous
     }
+    logTrace("withTransaction \(transaction._id)")
     return try body()
 }
 

Sources/ElementaryDOM/DOM/DOM+Animation.swift

@@ -0,0 +1,29 @@
+extension DOM {
+    public struct Animation {
+        let _cancel: () -> Void
+        let _update: (KeyframeEffect) -> Void
+
+        func cancel() {
+            _cancel()
+        }
+
+        func update(_ effect: KeyframeEffect) {
+            _update(effect)
+        }
+    }
+}
+
+extension DOM.Animation {
+    public enum CompositeOperation: Sendable {
+        case replace
+        case add
+        case accumulate
+    }
+
+    public struct KeyframeEffect {
+        var property: String
+        var values: [String]
+        var duration: Int  // milliseconds
+        var composite: CompositeOperation
+    }
+}

Sources/ElementaryDOM/DOM/DOM+Types.swift

@@ -0,0 +1,64 @@
+extension DOM {
+    public struct Node {
+        let ref: AnyObject
+    }
+
+    public struct Event {
+        let ref: AnyObject
+    }
+
+    public struct EventSink {
+        let ref: AnyObject
+    }
+
+    public enum PropertyValue {
+        case string(String)
+        case number(Double)
+        case boolean(Bool)
+        case stringArray([String])
+        case null
+        case undefined
+    }
+
+    public struct PropertyAccessor {
+        let _get: () -> PropertyValue?
+        let _set: (PropertyValue) -> Void
+
+        init(
+            get: @escaping () -> PropertyValue?,
+            set: @escaping (PropertyValue) -> Void
+        ) {
+            self._get = get
+            self._set = set
+        }
+
+        func get() -> PropertyValue? {
+            _get()
+        }
+
+        func set(_ value: PropertyValue) {
+            _set(value)
+        }
+    }
+
+    public struct StyleAccessor {
+        let _get: () -> String
+        let _set: (String) -> Void
+
+        init(
+            get: @escaping () -> String,
+            set: @escaping (String) -> Void
+        ) {
+            self._get = get
+            self._set = set
+        }
+
+        func get() -> String {
+            _get()
+        }
+
+        func set(_ value: String) {
+            _set(value)
+        }
+    }
+}