Solved

Look at this Flash vs Html5 version of the same animation.  Is Html5 slower?

Posted on 2014-03-07
7
401 Views
Last Modified: 2014-03-18
I obtained from a Flash developer an animation done in both Flash and Html5:

Flash version:   http://goo.gl/YK0sS6
Html5 version:  http://goo.gl/5hCvDW

On my Android default browser on my Galaxy Note II  (quad-core 1.6Ghz) the Flash version is totally fluid while the Html5 version has a very low framerate.

Are the html5 animations with many objects/layers renownedly slower than Flash or there's something wrong in the Htm5 code?
0
Comment
Question by:lucavilla
  • 4
  • 2
7 Comments
 
LVL 33

Expert Comment

by:Big Monty
ID: 39912740
Using Chrome on my PC, both seem to play at the same speed. Have you tried multiple platforms for your testing?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39912755
You would be hard pressed to notice a difference.
Is this a flash to canvas conversion?  As it is throwing a lot of styles around.
0
 

Author Comment

by:lucavilla
ID: 39914002
Gary, I think that the developer re-made it from scratch in Html5 because he changed some effects...
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39914042
No, looks like he transferred it to Edge and then made the HTML5 version from it.
And however that coded it has made a dogs dinner of it.
I'm sure you managed to get some of the samples from the other question working so you should have been able to see how fluid it should be even with really complicated computations going on.
This is not complicated animations.
I don't know if I could even debug the code to see where the bottleneck is coming from.
(typical bloated Adobe code)

I think the main problem is that Edge isn't using the canvas object but normal HTML elements which is kinda not really HTML5
0
 
LVL 58

Expert Comment

by:Gary
ID: 39914049
Here's an example using just a few lines of css.
http://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/#

Repeat this 20, 30 +++ times, wouldn't matter

This is how your 'flash' should be done - it would be ultra smooth and not start hogging memory/cpu like it currently does.

edit
That is not going to work on your IE9 - but at 3% global usage and dropping  you shouldn't be worrying about it
0
 

Author Comment

by:lucavilla
ID: 39914586
> Repeat this 20, 30 +++ times, wouldn't matter
How do you know it?

If you look at my html current animation you'll see that it uses 13% (my PC) CPU too, but it's not smooth, it's 10-15fps... while the Flash versions seems 25-30fps at 13-15% CPU too.

Seems like CPU usage in a single Chrome page never goes above 13-15% on my Windows 7, Core i7 PC, like if it were an external limitation...
0
 
LVL 58

Expert Comment

by:Gary
ID: 39914673
Chrome jumps to about 70% cpu and FF to 100% from idle.
Memory on both increase about 200mb

On a dual core - not everyone has an i7 ;o)
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Find out what you should include to make the best professional email signature for your organization.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question