Animate colours in a SwiftUI Canvas

Question

endecotp OP

Created Jan ’25

Replies 2

Boosts 0

Participants 1

Pseudo-code:

            PhaseAnimator([false,true], trigger: foo) { flash in
                ZStack {
                    Capsule()
                        .foregroundStyle(flash ? .red : .green)

                    Canvas { context, size in
                        context.draw(image: Image(name: "foo"), toFitRect: some_rectangle);
                        context.draw(text: Text("foo"), toFitRect: another_rectangle);
                    }
                    .foregroundStyle(flash ? .black : .white)
                }
            } animation: { flash in
                return .linear(duration: 0.5);
            }

The Capsule's colour animates, but the Canvas's doesn't. The Canvas drawing code is only ever called with flash==false.

What do I have to do to the Canvas so that it redraws with the intermediate colours during the animation?

Boost

Answer 1

endecotp OP

Jan ’25

It seems that if I put the Canvas in a custom view, then it is called with flash==false and flash==true, but the colour doesn't transition smoothly from one to the other:

(pseduo-code)

struct CustomCanvas: View
{
    var body: some View {
        Canvas { context, size in
                        context.draw(image: Image(name: "foo"), toFitRect: some_rectangle);
                        context.draw(text: Text("foo"), toFitRect: another_rectangle);
        }
    }
};


struct MainView: View
{
    var body: some View {
            PhaseAnimator([false,true], trigger: foo) { flash in
                ZStack {
                    Capsule()
                        .foregroundStyle(flash ? .red : .green)

                    CustomCanvas()
                        .foregroundStyle(flash ? .black : .white)
                }
            } animation: { flash in
                return .linear(duration: 0.5);
            }
};

0

Answer 2

endecotp OP

Jan ’25

I found this web page: https://swiftui-lab.com/swiftui-animations-part3/ Specifically, the end section where it talks about Animatable Views. Quote:

If we want the body of the view to be recomputed for every frame of the animation, then we adopt the Animatable protocol, by adding Animatable, and the animatableData property.

So I've replaced the CustomCanvas above with this:

struct CustomCanvas: View, Animatable
{
    var fg_colour: Color.Resolved;

    var animatableData: Color.Resolved {
        get { fg_colour }
        get { fg_colour = newValue }
    };

    var body: some View {
        Canvas { context, size in
                        context.draw(image: Image(name: "foo"), toFitRect: some_rectangle);
                        context.draw(text: Text("foo"), toFitRect: another_rectangle);
        }
        .foregroundStyle(fg_colour)
    }
};

and now I pass fg_colour from the MainView:

struct MainView: View
{
    @Environment(\.self) var environment;

    var body: some View {
            PhaseAnimator([false,true], trigger: foo) { flash in
                ZStack {
                    Capsule()
                        .foregroundStyle(flash ? .red : .green)

                    CustomCanvas(fg_colour: (flash ? .black : .white) .resolved(in: environment)
                }
            } animation: { flash in
                return .linear(duration: 0.5);
            }
};

(Note Color isn't animatable, but Color.Resolved is; I need some extra stuff to make that work.)

But this still doesn't work. The Canvas closure is still only called twice per update, not continuously to update with intermediate colours.

Advice would be much appreciated.

0