I'm making a simple prototype in HTML5 canvas, and want to basically draw a slingshot. When someone clicks down and pulls back, I want the rubber band to stretch. It doesnt have to be perfect.
Any suggestions on how I can do this? I'm not too certain how to mimic the effect :)
thanks
It would be easier to do with SVG than with canvas, especially using a library like Raphaël. See this demo – that is not very different from what you want to do. If you use Raphaël then it will be much more portable than canvas, because it will work even on IE 6 (using VML).
Update:
(Fixed the Fiddle example - it had some outdated dependencies - now it's fixed)
Ok, see THIS DEMO. It should be pretty much what you explained or at least it should get you started. Here is the code:
var R = Raphael(10, 10, 400, 400);
var l = R.path("M100 200L200 200L300 200");
l.attr({
stroke: 'red',
'stroke-width': 4
});
var c = R.circle(200, 200, 10).attr({
fill: 'white',
stroke: 'red',
'stroke-width': 4
});
function move(dx, dy) {
var x = 200 + dx, y = 200 + dy;
this.attr({cx: x, cy: y});
l.attr({path: "M100 200L"+x+" "+y+"L300 200"});
}
function start() {
c.stop();
l.stop();
}
function end() {
this.animate({cx: 200, cy: 200}, 2000, "elastic");
l.animate({path: "M100 200L200 200L300 200"},
2000, "elastic");
}
c.drag(move, start, end);
a lot of these kind of behaviours have been implemented and written about in the Flash community. Krazy dad has some nice articles + code on elasticity.
http://www.krazydad.com/bestiary/bestiary_springyTitles.html
Related
I'm using jQueryRotate to rotate my image.
Basically I want the image to start at 0 then rotate to -20 degrees then to 15 degrees then keep going back and forth between these 2 values and continue this infinitely.
So basically a little image shake, would this be possible with jQueryRotate or would you recommend another jquery plugin? Would need something with IE9 support.
Sorry forgot to post the code, but I was able to come up with a solution.
function() {
var rotation = function() {
$("#img1").rotate({
duration: 1000,
angle: 0,
animateTo: -15,
callback: function() {
$(this).rotate({
duration: 1000,
angle: -15,
animateTo: 0,
callback: function() {}
});
}
});
}
rotation();
I'm trying to put an image inside a circle but no success. This is my code:
//Elms.raphael() is my stage.
var circle = Elms.raphael().circle( 730, 200, 0 );
circle.attr( { fill : 'url(myImg.jpg)' } );
setTimeout( function()
{
circle.animate( { 'stroke' : '#000', r : 90, 'stroke-width' : '5' }, 300 );
}, 250 );
Instead of put the image in the circle It get colored with black ("#333"). I also tried to make an image-object but still doesn't work.
A little help please?
Another way to do, if you have separate image and want to bring it over you circle object.
This makes the whole image appear with smaller size that fits you circle. DEMO
var r = new Raphael(10,10, 500, 500);
var c = r.circle(200, 200, 80).attr({stroke: 'red', "stroke-width" : 3});
var img = r.image("http://www.eatyourcareer.com/wp-content/uploads/2012/06/ok-256x2561.png", 100, 105, 200, 200);
Here's a link to how I created a circle with an image in it:
jsfiddle
var paper = Raphael(document.getElementById("test"), 320, 200);
var circle = paper.circle(100, 100, 50);
circle.attr({
fill: 'url(http://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-220px-SIPI_Jelly_Beans_4.1.07.tiff.jpg)'
});
I left the animate out entirely to keep it as basic as I could. It seems to work fine and is very similar to your code. If you cannot see it in the example it may be a browser issue.
Im a beginner to Raphael. Can anyone show me how I can do a donut/radial chart, with animation, similar to these.
http://dribbble.com/shots/670348-Segment-Graphs
Im working at it now. So far Ive got this far. I will update as I make progress. My sumbling block right now is animating a change in color for the outer ring.
window.onload = function () {
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle1 = paper.circle(50, 40, 40);
var circle2 = paper.circle(50, 40, 20);
circle2.attr("fill", "#fff");
circle2.attr("stroke", "#fff");
circle1.attr("fill", "#336699");
circle1.attr("stroke", "#fff");
}
Credits:
On the raphael website there is an example that uses arcs. There is another question on stackoverflow with a similar topic: drawing centered arcs in raphael js. The accepted answer there has a simplified and commented version of the most important parts of the code, plus there is a jsfiddle link showing the code in action: http://jsfiddle.net/Bzdnm/2/
So what I did: I took the code from the linked question, combined it with eve, another javascript library made by the creator of RaphaelJS and what I got was this: http://jsfiddle.net/cristighenea/aP7MK/
At a glance:
1.after the arc is created we rotate it 180 degrees and begin animating it:
theArc.rotate(180, 100, 100).animate({
arc: [100, 100, amount, 100, 40]
}, 1900, function(){
//animation finish callback goes here
});
2.using eve we bind an event to *raphael.anim.frame.**
3.each time the event is fired we update the text in the middle with the new value of the arc
If you have any questions let me know
I am animating a circle using Raphael. When the circle is large I get artifacts around the circle when its moving. It seems to be something of a clipping / redraw region issue and wondered if there was a work around?
It seems to be OK in firefox (if a little jerky) and appears very reliably in Chrome. It also is exacerbated by using opacity on the fill property i.e. rgba(255,0,0,0.7)
Here is a jsFiddle showing the issue. Just click around the paper on the right to move the circle.
Code:
var discattr = {
fill: "#666",
stroke: "none",
width: 35
};
var paper = Raphael("svgcontainer", 400, 400);
circle = paper.circle(150, 150, discattr.width, discattr.width).attr({
stroke: "none",
fill: "rgba(255,0,0,0.7)"
});
var coords = []
var animateCircle = function(coords) {
if (!coords.length) return;
var nextCoords = coords.shift()
var move = Raphael.animation(nextCoords, 500, "linear", function() {animateCircle(coords)});
circle.animate(move);
}
$("#svgcontainer").on("mouseup", function(e) {
coords.push({cx: e.pageX, cy: e.pageY})
animateCircle(coords);
});
Buffering is a technique used to prevent animation artifacts (tearing, as JamWaffles points out). If you look at the answer to this Stack Overflow question you'll find information about an SVG setting to turn on buffering, but so far it doesn't appear to be supported by major browsers.
Is it possible using the raphael.js or paper.js to draw a line with an arrow that moves with some animation morphing?
It's not entirely clear what you're trying to do, but the short answer to your question is almost certainly yes. I can only speak for RaphaelJS, but it's easy to tell Raphael to morph from one path to the other. Consider this fiddle and that fiddle, both of which rely on using raphael's animate function to modify the path element over time, often in conjunction with one or more transforms. The only caveat is that raphael's built-in path morphing doesn't always unwind in the way you might expect or desire. But in an attempt to animate something like the figure above, I'd do something like this:
var canvas = Raphael( 0, 0, 320, 240 );
var path1 = "M0,120 h300 l10,-10 l10,10 h100";
var path2 = "M0,120 h100 l10,-10 l10,10 h300";
var path = canvas.path( path1 ).attr( { stroke: 'black', fill: 'none', 'stroke-width': 1 } );
path.animate( { path: path2, stroke: 'red', 'stroke-width': 3 }, 3000, function()
{ path.animate( { path: path1, stroke: 'black', 'stroke-width': 1 }, 3000 ); } );
You can see this in action here.