how animate a shape with a path

metafizzy / zdog

Flat, round, designer-friendly pseudo-3D engine for canvas & SVG

https://zzz.dog

10.3k stars 392 forks source link

how animate a shape with a path #109

Open sarahBuisson opened 3 years ago

sarahBuisson commented 3 years ago

I draw a line with Shape, I want to change it with the time, how do I do?

I've try:

let s=new Zdog.Shape({ addTo: illo, path: [ // triangle { x: 0, y: -40 }, { x: 40, y: 40 }, { x: -40, y: 40 }, ], closed: false, // unclosed stroke: 20, color: '#636' }); s.path= [ // triangle { x: 0, y: -90 }, { x: 10, y: 40 }, { x: -40, y: 40 }, ]

but it seems that the new value of path is not updated :(

coder787 commented 3 years ago

you can't just update shape sizes in zdog to animate, basically to do any kind of animation you should use GSAP as you can make timelines and control movement, within GSAP you then put the zDog shapes that animate from one state to the next. Instead of editing a shape you create 2 shapes and transition between them for example to create the illusion. I created a drawing triangle example here for you, which I think is what you are trying to do. I recommend searching codepen for zdog to see what is possible with animation. hope that helps.

https://codepen.io/coder787/pen/MWJreyo