CSS is great for transforming and animating elements in all types of ways. But for fine-tuned path control / animating individual points of a path etc - something like SMIL or the many JS animation libraries exist.
Why is SMIL being depreciated if it's a native solution?
Are there any Polyfills/hacks to get SMIL working in IE or Edge as
it is the only major browser without any support?
Related
Basically I have an opaque View covering a screen, and I want to build an animation that is something like a (perfect circular) hole in the view forming in the center (so to reveal whats underneath) and expanding outwards.
I'm thinking that there could be a few creative ways to get this done, and that perhaps the most corresponding CSS property to play with would be 'clip-path'. If that is the case, I don't believe ReactNative Views offer that, and 3rd party libraries w/ SVG & clipping features seem like they wouldn't play well with Animating the effect.
Any ideas much appreciated!
You could use https://github.com/react-native-community/react-native-svg !
The library supports SVG's better and allows you to animate with Clip-path!
I am planing use d3.js to display a network diagram. But while going through the documentation I am feeling we cannot customise the nodes using custom html template as it is SVG. am I correct?. But still my question is d3.js tells D3 helps you bring data to life using HTML, SVG and CSS, means html also used for rendering the networks. So can I use my custom html for nodes if it uses html to render?
Because I needed a network diagram that required some multiline text, it was much easier (and more supported by browsers) to use absolute-positioned DIV elements for the nodes, and then use a background SVG layer to draw the edges between them.
I haven't had a lot of luck getting foreign object to work properly across all browsers.
D3 does not constrain your rendering technology at all. You can certainly use SVG, HTML, or both. I'm not sure how you're planning to create your network diagram, but presumably it will be using SVG at the overall diagram level. (I can't think of a decent way to show connections in pure HTML.) If that is the case, you'll have to embed HTML within the overall SVG. That's possible, see here, and D3 fully supports it.
Consider creating an SVG animation: a rectangle move into the scene from left side of the svg image and move out from right side and this is a loop.
(And i don't what to use canvas libraries or any javascript code).
[1] Is it possible to create this simple animation with any application (just like flash but with svg export) (I know Adobe Illustrator let us export vectors but not sure about animating theme).
[2] Also as SVG is vector based i intend to make this svg animating fluid (setting the width of svg to 100% an content scale automatically) is it also possible?
(I know how to do such these things using canvas libraries like snap.svg kinetic ... with bunch of js code i'm looking for some GUI App which let a graphic designer having no idea what JS is do it like Adobe Flash for example).
Any solution?
I am not sure about GUI App but fluid animations are possible. Look at the following elements: animate, animateMotion, animateTransform, animateColor.
Here are some examples and documentation:
MDN: animate, animateMotion
W3C
I'm setting up an experimental html5 website using canvas.
I am drawing 3 circles all next to each other and all I want to know is how to be able to select them.
I'd like them to become links, in a way. Not tags, since everything's gonna be created using javascript.
Something like kinetic JS : http://www.kineticjs.com/, but without the extra library.
I have found some scripts that are using ghost canvas and contexts, but the examples are for dragging and stuff. I only want to be able to select my shape and execute some code.
Thank you!
I am thinking you might want to look into the IsPointInPath() method. It will help you figure out whether or not the mouse clicked on your canvas object.
See Detect mouseover of certain points within an HTML canvas?
if you are talented in xml i suggest you to use canvas + SVG (http://www.w3schools.com/svg/)
And follow this simple example.
http://jsvectoreditor.googlecode.com/svn/trunk/index.html
regarding to SVG and Canvas , the differences are obvious, as you can load bitmaps in SVG, and you can draw lines using the canvas API. However, creating the image may be easier using one technology over the other, depending on whether your graphic is mainly line-based or more image-like.
Is there a good way to detect if SVG animation is available, and then adjust the DOM appropriately?
I'm using animateMotion to animate the motion of a g containing images. This only works in Mozilla; even worse, having the animateMotion unstarted leaves the images in a different position in both Mozilla and WebKit (but not the same place in each!).
It seems I need a way to adjust the properties on the g and images to deal with each scenario, and to add the animateMotion tag only if it would work. Any suggestions?
Modernizr detects only high level feature existence and trusts the browser not to lie. Desktop Safari, for example, has a big "Yes" for SMIL from Modernizr. But SMIL is only partly implemented in pretty much every browser (even Firefox 4!), and you have to test each individual attribute animation to figure out exactly which one is working or not.
For example, you can't animate the startOffset for text on a path animation in Desktop Safari using SMIL. There is no library that detects feature existence for things like this.
IMHO, where they exist you should use CSS transforms/animations for general purpose animation on everything other than IE. For IE, use Javascript (or Canvas) animations.
(BTW, animateTransform on Chrome is broken - it miscalculates the translations)
I just had this issue with a Samsung phone running Android 4.2.2. It would report true for all three of these: Modernizr.svg, Modernizr.svgclippaths, Modernizr.smil but no animation and the clip-paths where messed up. It looked like only one element could have a clip-path. Anyway, we ended with this not-so-great resolution:
isAndroid = /Android/.test( navigator.userAgent );
Sorry, android users, you'll only see the backup image. This is a horrible fix but it was only for a simple logo animation so...
Modernizr detects support for SVG animation (SMIL).
Without the complete example it's impossible to say for sure what's causing the differences.