Comments (15)
I am working on a morph plugin that will use this technique but it is not yet ready for release.
from svg.js.
oh.. cool, do you have an ETA. I'm from queness.com, and working on a tutorial about this plugin. btw, good job.
from svg.js.
In fact it is already working but I need to overcome one problem. I can't really give an ETA because the plugin can only be released when I found a decent solution. This can be tomorrow or next month.
from svg.js.
Ok, looking forward to it.
from svg.js.
If you need any help on the tutorial, please let me know.
I am looking forward to it.
Thanks.
from svg.js.
@wout why don't you tell us what is the problem? You might find help :-)
from svg.js.
Well, my main concern with SMIL animations is that they are difficult to control. For example, you can't simply stop an animation halfway the defined duration. In case of a path morph that would result in the element returning to its initial state, or at best with a bit of tweaking to its destination. This is a huge problem if you want to use those animations in combination with mouse events.
Another, more dramatic problem with SMIL is that if paths get complicated no animation happens at all. It seems points in a path needs to match. The result is a hard switch from one shape to the other at the end of the given duration.
Therefore I am looking into forging a path recalculation module. This will take more time and it's a lot more complex but it will be much more flexible and it will integrate nicely with our the built-in SVG.FX module.
from svg.js.
So the problem is realizing the animations while sticking to SMIL -- while as far as I can see most of the libraries out there (Raphael, D3) simply keep track of the animation in the code and modify the attributes in the SVG accordingly (e.g. on a frame-by-frame basis).
A "dummy" path recalculation function should be an easy task, if one is not too picky 😄. I wrote a piece of code that does exactly that by simply adding points to the original path without modifying its appearance, such that the total count of points before/after the animation stays the same. That was enough in the context I wrote it for. I would advise against more complex solutions, unless the result is a simple and flexible way for the developer to specify what section of the path should be "affected" by the animation.
from svg.js.
Yes, the questions was about SMIL animations. I have briefly walked this path but quickly realised that SMIL is absolutely not the way to go. In fact I don't think there is any future for it unless they would completely rewrite SMIL to make it dynamically controllable.
I have also looked at path tweening/recalculations and it is absolutely manageable. Although time is not on my hands an I am developing svg.js as I go. Currently I am only implementing features when I need them myself. Of course I would love to add some fancy features and any help with that would be greatly appreciated.
My plan is to add this kind of functionality in a plugin. Any interest in working together on this?
from svg.js.
Sure, I can spend some time (few hours per week) on this. I'm only afraid a plugin is not enough if we need to work on individual points of the paths. As soon as you have an initial idea for the design of the plugin just let me know and let's move on from there.
from svg.js.
There is no difference to a plugin or native modules in svg.js. It's architecture allows extension of core classes without limitations. I will set up a draft so we can work from there.
from svg.js.
Any news on this guys? I'm interested in this functionality as well!
from svg.js.
The good news is that it will be a plugin. The bad news is that I have very little time on my hands, so no ETA.
from svg.js.
Any chance you can send me an early development version? I really need it! :-)
from svg.js.
I would but I haven't started yet :)
from svg.js.
Related Issues (20)
- Update website on node package README HOT 1
- It would be nice if we can destroy timeline gracefully. HOT 2
- Error: Unbound namespace prefix: "svgjs" HOT 8
- How to judge the <g> container exist the child element <rect>?
- npm install for nodejs HOT 1
- how to move while rotating
- Text alignment differs between 3.0 and 3.1 HOT 1
- (documentation) animating shapes along a path example needs rewrite HOT 5
- Moving a text with an inside title element fails HOT 3
- Migrating SVG window events HOT 6
- Incomplete typings - measurements should accept percentages HOT 3
- No Fragment declaration in svg.js.d.ts HOT 2
- Custom Bezier Function HOT 2
- Negative scale value in animation do not work properly. HOT 4
- TypeError: Cannot read properties of undefined (reading 'call') for PATHs in NodeJS HOT 8
- svgjs.com redirect to 'gacor.poker' scammy site HOT 1
- Image SVG size is zero sometimes HOT 4
- How can I draw a Polyline from a svg => g => svg => rect (responsive) to an Dom Element on the right side? HOT 1
- Testing overloaded methods is hard
- Issues with rolling a timeline backwards with non-animating functions
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svg.js.