Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Does html5 help developers animate vector graphics in any way? I'm talking about straight key-frame vector animation, such as what flash does.
Is the way to do this basically using javascript to manipulate SVG graphics (such as what http://www.raphaeljs.com does? which is a bit weird to me since it's been supported in browsers for quite some time) or does html5/canvas lend itself someway to vector graphics animation?
I'm just trying to understand what's the "new" way developers will animate vectors on the web if/when flash plug-in eventually dies.
Thanks
There's also CSS animation, which is declarative and can be more efficient because the JavaScript code is not pushing the animation.
But there's nothing inherently wrong with the SVG approach and it's more compatible as well.
Currently there is no alternative for complex animations like the animations you can create with Flash (eg. shape-tweens or animations with 3d or bones), and I personally I think Flash is the way to go if you want crossbrowser killer animation. The Flash IDE offers lots of animation features which are not implemented in any other current web based tool. HTML/css is very limited, since it does not fully support skew/rotation/perspective in all browsers and in HTML you cannot animate background images too. However you can create programmatic tweens (like motion-tweens) with Javascript. At this state of HTML you must be a bit hardcore programmer to get a serious DHTML animation and I think you have to deal with CSS sprites or other blitting techniques to get some performance. Beside animation, Flash offers filtering and blendmodes too, which you would like to use in great animations too.
You can use the animate() function from jQuery for very simple animations (move, fade, slide); you can change properties over time. For a lot of web applications; this could enough. But if you want to animate vectors or want frame based animations; Flash is currently the best choice.
PS. What is wrong with animated GIF's?
This might be interesting in the future. It is a flash to Html5 conversion tool form Adobe. Maybe there is a future on the web where the two technologies converge to a single purpose in stead of being two concurrent technologies side by side.
We may well agree that flash has some drawbacks, closed, slow technology. But I can not believe there is no knowledge in the flash source code, its developers and the large amount of users that could be helpful in the development of Html5. Flash is an easy to use environment for creating animations. Such an environment just does not exist for Html 5. So I believe there is room for flash and Html 5 together.
Edit
You should check out Adobe Edge Preview. a new tool from Adobe for creating rich HTML5 animations.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am designing a website using the MEAN stack, although there are numerous tutorials guiding how to go about the development of a web application using the MEAN stack, am not sure what is the best way to add animation to your application. Specifically, should all the animation just sit in the CSS and the html templates reference those classes. What about adding advanced animation features using the HTML5 canvas, what part of the project does it sit in. What is the most generic and cleanest way to add animation to your MEAN application, is ng-Animate in Angular the way to go about it ?
EDIT: What I specifically am looking to implement is an image of a box gift wrapped in a present with a ribbon hanging on the left side of it. Now I want a little boy/girl to drag the ribbon from left to right and unwrap the present. What is the best way to do this , that fits well with the MEAN stack?
This is a very broad question. It depends entirely on what kind of animations you hope to achieve.
Nonetheless, here are a few of my favourite libraries based on experience:
AOS (Animate on Scroll) -
It is a pure CSS3 driven animation library that animates HTML elements in lots of useful ways.
Demo: http://michalsnik.github.io/aos/
Code: https://github.com/michalsnik/aos
Implementation:
You can use a package manager (npm or bower) to install for use in your project. Or download the source code directly.
Spark Scroll -
A Javascript library that also handles scroll-based animations, as well as animations based on view-port visibility. Very powerful, and can be used to do things such as: draw borders on HTML elements when scrolled into view, trigger styling changes based on viewport visibility (ie. opacity), and many other things. Also, very customizable.
Demo: http://gilbox.github.io/spark-scroll/demo/
Code: https://github.com/gilbox/spark-scroll
Implementation:
Unfortunately, there is no native Javascript implementation for this library. Using Spark Scroll requires utilizing either ReactJS (Facebook) or Angular (Google).
Last but not least,
WOW.js -
Another Javascript library that handles a lot of different animations.
Demo: http://mynameismatthieu.com/WOW/
Code: https://github.com/matthieua/WOW
Implementation: http://mynameismatthieu.com/WOW/docs.html
Honestly, I suggest you edit your post and identify what exactly you're trying to accomplish. I will update this answer after you conduct some research with the resources I've provided and determine what animations you wish to implement.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm a beginner in web animations(canvas and svg). I have seen some work and examples in Chrome Experiments and am really excited to dive in. However, whenever I'm trying to do anything remotely decent or following any tutorial that seems a little bit interesting, the sheer amount javascript that has to be put in is proving to be a huge turn off.
For example, if I want to do any simple svg animation, I have to manually place the co-ordinates to achieve the effects. If there were any GUI tool to work with SVG or Canvas that would produce the initial movements(i.e. If I want to move an object from A to B, I'd like to do it by hand rather than counting the pixels) then the subsequent tweaking would be a lot easier. Are there any tools that help you achieve the effects? If not, what's the standard way to draw and animate svg graphics/canvas animation today?
Hype, Sencha Animator , Adobe Edge Animate are tool you might want to use if your purpose is to do animation with web technologies.
The problem with the link you provided is many of the exemples involve quite a lot of programming. It's not like Flash where you could do crazy stuffs with little programming knowledge. So you are not going to do crazy stuffs with any of the program I cited. By the way flash now exports to web techs so you might want to look into that.
You will have to write some javascript to make a decent animation with Canvas or SVG, as most of the previous software work with the DOM.
But you can cheat, a lot of agencies now use video (from After Effect) for animation directy, and you can manipulate video through canvas, do compositing etc ... the problem will be the size in that case.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
i'm about to choose between using an animated gif, flash or html5/js for a short animation to display a sequence of different images.
what are your thoughts on animated gifs? Are they dead? Should I use HTML5?
THanks for some interesting thoughts. :)
I'd say an important factor is the size of images you want to cycle. For very small images, perhaps sub-100px, an animated GIF might be ok. For anything larger, such as portfolio or item images, they're pretty much unacceptable. It's not so much about semantics or SEO, but rather image quality; GIFs simply don't look good for complex (e.g. photographic) images.
HTML5 doesn't come in to the equation, the markup will be almost identical between (X)HTML4 and HTML5. The javascript is the key part in cycling images, and there are a whole bunch that do all sorts of fancy things, depending on your needs. One of the most well-known jQuery plugins is the cycle plugin. It's very easy to implement.
To return to the idea of semantics and SEO, a GIF embedded in a page doesn't look like many images, so search engines won't know it, meaning any one performing an image search pertaining to what you're trying to display won't find your images. If you use a JS cycle approach, all of your images will be embedded separately in to the markup, and search engines will pickup on this. It does allow users to download the individual images, whereas with a GIF it would require either deconstruction in a GIF editor or a screenshot, but this will either be an advantage or hindrance, which you can consider accordingly.
To summarise: you almost certainly want to cycle to images with javascript.
I would definitely not use flash for something so simple, especially when it makes that part of your website inaccessible to devices such as the iPhone, iPad, etc. HTML5 is nice, but no browser supports 100% of it, and some of the mobile browsers are very lacking in support. A gif would probably be the easiest hassle free way of doing this.
Animated gifs are not good or bad. They are a tool that is widely supported. If they fix your problem you should not hesitate to use them.
Animated gifs would work everywhere.
Flash would be extremely heavyweight and creates a dependency to a flash.
HTML5 is nice, but is not supported by everyone yet.
Depends how complex it is... if it's only a short series of images simply use JavaScript without HTML5. You'd only have to write a few lines of code to produce the effect.
Animated gifs aren't dead. In fact, they're probably more popular now than they have ever been because of so many animated gif memes. That being said, animated gifs can be useful, but consider the advantages of a more dynamic format, that animated gifs can't recreate:
Transitions between images
Can be generated dynamically
File size might be lower
If you don't need those features, or anything else that Javascript provides, then use an animated gif.
As previous answers mention, if an animated GIF is all you need, then go for it.
Flash would be a slight case of overbombing.
If you want something slightly more flexible, you can still use js without bringing HTML5 into the mix, of course.
By making a simple jQuery slideshow out of it, you could buy yourself transition effects and an easy way to replace images. But again, if you don't need that, or that is overkill, then go with the GIF.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
What are advantages and disadvantages of creating games in 'pure' DOM as compared to using canvas?
canvas
pros :
could manipulate pixel and apply filter effect, so easy for image processing;
very efficient for small size but hundreds of elements in the game
many libraries for game could be found using canvas, such as box2dweb, and could make awesome games such as angry bird
cons:
it's stateless, so you have to record the states of the elements in the canvas, and handle the hit test by yourself.
low efficient for very large size but with one a few elements in the game
great ability, great responsibility. the freedom to draw, brings in you have to charge of all the drawing staff. Fortunately, there are many libraries there, such as cocos2d-html5, IvanK.
DOM
pros:
rendering by the browser, so less error-prone;
cons:
could do simple animation with CSS only, that makes the game not fluent;
no good for manipulating hundreds of DOM elements;
When you develop with Canvas you will have to use the GameLoop technique which is very painful because you will have to redraw all elements all the time.
When you develop with DOM you will be able to redraw only the objects that have been modified and will leave the hard work for the browser implementation.
If your game has a few modifications per frame then you can use the DOM, otherwise use the Canvas, please! It is so much faster!
With canvas you can perform operations such as rotation that you can't do with pure dome without use some "heavy" tricks. Anyway the dom is faster and you can use it in every browser without problems. You must think about what are you going to use in the game, if you will use only basic operations use the dom otherwise choose the canvas.
Look here: Why Canvas is not an obvious choice for web games.
I have an idea for a website which involves a canvas area which has no limit to its size. Basically you would be able to add items to the canvas (notes, photos whatever really). You would then be able to drag the canvas which would move those items along with the canvas until they disappear of screen. If you dragged the canvas back the other way they would appear again.
Question:
Which would be the best suited to this type of thing, Flash or Javacsript?
My main worries are the speed at which javascript/ flash could handle moving multiple items around on screen in the way discribed. Which language would handle better for a user on a slow machine.
UPDATE:
Thanks for your opnions guys, but to clarify what are the benefits of canvas over straight jQuery DOM manipulation? or visa versa. I've never used canvas before.
I don't think this is a question that will get you an objective answer - Flash developers will tell you Flash is better, web developers will say JavaScript. Trying to remain objective, I'd say that both technologies are suitable for what you describe, but have different advantages.
Flash will definitely render faster, even on slow machines, and is much richer graphically.
JavaScript is more accessible and works on a greater number of devices. Use a good JS framework though.
My initial thought would be to go with Javascript - if it's good enough for Google Maps, it's probably good enough for your app too.
Do you need to use canvas, what you're describing could be done with just javascript and the DOM. It would perform perfectly well unless there are a huge number of elements and it would be cross-browser compatible. For canvas you would require exCanvas to support IE which can sometimes slow things down.
The best way would surely be Javascript. And I would even say that you should reconsider the use of canvas. It sounds like it could be done in pure DHTML. In that way you wouldn't lose support for IE.
Consider using one of the javascript frameworks; Prototype or jQuery come to mind. It will ease your coding immensely. Given the development in javascript-engine performance (next versions of Webkit (Squirrelfish Extreme) and Mozilla (TraceMonkey) will be lightning fast) the worries about performance may be moot.
Also if you decide that you can't do it without canvas consider using John Resig's processing.js.
I'd say go with flash (or DOM if you don't need the extra punch). Here's my reasoning:
You can do cool transformations with canvas (skewing, rotations, gradient fade-ins in images, reflection effects, etc) that you can't with DOM. The downside is that doing these cool things is math heavy.
Canvas doesn't work in IE. IE's equivalent (VML) apparently has a root-access security hole.
The DOM has been around for longer than canvas and since it's more widely used (and depended upon), it's more optimized and polished than canvas.
The Flash community has a lot of good free components available that may already do what exactly you want.
Flash and DOM have a lot of good documentation and tutorials, canvas not so much.
Flash can do pretty much everything that the DOM and canvas can, plus audio, video and grabbing input from your web cam.