Line Dash Animate with Line Draw

Vectors
1

Hype Beta 636, looks like its either line draw or line dash and two are not the same.

When trying to animate a line draw to simulate a trail path with dash values 4 to 4 theres no way to do that.

Im guessing theres no way I can animate a dashed line with a draw line?

2

you are right ...
https://forums.tumult.com/t/use-vector-shape-as-animation-path/11751/20?u=h_classen

2 Likes
3

Ahh yeah, theres that script, its a workaround good one.

4

For others wondering this, you would run this script ‘on scene load’ to draw animate the drawing of a dashed line:

	var hypePaths = document.querySelectorAll('.path');
		
	for(var i = 0; i < hypePaths.length; i++){
	
	var svgPath = hypePaths[i].querySelector('path');
	var length = svgPath.getTotalLength();
	var dash = 7;
	var dashArray= [];
	var l = Math.floor(length/dash);
	if(!isEven(l))l+=1;

	for (var p = 0;  p < l ; p++){
	dashArray[p] = dash;
		}
		
	dashStr = dashArray.join(' ');
	dashStr += ' ' +  0 + ' ' + (l*dash);
	
	svgPath.style.strokeDasharray  = dashStr;
	}
	
	
function isEven(num) {
return num % 2 === 0;
}

Adjust

var dash = 7;

to be the length of the dash you want.

1 Like
5

would this ever be part of the program without the use of script?

1 Like
6

I’d like to change this so you can have both! Line draw and line dash use the same SVG attribute, so that’s why it is one property. I wasn’t aware of the above technique of setting CSS (.style attribute) separately for the dash until recently. It is too late for v4 though :cry:.

3 Likes
7

I understand, you’ve done an incredible job on hype 4 beta as is, so thank you. I’m sure this will be included after major release 4 and until then I’m going to be using the above method. When it comes to css, are you referring to what you could’ve done or it can be done now by styling it via Edit Head HTML? Because I tried to define a class now it doesn’t seem to work .linedrawdotted {border-style: dotted;}

I’m actually anticipating the release of Hype 4 and put it to good use.

1 Like
8

Hype would be using javascript, but you could do this via CSS in the head html. However you first need to do the calculations that the above code does and come up with the dashStr. You could output that. Then you need to apply the CSS to the SVG path element (Hype will name this elementid_path) with the stroke-dasharray property. (border-style is for DOM boxes).

3 Likes
9

… and be aware that my provided hack does not support dynamic changes of the length of the path …

1 Like
10

Daniel, How do I have just the dots as line draw vs what i have now line draw from dots to dash oscillating?

dashing.hype.zip (13.6 KB)

11

isn’t it an optical Illusion¿ caused by speed …
Human being: never trust your eyes :slight_smile:

1 Like
12

May look like an optical illusion but its clearly changing from dots to dash and Im not sure if speed is affecting it . A solution would be great to just have rounded dots?

13

it's not! it just looks like, because of an optical illusion ... or?
export to video allows to examine it :slight_smile:

14

Exported it as 30 FPS Its clearly a dash, yes. Hypes optimal frame rate is 60 FPS or higher so when previewing its making it look like theres a dot. How do I convert a dash into a dot?

15

What does this mean¿

16

What I meant to say is 5px border dots vs dash? I noticed that when its 1px border it kinda looks like dots but its too small which is why I wanted to see it bigger¿<— is this your signature question mark?

17

I think you’d need code to update and adapt every frame to offset for the new position in the line draw. I’m not sure what this would look like because I don’t know off the top of my head how the CSS and SVG line offsets fully interact. You could potentially use the math equation and run javascript there which would recalculate. Not a simple task.

As for drawing as dots, I assume you mean the round line cap? You can just change that to the “butt” option in the element inspector.

18

round linecap, 5 px strokewidth, strokeDasharray = ‘0 10’ :slight_smile: rule: the second value twice as much as the strokewidth <- just previewed in chrome …

edit: newest ff and safari desktop will work too …

19

Cool! Can you please elaborate with a Hype beta file? Thank you

20

I added the code on Scene Load but the path is not dashed.
What am i doing wrong?
Thank you.Crayon.hype.zip (12.3 KB)