how do i shape tween with only scripts?
1 Like
paper.js has an “interpolate” function that morphs the shape of one path into another, I’ll try something with that idea
1 Like
for reference: paper.js is a library that wick editor uses
just in case the original poster has no idea what you mean
So I got a first draft of this working, but I’ve only tested this on pencil strokes, and it only does it one path at a time. This took quite a bit of debugging :P
2 Likes
Alright, I’ve cleaned up the code a little. It’s still not done, but I could use some feedback (and some help :D). link to Github file
Instructions
- Copy-paste the code into the browser console.
- Create two frames on the same layer, each having only one path. You can use the pencil tool or the brush tool.
- Run shapeTween(layer, start, end), where
layeris the index of the layer that the frames contain,startis the frame number of where you want to start the tween, andendis the frame number of the end drawing.
You should see that a bunch of frames appeared between the start and end; that’s the shape tween!
Next steps:
- Finished! Make it so that you can shape tween multiple paths at a time.
- Finished! Upgrade the path coercion function.
- Finished! Support shape tweens for CompoundPaths.
- Finished! Abort if two frames can’t be shape tweened. (e.g. a clip is present, one frame has more paths than other)
- Tween the path styles on top of the geometry.
- Shape hints. This would be amazing!
4 Likes
can you screen record a video on how it works?
1 Like
Wow… it’s just like Flash… next thing you know a fork will pop up with this built in!
2 Likes
Sure! After I work on it more though, it currently contains an error
1 Like
Most of the shape tween mechanics are done! Sorry, I had a bit of trouble with the video recording… but I do have these screenshots:
Screenshots
Paste the code into the console and run it (press Enter)
Enter the frames you want to tween. The function for this example would be
shapeTween(0, 1, 21)
Run the function in the console (press Enter) and the shape tween will appear
Rules for Shape Tweens
- Frames will tween in the order you drew the strokes. If I remember correctly, Alan Becker recommended distributing the strokes into individual layers, so that the shape tweening will be more predictable.
- Strokes can only tween if they have the same amount of holes. This is because shapes with holes are a CompoundPath.
- You can’t tween clips/buttons.
So yeah, keep those in mind when you create the shape tweens.
1 Like
hey real quick, anyone know why tf there is over a dozen of accounts on here now randomly posting ads? like: “Call now: Xxx-xxx-xxxx” like, its mad annoying I believe their scammers or whatever
Ahh I see. Thanks so much!
I don’t know know of this helps, but i found a website that talks about tweening.
https://gsap.com/docs/v3/Eases/
Hope it helps :)