Animation: Transform a node from one shape to another

[jude]

My project involves a palette and a canvas. I drag a node from the palette to canvas (GoJS diagram).

Everything works well. For the same category of node, I have two layout templates - one for the palette, and another for the canvas. Now, the shapes differ slightly. Let’s say that in the palette, it’s a square, and in the canvas, it’s a rectangle.

When I drag my model from the palette to the canvas, I’d like to animate a square transforming into a rectangle. The complete animation must occur within the canvas. So when I drop it from the palette to the canvas, it should behave as if it “expanded” from a square to a rectangle.

How do I go about achieving this? I’ve not found any examples that do this.

[walter]

Right now you need to implement your own animation to change the width (or height) of the rectangle so that it starts off as a square and then keeps changing width (or height) so that it ends up at the final desired size.

If you search for uses of setTimeout or requestAnimationFrame you can find some examples of defining your own animations. Presumably you would start the animation in the “ExternalObjectsDropped” DiagramEvent listener.

At each step/tick of the way you’ll want to temporarily set Diagram.skipsUndoManager to true, make the changes, and then set it back to false. Similarly, if you have a Diagram.layout, you might want to temporarily set Layout.isOngoing to false.

[jude]

Thanks @walter. I’ll try that out and let you know how it goes.

[jude]

Any hints on doing a blur effect? Say, blur everything that’s below a particular rectangle?

[walter]

I don’t know what you mean. Are you still asking about the morphing animation?

[jude]

Say I wanted to blur the text on hover of my node. How would I be able to accomplish that?

[walter]

You cannot have anything drawn “blurred”. However you could change the stroke and background colors to decrease the contrast, or you could draw translucent “noise” in front of it or behind it (depending on how you do it). I’m just saying that although you cannot blur anything, you could implement other effects to achieve similar results.

[jude]

Hey @walter, what do you mean by noise?

[walter]

In the simplest case, I meant a partly translucent gray that “washes” over everything.

[jude]

Oh, that wouldn’t quite look like a blur.

No way to create a blur layer?

[walter]

As I said above, no.

[jude]

Thanks @walter.
Would this be a part of your roadmap by any chance?

[walter]

Canvas drawing does not support any filtering effects.

[jude]

Got it. Thanks @walter!