I am using "smoothie charts" http://smoothiecharts.org/.
I'm trying to make the animation stop and restart, but all I can do is freeze the "viewing" image. The animation doesn't really stop. It seems to continue to run in the background?
Once I restart it, the entire chart jumps to actual time.
On "start" I need that animation to resume, from where it was paused.
How can I achieve this?
I'm new with to this and have been trying to figure it out for a week, but i'm stuck on this problem.
This is the code for animation:
SmoothieChart.AnimateCompatibility = (function() {
var requestAnimationFrame = function(callback, element) {
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
return window.setTimeout(function() {
callback(new Date().getTime());
}, 16);
};
return requestAnimationFrame.call(window, callback, element);
},
cancelAnimationFrame = function(id) {
var cancelAnimationFrame =
window.cancelAnimationFrame ||
function(id) {
clearTimeout(id);
};
return cancelAnimationFrame.call(window, id);
};
return {
requestAnimationFrame: requestAnimationFrame,
cancelAnimationFrame: cancelAnimationFrame
};
})();
And here is the original stop...
SmoothieChart.prototype.stop = function() {
if (this.frame) {
SmoothieChart.AnimateCompatibility.cancelAnimationFrame(this.frame);
delete this.frame;
}
};
This is the start function
SmoothieChart.prototype.start = function() {
if (this.frame) {
// We're already running, so just return
return;
}
// Make sure the canvas has the optimal resolution for the device's pixel ratio.
if (this.options.enableDpiScaling && window && window.devicePixelRatio !== 1) {
var canvasWidth = this.canvas.getAttribute('width');
var canvasHeight = this.canvas.getAttribute('height');
this.canvas.setAttribute('width', canvasWidth * window.devicePixelRatio);
this.canvas.setAttribute('height', canvasHeight * window.devicePixelRatio);
this.canvas.style.width = canvasWidth + 'px';
this.canvas.style.height = canvasHeight + 'px';
this.canvas.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
}
// Renders a frame, and queues the next frame for later rendering
var animate = function() {
this.frame = SmoothieChart.AnimateCompatibility.requestAnimationFrame(function() {
this.render();
animate();
}.bind(this));
}.bind(this);
animate();
};
Related
I'm trying to add a smooth scroll that functions properly on all browsers (but only IE11 and Edge for microsoft). The issue is that this script is completely breaking the scroll in Edge browsers.
I've included console logs which confirm that the script is calculating the mousewheel movement, however, there is no "visual" movement of the page.
new SmoothScroll(document, 120, 12);
function SmoothScroll(target, speed, smooth) {
if (target == document) {
target = document.documentElement || document.body.parentNode || document.body; // cross browser support for document scrolling
var moving = false;
var pos = window.pageYOffset;
target.addEventListener("mousewheel", scrolled, false);
target.addEventListener("DOMMouseScroll", scrolled, false);
}
function scrolled(e) {
e.preventDefault(); // disable default scrolling
var delta = e.delta || e.wheelDelta;
if (delta === undefined) {
//we are on firefox
delta = -e.detail;
}
delta = Math.max(-1, Math.min(1, delta)); // cap the delta to [-1,1] for cross browser consistency
pos += -delta * speed;
pos = Math.max(0, Math.min(pos, target.scrollHeight - target.clientHeight)); // limit scrolling
if (!moving) {
update();
}
}
function update() {
moving = true;
var delta = (pos - window.pageYOffset) / smooth;
console.log(window.pageYOffset);
if (window.navigator.userAgent.indexOf("Edge") > -1) {
window.pageYOffset += delta;
}
else {
target.scrollTop += delta;
}
console.log(Math.abs(delta));
if (Math.abs(delta) > 0.5) {
console.log("entered if");
requestFrame(update);
}
else {
moving = false;
}
}
var requestFrame = (function() {
console.log("request frame is triggered");
// requestAnimationFrame cross browser
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(func) {
window.setTimeout(func, 1000 / 50);
}
);
})();}
Why is it not working?
This may be because of the Event Loop.....beacuse in Edge, the questAnimationFrame happens AFTER rendering.
For more info see this excellent talk by Jake Archibald!
https://www.youtube.com/watch?v=cCOL7MC4Pl0
I have the following lines from a canvas sprite animation from Git.
I am just wondering how can I stop the animations once it ends the sprite.
window.requestAnimFrame = (function(callback) { // shim
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
function animate() { // Animation loop that draws the canvas
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clear the canvas
spriteMap.draw(context, 100, 100); // Draw the sprite
requestAnimFrame(animate); // Run the animation loop
}
https://github.com/IceCreamYou/Canvas-Sprite-Animations
Use cancelAnimationFrame() together with the request-id returned by requestAnimationFrame():
var reqId;
function animate() {
// ...
reqId = requestAnimFrame(animate); // returns request ID
}
Then to stop:
cancelAnimationFrame(reqId);
If you depend on the polyfill you will also have to include the polyfill for cancelAnimationFrame():
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
I have this JavaScript code for snow falling effect. It's working really nice,
but I decided to create a snow falling on web page text. I have tried, but not getting how to do it.
How to make snow fall on that "I love you" text? http://jsfiddle.net/DgrxX/22/
I have already seen in VB6 code where snow fall on text. If it is possible in Visual Basic 6 seven years ago, why not today in JavaScript or CSS3 or jQuery?
function vp(woh)
{
var viewportwidth;
var viewportheight;
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
if (woh == 'w')
{
return viewportwidth;
}
else if (woh == 'h')
{
return viewportheight;
}
else
{
return false;
}
}
function snowflake()
{
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.radius = Math.random()*2;
this.color = "white";
var tobefallingSpeed = Math.random() * 100;
this.fallingSpeed = tobefallingSpeed + 30;
}
function render()
{
ctx.clearRect(0,0,canvas.width, canvas.height);
for (b=0;b<snowflakes;b++)
{
sf[b].y+=0.4;
if(sf[b].y> canvas.height){
sf[b].y = 0;
}
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(sf[b].x,sf[b].y,sf[b].radius,sf[b].radius);
}
}
function main()
{
now = Date.now();
delta = now - then;
render();
then = now;
}
then = Date.now();
var int = self.setInterval(main,1);
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = vp('w');
canvas.height = vp('h');
document.body.appendChild(canvas);
var numberofSnowflakes = 100;
var sf = [];
for (i=0;i<numberofSnowflakes;i++)
{
sf[i] = new snowflake();
snowflakes = i;
}
Okay so I have seen a few answers but the asker wants the snow to be exclusively piling up on the text. Exact piling (according to the snow in background) would be really very difficult but I would like to suggest a (maybe complex) working method.
Make images.
A lots of them. With the text 'I love You' and contents of snow different in each. This maybe similar to creating picture frames from a video.
Define a div. Change your picture every x seconds, where x depends on number of images you have made.
You can use the following code for changing image:
function change_background( new_image_source ) {
var myimage = $( '#myimage' );
myimage.attr( 'src', new_image_source );
setTimeout( function () {
change_background( 'new image source here' );
}, 100);
}
This code will change the image after 0.1. This can hopefully give you the required effect but you will need to make a lot of pictures that differ slightly. I would make lots of pictures for my gf (if I had one).
I'm animating some image presentation using
setInterval(function() {
$('.img').css('someprop', randomValue());
}, 2000);
..where .img has css transitions enabled, hence animation.
When i go over to another tab for a few minutes and come back to this tab, the animations go crazy for 5-6 seconds and catch up with everything at once.
Is there a way for me to stop the accumulation of undisplayed animations while the tab is not visible? What's the right approach to solve this? I understand the browser stops the animations while a window is not rendering, for performance reasons, but is there a way for me to tell it not to try to catch up with everything it "missed out on" ?
window.requestAnimationFrame does exactly what you want, only animating/running when the tab is "active" (visible).
See the MDN page on requestAnimationFrame for more details.
Example code by Paul Irish, posted here for posterity (here's a link to his explanation page)
// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/
var canvas, context, toggle;
init();
animate();
function init() {
canvas = document.createElement( 'canvas' );
canvas.width = 512;
canvas.height = 512;
context = canvas.getContext( '2d' );
document.body.appendChild( canvas );
}
function animate() {
requestAnimFrame( animate );
draw();
}
function draw() {
var time = new Date().getTime() * 0.002;
var x = Math.sin( time ) * 192 + 256;
var y = Math.cos( time * 0.9 ) * 192 + 256;
toggle = !toggle;
context.fillStyle = toggle ? 'rgb(200,200,20)' : 'rgb(20,20,200)';
context.beginPath();
context.arc( x, y, 10, 0, Math.PI * 2, true );
context.closePath();
context.fill();
}
I am trying to benchmark how many times iOS natively can draw between frame refresh compared to HTML5/JavaScript.
Using this JavaScript I get a number for how may times the browser can draw during the 33 ms (30 Hz):
var ctx = document.getElementById('canvas').getContext('2d');
var img = document.getElementById('img');
var draw = function(load) {
var angle = 0.01;
ctx.clearRect(0,0,400,400);
ctx.save();
ctx.translate(200,200);
for (var i=0; i<load; i++) {
ctx.rotate(angle);
ctx.drawImage(img, 0, 0);
}
ctx.restore();
};
var t, previousTime;
var drawLoad = 1;
var slowCount = 0;
var maxSlow = 10;
var requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame;
t = previousTime = Date.now();
var tick = function() {
var maximumFrameTime = 1000/30; // 30 FPS
t = Date.now();
var elapsed = t - previousTime;
previousTime = t;
if (elapsed < maximumFrameTime || slowCount < maxSlow) {
if (elapsed < maximumFrameTime) {
drawLoad+=10;
} else {
slowCount++;
}
draw(drawLoad);
requestAnimationFrame(tick);
} else {
// found maximum sustainable load at 30 FPS
document.getElementById('res').innerHTML = ("could draw "+(drawLoad)+" in " + maximumFrameTime + " ms");
}
};
requestAnimationFrame(tick);
See http://jsfiddle.net/tbhZs/117/ for complete code with HTML-markup.
I have fiddled around in objective-c without finding a fair way to get a comparable number. Is there a way to produce a comparable benchmark natively in iOS?
Try instruments tool. you can measure the frames per socond via the core animation instrument.