html5-animation
Foundation HTML5 Animation with JavaScript example code and book exercises.
Foundation HTML5 Animation with JavaScript foundation html5 animation with javascript, by billy lamberta and keith peters, covers everything that you need to know to create dynamic, scripted animations using the html5 canvas.
I am just trying to understand why the hell window.requestAnimationFrame is accepting the second parameter as an element, what is the reason behind that?
I am curious to know the underlying execution for this function....
Source: (StackOverflow)
In a test application i have a canvas with a simple rectangle on it. The method draw is called every 100ms.
as you can see from the code i'm using the Mousewheel to scale everything. What happens now is, that everything is scaled, but i.e. when the rectangle is at 10px,10px and i have the mouse right over it the rectangle is not under the mouse anymore after scaling. (Which is of course right because all units are scaled up to.
But what i want to is, that the mouseposition is the "center of the zooming action" like in google maps so the content which is under the mouse before scaling, is under the mouse afterwards as well. I made a few attemps with translating, but i can't figure out, how to do that.
Thanks in advance.
Here's my code:
<script type="text/javascript">
var scroll = 0;
var scale = 1.0;
/** This is high-level function.
* It must react to delta being more/less than zero.
*/
function handle(delta) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
scroll = delta;
if(scroll > 0)
{
scale += 0.2;
}
if(scroll < 0)
{
scale -= 0.2;
}
}
/** Event handler for mouse wheel event.
*/
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
} else if (event.detail) { /** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta)
handle(delta);
/** Prevent default actions caused by mouse wheel.
* That might be ugly, but we handle scrolls somehow
* anyway, so don't bother here..
*/
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
}
/** Initialization code.
* If you use your own event management code, change it as required.
*/
if (window.addEventListener)
/** DOMMouseScroll is for mozilla. */
window.addEventListener('DOMMouseScroll', wheel, false);
/** IE/Opera. */
window.onmousewheel = document.onmousewheel = wheel;
var drawX = 0;
var drawY = 0;
var overX = 0;
var overY = 0;
function startCanvas()
{
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
setInterval(draw,100);
}
function draw()
{
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,window.innerWidth,window.innerHeight);
ctx.save();
ctx.scale(scale,scale);
ctx.fillRect(drawX,drawY,20,20);
//ctx.translate(-scale,-scale);
ctx.restore();
ctx.font="20pt Arial";
ctx.fillText(scale+":"+drawX,0,150);
}
function canvasClick(event)
{
console.log(event.layerX+"/"+scale);
drawX = event.layerX/scale;
drawY = event.layerY/scale;
}
function canvasOver(event)
{
console.log("over");
overX = event.layerX;
overY = event.layerY;
}
</script>
Source: (StackOverflow)
I've been trying to figure out how Google animate their logos since the particle explosion one a while back, and today they have a chemistry set to celebrate the 200th anniversary of Robert Bunsen.
I'm assuming this is HTML5 (I'm using Firefox 4, Chrome and Safari 5), but can anyone confirm if so and whether there are any good tutorials on how to do those types of animations?
Source: (StackOverflow)
I'm planning an interface to show lots of little widgets (drawn on a <canvas>), which may move around (for example in a list that gets sorted different ways with jQuery). The number of widgets may be anywhere between 10 and 100.
I could do this with one big canvas and just paint lots of widgets in the correct place. Or I could have lots of <canvas>ses in <li>s. Are canvasses light-weight enough for this kind of thing? Is there a compelling performance reason to chose one or the other?
Source: (StackOverflow)
What is the most accurate way to measure framerates, i.e. FPS, in modern HTML5 browsers? I'm specifically interested in FPS for Canvas animations.
http://weblogs.mozillazine.org/roc/archives/2010/11/measuring_fps.html will tell you that trying to measure framerate by counting how often your setTimeout runs is not accurate. The browser can run your Timeout callback multiple times between screen paints.
Turns out Mozilla has a window.mozPaintCount https://developer.mozilla.org/en/DOM/window.mozPaintCount available, which should provide an accurate FPS. However, this only works for Mozilla.
There's an open issue for Chrome for something similar: http://code.google.com/p/chromium/issues/detail?id=65348
A manual way to check for hardware accelerated FPS in Chrome is to grab the Chrome Beta channel (as of posting date) and go to about:flags and turn on FPS Counter. However, on a Mac, acceleration only turns on when using WebGL. So, no way to check FPS for Canvas on Chrome for Mac.
What are other strategies for accurately measuring HTML5 FPS?
Thanks!
Source: (StackOverflow)
I'm interested in doing some more flash-like animation in either, or a combination of HTML5/JQuery.
One of the ideas floating around is of flying birds, character animation and 'tween'-like animation sequences. I'm a flash dev by background so all of this is second nature via Flash's timeline based motion tween system so i'm wondering just what is possible with new emerging technologies like HTML5 Canvas, CSS3 and jQuery? How adept are these at tween like animation? What's a good starting point to read up on?
For example the flying birds at http://www.thewildernessdowntown.com/ are amazing, they appear to be 3d, variable direction, speed, rotation, flap, speed. In Flash could achieve this with relative ease, creating set piece animations as movieclips, generating these on the stage and moving them around in tweenlite at various speeds or even in PV3D but i've next to no idea how this would be achieved on the canvas.
So in short, ideas on how the above was achieved, good reading material on this type of animation outside of flash and any general tips you might have would be much appreciated.
Thanks
Source: (StackOverflow)
I am trying to make a dropdown effect for one of my background images. I was able to do it using css3 but it's not complete.
The effect is supposed to be a curtain that drops down then sort of bounces back up a little. The problem with css3 is that I don't know how to do to transitions on the same property because the last one overrides the previous ones.
Here's my code:
ul#nav li a {
/* ADDS THE DROPDOWN CURTAIN TO THE LINKS BUT HIDDEN OFF SCREEN */
background: url(images/drape2.png) 0px -149px no-repeat;
/* CSS3 transitions */
-moz-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
}
ul#nav li a:hover {
/* Action to do when user hovers over links */
background-position: 0px 0px; /* make drape appear, POOF! */
background-position: 0px -10px; /* make drape appear, POOF! */
}
Any help would be much appreciated.
Source: (StackOverflow)
i am using ImpactJS to create a game on HTML5 and JS, when a animation is running, is it possble at any frame to reverse the animation frame flow (not flipping) ? I used rewind(), it only gets back to the first frame, is there any reverse()?
Source: (StackOverflow)
If I define a canvas and draw few shapes onto it, then how can I pinpoint each of the shape or image so as to declare events and other properties on the each shape. Consider I have a Rectangle and a triangle. SO can I have some mechanism so as to define them as specific entity and can I deal with them individually. I know about KineticJS but I would like to implement this functionality on my own(For learning purpose). Can anyone pinpoint the way to do it. Or may be an algorithmic approach??
Source: (StackOverflow)
How do I overwrite an HTML5 canvas arc? I presumed this code would work but it leaves a border around it despite the fact that its exactly the same values and just a different colour.. Is there a border property I'm missing??
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id="surface" width="300" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('surface');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(100, 100, 20, 0, Math.PI * 2, true);
ctx.fill();
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(100, 100, 20, 0, Math.PI * 2, true);
ctx.fill();
</script>
</body>
</html>
Source: (StackOverflow)
I have a flash animation I am trying to convert to HTML5. Now I have taken out all the images. For example in the hand animation, I have taken images of all hand images. I have made the canvas with the base drawing but I don't know how to replace those images frame by frame.
function draw(){
var canvas = document.getElementById('canvas');
if(canvas.getContext){
// canvas animation code here:
var ctx = canvas.getContext('2d');
var lhs = new Image();
lhs.src = "images/left_hnd_1.png";
lhs.onload = function(){
ctx.drawImage(lhs, 293, 137);
}
} else {
// canvas unsupported code here:
document.getElementById('girl').style.display = "block";
}
}
Now I have three more frame for this image. left_hnd_2.png, left_hnd_3.png & left_hnd_4.png. I would've used one image but the difference in frames is way too much for it to be done with one image. How can I animate this with the time differences I want.
Any ideas would be greatly appreciated. Thanks!
Source: (StackOverflow)
Is there a way to detect 3G and 2G connections on mobile phones and handheld devices?
Like If I want to deliver High-end Website when user is on 3G and Highly optimized version if user is on 2G.
Source: (StackOverflow)
Is there a way, either through the HTML5 canvas/video APIs or a JavaScript library to take canvas images (exported through canvas.toDataURL or something similar) and stitch them together to make a video in the browser?
Source: (StackOverflow)
I'm having a problem preloading HTML5 audio content and then using what I have in cache rather than attempting to redownload the audio every time I try to replay it.
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungFuPanda2_tj/
The experience is suppose to be that when someone clicks on the banner, it pops up an ad with a loading bar. THe loading bar is loading all the images necessary for the animation. In the meantime, the audio is also getting loaded via audio tags already on in the DOM (which is fine). After all the images are loaded, the loading bar disappears and the user can continue on. There are 4 buttons on the bottom of the screen that they can click. Clicking one of them plays the audio file and images do a flipbook-style animation thats synced to the audio.
Audio Tags:
<audio id="mmviperTrack" src='tigress.mp3'></audio>
<audio id="mmmantisTrack" src='viper.mp3'></audio>
<audio id="mmtigressTrack" src='kungfu3.mp3'></audio>
<audio id="mmcraneTrack" src='crane.wav'></audio>
Play Button Event Listeners:
button.addEventListener('click',function(){
if ( f.playing ) return false;
f.playing = true;
button.audio.play();
},false);
button.audio.addEventListener('playing', function(){
animate();
}, false);
The problem is, in javascript, everytime I click play(), it reloads the audio file and then plays it. I can't seem to get it to load the audio once in the beginning and go off of whats stored in memory rather than try to reload the audio every single time I click the button.
I've tried experimenting with the preload and autobuffer properties, but it seems that mobile safari ignores those properties, because no matter what I set them too, the behavior is always the same. I've tried experimenting with source tags and different file formats... nothing.
Any ideas?
Source: (StackOverflow)