Skip to content
This repository has been archived by the owner on Jun 16, 2020. It is now read-only.

Cutting frames from resulting SVG #119

Open
abitrolly opened this issue Apr 22, 2020 · 0 comments
Open

Cutting frames from resulting SVG #119

abitrolly opened this issue Apr 22, 2020 · 0 comments

Comments

@abitrolly
Copy link

I could not find tool that can edit animations produced by termtosvg. And from the format description it looks quite real.

All frames in termtosvg animation are independent and stored (but not rendered) in svg.svg.defs. This array consists of elements g#g1, g#g2 and so on. Each element is fully drawn frame. Then in svg.svg.g#screen_view these elements are placed on a canvas from top to bottom. Then CSS style animation is applied to SVG viewport scroll it over Y axis.

The algorithm seems easy:
1.Find <g> element of the frame that needs to be removed in svg.svg.g#screen_view, remember its index
2.Remove <g> element and CSS animation rule with the same index

2.422%{transform:translateY(-3366px)}
2.681%{transform:translateY(-3740px)}
2.767%{transform:translateY(-4114px)}
  1. Check that Y coordinate of the removed <g> element matched CSS coordinate
  2. Check that referenced g#gN element from svg.svg.defs is not references anywhere else and remove with as well.

The only problem is timing. The previous frame will now be exposed longer time, and all CSS percentages after the frame need to be readjusted. Then it will create a pause at the end of animation. Therefore absolute --animation-duration time needs to be shortened. But this will not remove the pause at the end - all frames just became faster, because all percentages are relative to the total animation duration.

Did I forget anything?

# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant