Dotted line animation

Any ideas on how the dotted line animation is done?

You may have a look at this thread: Highway interchange -> routing

In this case you can do a build in with the Line Draw slider for a Vector Shape.

Then, if you duplicate the shape (and hide the line drawn one) you can do another animation changing the Line Draw popup to Line Dash. Give a dash, gap, and then you can record to animate the offset to be the sum of those two values. Then make sure the animation uses a linear timing function, and loop via timeline action.

1 Like

how did you get the line dash box to appear - have I missed something this whole time :frowning:

the two arrows: up and down. right next to the menupoint.

Please consider to visit Hypes online-documentation! This'll help you on many other topics. too :wink:

Thanks Hans I thought I was on top of the documentation but clearly not - now Im confused

I can't get this to appear
vector-dash-gap-offset-inspector@2x

Maybe I need more sleep :frowning:

the arrows next to line draw ... those will swap the modus

1 Like

For visual learners … :wink:

CleanShot 2021-11-13 at 14.29.32@2x

1 Like

In the future versions of Hype I hope this would be easier to find. That little up and down switch is like a hidden feature almost and to be honest I forgot all about it. It’s also a bummer a user can’t animate it easily as they can with a solid line.

2 Likes

You can animate the values by changing them on different keyframes. Set the offset to a multiple of the combined gap values to get a nice endless animation. Loop it on a linear animation. Done!

You can use the rubber hose technique to achieve this with a live preview . I’ll tweak the code later today. Update: as promised, here is the implementation…

1 Like

For me personally Its like a hack almost. Like an experimental feature more than anything, the values are very hard to understand from a creators point of view but as a coder/wizard of your stature it’s piece of cake.

That said, I can relate to the individual needs in asking to animate the dash lines as easy as one can animate the non dashed line. Im hopeful that future version of hype can make it easier for folks animating the dashed lines with ease.

1 Like

I understand, although the dash array and offset interface is the native thing. You have to keep in mind that this line functionality originates in the HTML itself. Hence, the "Line Draw" feature is the Hype specific hack for creators to make it simple, not the other way around.

When thinking about what you said I had the following idea. It would be great to have three modes in Hype.

As dashArray can be an arbitrary length of comma separated values Hype has only supported two of them for animation and added the “Line Draw” feature in version 4. Supporting an arbitrary amount of fields would be a challenge for the the Hype animation engine and specially the UI if kept separate.

So, why as a compromise not have a third mode in that little drop down that only presents a simple text field for the dash array. Changing it while recording an animation wouldn’t lead to a smooth value to value animation but maybe just an all out replacement like innerHTML currently does.

1 Like

I don't know about a free-form field, but I'd definitely like to be able to support arbitrary dash/offset pairs. You're correct the fundamental issue is in animating between incompatible pair sets. There are some okay solutions to be used, but it would require a reasonable amount of runtime code. For initial vector shapes it wasn't clear if there was even going to be demand folks doing dashed paths to make this worthwhile, but now we know it is :slight_smile:.

1 Like