Transitions / animations
- Dominant language
- JavaScript
- Stars
- 10.7k
- Forks
- 407
- PR merge metrics
- No merged PRs in 30d
Description
Hello, this is a feature request, and I guess it's not an easy one :)
It would be great to be able to edit, translate, rotate or scale an existing shape dynamically, and interpolate this transformation over a custom amount of time.
Ex:
```
let ell = new Zdog.Ellipse({
addTo: illo,
diameter: 80,
translate: { z: 40 },
stroke: 20,
color: '#636',
});
ell.animate({
diameter: 150,
translate: {z: -40},
transition: "500ms",
});
// Result: the ellipse will change diameter from 80 to 150 and move from 40 to -40 in 500ms.
```
Bonus points if you manage to implement transition-timing-function too (linear, ease-in-and-out, etc)
Thanks, and congrats for this lib!
Contributor guide
Research direction
The issue provides a JavaScript example using Zdog.Ellipse and animate(). Start by locating the existing shape-property and render/update entry points, then trace how animation timing is handled. Done means shape transformations interpolate over a requested duration, with the listed timing functions supported if feasible, and the behavior is covered by tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- computer-graphics
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100