search

aibosan / anigen

SVG animation browser-based editor
GNU General Public License v3.0
83 stars 19 forks source link

Increasing beyond 10 s causes issues #10

Open danyill opened 5 years ago

danyill commented 5 years ago

First, thank you for this tool. I am just trying to learn it and would be keen to write a quickstart over the next long while once I've figured it out.

When creating an animation by animating attributes, after 10 seconds I have issues.

See the attached for example (zipped to be allow on github) electroswitch_drawing_22 (1) (1).zip

I am trying to attribute the text in the Story_Line_7 to appear between 12 s and 14 s. I do the following:

  1. I group the text in the layer
  2. I animate attribute "display" and set to "none" and "linear" at 0 s.
  3. I animate attribute "display" and set to "inline" and "ease in" at 12 s.
  4. I animate attribute "display" and set to "none" and "ease out" at 14 s.

But something appears at around 2s even when I try to remove this.

What I think is happening is that because the default animation length is 10 s, when this is increased there is "stuff left behind" somehow.

danyill commented 5 years ago

I should add I am using Chrome Version 70.0.3538.110 (Official Build) (64-bit) and the latest version on Anigen, 0.8.1.

danyill commented 5 years ago

I think the issue is that keytimes and dur for animate elements are not updated and rescaled when the animation length is extended.

aibosan commented 5 years ago

Hello! Thank you for your interest in AniGen.

Sadly, you cannot stretch animation by setting one of its keyframes' times beyond the animations duration.

Instead, to stretch the animation, you must increase its duration explicitly: kf01

Depending on the state of the "Keep times" checkbox next to it, the keyframes absolute time ("Time [s]") remains the same (checked), or their relative time ("Percent") remains the same (unchecked): kf02

You can then adjust the individual keyframes, like so: kf03

As a note, keep in mind "display" attribute cannot be animated continuously - it cannot transition between hidden and shown via a fade-in. Instead, it will basically flip between off ("none") and on ("inline") states. For smooth transition, you'd want to animate the element's opacity.

I hope this helps. Your way to setting duration implicitly makes a lot of sense - I'll add it to the future development todo. Thank you very much for your input!