Sencha Animator is using CSS3 animations exclusively.
RaphaelJS is using SVG animations.
I wonder what are the similarities and differences between SVG and CSS3 animations?
Could one be used instead of the other or are they for difference tasks?
Ok. I have a whole presentation with an introduction to CSS Animations and A little on SVG.
But here are the oversimplified essentials:
The CSS Animation spec (per se) is just equipping you to declare "key frames" or multi-step transitions between Styles.
"Styles" in CSS3 includes "Transform" which specifies the scale, rotation, skew and position offset of a page element.
It's possible to "Transition" between styles, and specify the time and pace of that transition, to the extent, even, of declaring a cubic bezier timing function.
Combining Animations, transitions and transforms gives you an easy, declarative way of moving and transforming ANY page element (an img, a div, a video etc.) in a very rich way, that also progressively degrades nicely in older browsers (as long as you're sane about things).
BUT every element is essentially treated as an undifferentiated 2d rectangle for the purposes of animation, so its really all about animating sprites. At Sencha, as you've noted, we've even built a whole CSS Animation tool around this. And you should take a look at some of the demos there because it shows that you can really do a lot with the small set of primitives that CSS gives you. - Product Discontinued.
SVG Animation can be performed using the built in SVG animation capabilities (animate, animateelement etc.), SMIL (a declarative animation description similarish to CSS Animations) or JavaScript), has a richer set of capabilities than CSS Animation, but only because you're creating SVG Objects and changing their properties. You can't use SVG "animation" to, for example, animate an existing piece of HTML.
But it's also much richer. The biggest gain in SVG is that you're declaring drawing paths and fills with great flexibility (lines, arcs, quadratic arcs, cubic bezier arcs etc. etc.) and you can change the value of these properties over time using transforms and key splines (similar to timing functions in CSS Transitions)) This allows you to perform "rigging" animation rather than sprite animation. (I'm not an animator, I'm just using the terms I think are appropriate). So you can actually draw things like this cat walking across the screen, using line animations impossible to perform with CSS Animation (or impossible to perform for people of reasonable sanity - if insane people want to declare large numbers of zero height divs with border radii and use transforms to simulate arcs, then it's a free country.)
On the other hand, SVG is a PITA if you're writing it unassisted (verbose XML style with XHTML dtd). I'd highly recommend Raphael if you're a JavaScripter - Raphael has the benefit of degrading to VML vector graphics in older IE. SMIL (declarative animation for SVG) is a nice idea but it's not properly supported in many places. Also many browsers don't properly support SVG and those that do, often support it incompletely, particularly when you try to animate properties.
Update: there are many more updated animation libraries nowadays including snap.svg, greensock and others.
And there's no SVG support in Android 2.x, so if you want web animations that work on phones you're stuck with CSS Animations.
Having taught myself the basics of SVG animation in order to develop the intro presentation linked at the top, I can give a hearty thumbs down to hand-writing SVG. It's hard to remember, it's non-intuitive and because its XML, it tends to either work completely or fail completely, making it frustrating to debug.
They are completely different.
SVG is a vector image format. It is used to create infinite-resolution images using paths and basic shapes:
CSS3 animations, however, are just web browsers smoothly interpolating CSS properties like color, padding, font-size, etc. As you can see, the scope of CSS3's animations is very limited.
Related
Has anyone ever successfully recorded in-browser animation?
My goal is to somehow save or export keyframe animations as a gif to showcase fun projects in online portfolios where only images and text are supported.
I tested RecordIt, but it's not quite up to par.
Aware that animated mockups can be built in After Effects or even Photoshop... but it's pretty tedious matching them up to the live keyframes. ( However, if anyone has a good tutorial for this... bring it on! )
Crazy or possible?
As you ask of recording the animation I assume you are already aware you can't simply save them from the browser so far.
That said, depending on the OS you are on you can use LICEcap (MS Windows or Apple OSX), GifCam or ScreenToGif (MS Windows only), Byzanz or Peek (Linux only).
The process is quite straightforward with very few easy steps.
For a LICEcap example see VividD answer to similar other question here on StackOverflow; the principle is the same for every other mentioned software.
Finally, I think you might find this interesting also (example involving use of GifCam + Photoshop).
You can install Camtasia and record the gif. Then you can directly produce it as a gif (which I've never tried) or produce it as a video and then convert it into a gif using Photoshop
You can try to export your composition with github.com/davidderaedt/after2css
AfterEffects CSS Animation Exporter
This After Effects script exports compositions to CSS keyframe animations.
Limits & known issues
Nested compositions are not supported.
- Expressions are not supported and should be converted to keyframes before exports.
- Only position, scale, opacity and rotation transform animations are supported.
- Anchor points are converted to transform-origin but cannot be animated.
- Linear easings are converted to linear, other easings are converted to default ease. Cubic bezier curves are not supported at this point. Hold keyframes are simulated and should work as expected.
- Position animation use top/left properties where tranlations would provide better performanc
We have a customer who has created an animated graphic (using AI & After Effects).
The graphic is essentially 3 overlapping donuts (can't post right now for "obvious reasons")
Each donut isn't perfectly circular and is distorted in some unique way
Each donut has a different linear color gradient on a different chord
Each donut rotates, scales & pulses at a slightly different speed in the animation.
Their graphic was built using Illustrator (each donut being 1 layer), and then animated in After Effects. The result of the overlapping donuts is a nice color multiplication effect where the various sections of each donut overlaps.
I'm currently trying to port this to the web and running into major problems with regards the color blending & multiplication stuff.
Somethings I've tried.
Export the AI file as an SVG and animate using RaphaelJS
Export the paths directly from AI and render them with RaphaelJS
Take the exported SVG and hack it to use FeImage & FeBlend filters
All of the above do not render as I would expect and from a little googling SVG color blending and the SVG spec in general is not fully implemented across the majority of browsers.
I've also tried export the individual layers as PNGs and then using CSS done:
background: url('PNGs/L1.png') center center,
url('PNGs/L2.png') center center,
url('PNGs/L3.png') center center;
background-repeat: no-repeat;
background-blend-mode: multiply;
This kinda gets me in the right direction but: it seems to be completely broken in IE, and I can't get it to work where each PNG is the BG image on 1 of 3 different divs (which I need to do in order to animate the div individually)
Am I just barking up the wrong tree with this problem or is this something that there's a magic js graphics library out there that will fix all my woes ?
The CSS blend modes are only available in the latest browsers, so if the color effects are essential that isn't really an option. The only color multiplication effect that has anywhere decent browser support is SVG filters (<feBlend>).
One difficulty of using filters, however, is that there currently isn't decent browser support for combining multiple elements from the same file in a filter. None of the browsers support the SVG1.1 enable-background option for blending one element with the elements behind it (it will be replaced by the isolation feature in the new CSS Blending spec). The <feImage> filter element could be used to import a fragment of your SVG into the filter for another element, but that use isn't supported in Firefox (which only allows it to be used for complete image files).
So, your strategy would be:
Create separate files (SVG or PNG) for each of your three colored donuts.
Create an empty container element that you will pass to the filter. Make sure you set the filter region to the correct dimensions for the output graphic.
In the filter, use three <feImage> elements to load your component graphics. Set the x, y, width, and height parameters to the initial overlapping positions of the three graphics.
Combine the <feImage> results using two <feBlend> operations
Animate the parameters of <feImage> using JavaScript or SMIL with JavaScript backup for IE.
Limitations:
Filters operate on pixel graphics, you can't do any transformations other than setting the position and size of the imported images. If you need other animations, you'd need to do them in the source image files.
You're loading four separate files. Might want to look into data URIs to cut down the total load time.
More on SVG Filters
If you're okay with only supporting the latest browsers (with others seeing the shapes but not the color multiply effect), you should be able to do this with CSS Blending on any of
SVG elements, with animated transformations
Multiple HTML images or elements with CSS backgrounds (animating the CSS transform property, possibly with fallback to animating absolute position properties)
A single HTML element with multiple CSS background images, animated using the background-position property (CSS or JavaScript). The animation is trickier here, since the positions of all the layers are controlled through a single CSS property. It also wouldn't be hardware-accelerated like a transformation, which can be implemented using independent layers combined by the video card.
However, note that there are two different blend mode properties:
background-blend-mode controls how layered backgrounds on an element blend into each other. It can be a list of values for each image in your background. It has no effect on blending between separate elements (HTML or SVG).
mix-blend-mode controls how a given element is blended into the content behind, subject to the limitations of the isolation property (which isolates all child content from blending with the rest of the web page) or other properties which create a stacking context.
More on CSS Blending
caniuse.com browser support for CSS Blending
Use of gradient images is very common among developers for styling a page. Gradient images are used in many places from styling the navigation bar to styling the background. Technique like repeating a small image in either direction is also common.
One more way to style and give this effect is by using multiple div's one below another with different color, the latter being a little lighter than the former. In the most simple scenario doing so would include only a small script. So, no problem of writing a lot of markup, just some simple code.
The only concern that remains is speed and performance.
Speed
The script, more precisely the function would be much shorter in size than a image. So, in matters of speed the latter method seems more good.
Performance
Today's browsers are very powerful, so the difference between displaying an image and executing a function is negligible.
Css management
Obviously, problems like positioning would be another concern but we do struggle with such problems in every day life. The problem is no greater than overlapping two div's and setting their z-index. The whole gradient div's can lie inside one parent div.
So having addressed the issues of performance and speed isn't using Gradient div's a much better approach than using images?
It's an alternate approach, yes. But not a good one. You get zero points for:
Maintainability
Scalability
SEO
Separation of presentation from content
Furthermore, to say that we needn't worry about performance since today's browsers are more powerful is a gross assumption.
Actually, I think the second option you describe (creating multiple divs with atering colour) is downright terrible.
You're altering markup for the sake of styling. That's a no-go.
It's a common thing among users to disable JavaScript. What happens then?
As you said yourself, positioning mayhem.
When it comes to performance, I would be more cautious than to state it's no longer an issue. Especially with the dawn of mobile browsers in mind.
Such styling would be harder to understand and maintain. Particularly when your team changes someday.
Also, there are two other ways to implement gradients.
CSS gradients - limited to simple variants and requiring a lot of CSS to provide decent cross-browser capabilities. You can try this generator get a taste of these: http://www.colorzilla.com/gradient-editor/
SVG backgrounds. These allow you to create just any gradient you wish. You can use an svg file in your CSS just like any other image. However, some browsers don't support this feature. Here's a table showing when it's an option
Using images is the most reliable option, while combining SVG with normal images (for these browsers that don't support SVG) seems the most flexible approach.
So I'm looking at a specific application for a web browser which requires me to express color as a straight alpha channel with a black and white alpha channel as a separate element. (an example of both types
I know many moons ago, IE supported some perverse filter options, but since I'm doing css3 transforms, I need this to work in a modern browser, preferably Chrome.
Basically what I'd like to do is have an element with CSS transforms applied, specifically rotation most likely, then I'd like to take that and copy it to another equivalently sized element which has the black / white transformation applied. An additional bonus would be setting the original element to use straight alpha, but I can live without that for now.
I haven't been able to find any routes with which to start investigating. If you have one, I'd be super grateful. My last resort is to start doing things in WebGL or Canvas and modifying the output there.
Two or three different elements stacked on top of each other using absolute positioning and z-index? This would require you to save two different images which I'm guessing you're trying to avoid.
You can do CSS 3D transforms. Browser support is basically there in newer IE, Chrome, Firefox, iOS and Android.
where can you use them
how to use them
MDN
I've actually figured out the answer... it's CSS Shaders.
https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html
Not yet available, but soon.
The reason not to use Canvas is for simplicity in authoring. (Long story.)
I'm looking to use CSS gradients for an element of my web app that is drawn repetitively, as it would allow me more flexibility in dynamically changing its appearance. However, my question is whether gradients are more expensive for the browser to render than bitmap images. Or do images use more processing power? (And I'm not concerned with cross-browser compatibility- the app will only be used on the iPad)
According to an article on the Webkit Wiki, images perform better:
Sometimes it's tempting to use webkit's drawing features, like -webkit-gradient, when it's not actually necessary - maintaining images and dealing with Photoshop and drawing tools can be a hassle. However, using CSS for those tasks moves that hassle from the designer's computer to the target's CPU. Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) - otherwise, static images are always faster. On very low-end platforms, it's even advised to use static images for some of the text if possible.
Source: https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages
Of course, you have to balance that CPU time with the extra time it would take to load the image from the server. Also, for Internet Explorer, filters are extremely slow, especially if you have many on one page.
This above answer is directly lifted from How does the performance of using background-gradients in CSS vs using images?
These links can be useful read for you
Browser Repaint/Reflow performance: using CSS3 Gradients vs PNG Gradients
CSS gradients are faster than SVG backgrounds
http://leaverou.me/2011/08/css-gradients-are-much-faster-than-svg/
Runtime Performance with CSS3 vs Images
http://jacwright.com/476/runtime-performance-with-css3-vs-images/