Quantcast
Channel: WP快站
Viewing all articles
Browse latest Browse all 233

How to set the opacity of a shape and its text?

$
0
0

Context

Mermaidjs does not natively support animation. I need to create gif files similar to this:

animated graph

The problem with this approach is that the graph is always re-arranged whenever a new node is added to the graph. It makes harder to follow the flow.

My Attempt

My idea was to add all nodes and edges to each "frame" and change their opacity.

In mermaid we could not use rbga to specify opacity so, I did the following trick.

First frame

graph TD    start[Start]    middle[Process]    stop[Stop]    start -- calls --> middle    middle -- notifies --> stop    %% Step 1 - hide everything except the start    %% Step 2 - comment out related assets    %% Step 3 - comment out related assets    %% Frame 2's assets    linkStyle 0 opacity:.1,color:#0001    style middle opacity:.1,color:#0001    %% Frame 3's assets    linkStyle 1 opacity:.1,color:#0001    style stop opacity:.1,color:#0001

Middle frame

graph TD    start[Start]    middle[Process]    stop[Stop]    start -- calls --> middle    middle -- notifies --> stop    %% Step 1 - hide everything except the start    %% Step 2 - comment out related assets    %% Step 3 - comment out related assets    %% Frame 2's assets    %% linkStyle 0 opacity:.1,color:#0001    %% style middle opacity:.1,color:#0001    %% Frame 3's assets    linkStyle 1 opacity:.1,color:#0001    style stop opacity:.1,color:#0001

Last frame

graph TD    start[Start]    middle[Process]    stop[Stop]    start -- calls --> middle    middle -- notifies --> stop    %% Step 1 - hide everything except the start    %% Step 2 - comment out related assets    %% Step 3 - comment out related assets    %% Frame 2's assets    %% linkStyle 0 opacity:.1,color:#0001    %% style middle opacity:.1,color:#0001    %% Frame 3's assets    %% linkStyle 1 opacity:.1,color:#0001    %% style stop opacity:.1,color:#0001
  • The opacity controls the shape's opacity level
  • The color's last part controls the text's opacity level

For testing purposes I've used ezgif's maker to animate the mmdc generated frames:

without re-arranging the graph

Problem

It did solve the re-arranging problem but it seems a bit clumsy. The background of the edge's annotation is still visible. In the previous sample I've used 10% opacity. But even if I use 0% is still visible.

live editor

Related live editor link

Is there anyway to hide the background of the edge's annotation?


Viewing all articles
Browse latest Browse all 233

Trending Articles