Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Raphaël educational changes #1

Merged
merged 2 commits into from

2 participants

@DmitryBaranovskiy

No description provided.

@zgrossbart
Owner

Hi Dmitry,

Thank you so much for getting this working. I need to dig in deeper to see how this works. Did I miss something simple, or was I taking a fundamentally wrong approach?

Before I pull it in, I'm seeing an issue. It's very slow when I run this on my machine. My fan turns on immediately and the rotation is pretty choppy. Is that to be expected, or is there a way to improve it?

By the way... I'm a giant Raphael fan. I just finished a very large project with it last year and I loved it.

Thanks,
Zack

@DmitryBaranovskiy

I would say fundamentally wrong approach. I found it to be a bit slow on Safari, but in Chrome it work pretty fast.
I send you another pull request where I concatenated teeth into one path making it much faster. It’s all depends on number of DOM elements at the end of the day.

@zgrossbart zgrossbart merged commit 615aa3c into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
40 raphael_animation.js
@@ -1,33 +1,31 @@
-jQuery(document).ready(function() {
- var paper = Raphael('raphaelAnimation', 200, 200);
-
- var back = paper.rect(10, 10, 180, 180);
- back.attr({
- 'fill': 'white',
- 'stroke': 'white'
- });
- back.click(function() {
- main.raphaelAnimationStopped = !main.raphaelAnimationStopped;
- });
+Raphael('raphaelAnimation', 200, 200, function () {
+ var paper = this,
+ anim;
-
- var c = paper.ellipse(100, 100, 10, 10);
+ var c = paper.circle(100, 100, 10);
c.attr({
- 'fill': '#00aeef',
- 'stroke': '#00aeef'
+ fill: '#00aeef',
+ stroke: 'none'
});
var r = paper.rect(60, 60, 80, 80);
r.attr({
'stroke-width': 2,
- 'stroke': '#00aeef'
+ stroke: '#00aeef',
+ fill: "#000",
+ "fill-opacity": 0
+ });
+ r.click(function () {
+ if (anim) {
+ r.stop();
+ } else {
+ r.animate(a);
+ }
+ anim = !anim;
});
r.rotate(60);
- setInterval(function() {
- if (!main.raphaelAnimationStopped) {
- r.rotate(6);
- }
- }, 33);
+ var a = Raphael.animation({transform: "...r360"}, 3000).repeat(Infinity);
+
});
View
12 raphael_circle.js
@@ -1,8 +1,6 @@
-jQuery(document).ready(function() {
- var paper = Raphael('raphaelCircle', 200, 200);
- var c = paper.ellipse(100, 100, 10, 10);
- c.attr({
- 'fill': '#00aeef',
- 'stroke': '#00aeef'
+Raphael('raphaelCircle', 200, 200, function () {
+ this.circle(100, 100, 10).attr({
+ fill: '#00aeef',
+ stroke: 'none'
});
-});
+});
View
16 raphael_gears.html
@@ -7,21 +7,6 @@
<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="raphael_gears.js" type="text/javascript" charset="utf-8"></script>
- <script type="text/javascript" src="http://use.typekit.com/ran8aft.js"></script>
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
-
- <script type="text/javascript">
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-26336682-1']);
- _gaq.push(['_trackPageview']);
-
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
- </script>
-
</head>
<body>
<div id="canvas" style="height: 650px; width: 960px; background-color: #ececec;"></div>
@@ -40,6 +25,5 @@
</p>
</div>
- <a href="https://github.com/zgrossbart/3gears" id="forkme"><img style="position: absolute; top: 8px; left: 819px; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
</body>
</html>
View
63 raphael_gears.js
@@ -21,6 +21,7 @@ var scale = 15;
var toothSize = 28;
var clockwise = false;
+
g = {
stopped: false,
create: function(/*Point*/ p, /*int*/ teeth, /*string*/ c, /*int*/ speed, /*boolean*/ clockwise) {
@@ -30,47 +31,49 @@ g = {
var d = teeth * scale;
- var outerCircle = g.paper.ellipse(p.x, p.y, d / 2, d / 2);
+ var outerCircle = g.paper.circle(p.x, p.y, d / 2);
outerCircle.attr({
- 'fill': c,
- 'stroke': c
+ fill: c,
+ stroke: c
});
outerCircle.click(function() {
g.stopped = !g.stopped;
});
- var innerCircle = g.paper.ellipse(p.x, p.y, d / 8, d / 8);
+ var innerCircle = g.paper.circle(p.x, p.y, d / 8);
innerCircle.attr({
- 'fill': 'white',
- 'stroke': 'white'
+ fill: 'white',
+ stroke: 'white'
});
innerCircle.click(function() {
g.stopped = !g.stopped;
});
- var st = g.drawTeeth((d / 2) - 5, d / scale, c, p);
+ var st = g.drawTeeth((d / 2) - 5, d / scale, c, p),
+ an = Raphael.animation({transform: "r360," + [p.x, p.y]}, 5000);
- setInterval(function() {
- if (!g.stopped) {
- st.rotate(6, 100, 100);
- }
- }, 66);
+ var path = "";
+ for (var i = 0, ii = st.length; i < ii; i++) {
+ path += Raphael.mapPath(st[i].attr("path"), st[i].matrix);
+ }
+ st.remove();
+ st = g.paper.path(path).attr({
+ stroke: "none",
+ fill: c
+ });
+
+ st.animate(an.repeat(Infinity));
},
drawTeeth: function(/*int*/ d, /*int*/ plots, /*color*/ c, /*Point*/ p) {
- var increase = Math.PI * 2 / plots;
+ var increase = 360 / plots;
var angle = 0;
var st = g.paper.set();
for (var i = 0; i < plots; i++) {
- var t = 2 * Math.PI * i / plots;
- var x = Math.round((d + (toothSize / 2)) * Math.cos(t));
- var y = Math.round((d + (toothSize / 2)) * Math.sin(t));
-
var tooth = g.createTooth(c);
- tooth.translate(p.x + x, p.y + y);
- tooth.rotate(((180 / Math.PI) * angle) + 90);
+ tooth.transform("t" + [p.x, p.y - (d + (toothSize / 2))] + "R" + [angle, p.x, p.y]);
st.push(tooth);
angle += increase;
}
@@ -79,19 +82,19 @@ g = {
},
createTooth: function(/*color*/ c) {
-
- var path = 'M ' + (-(toothSize / 4) + 2) + ' ' + (-(toothSize / 2)) + // upper left
- 'L ' + ((toothSize / 4) - 6) + ' ' + (-(toothSize / 2)) + // upper right
- 'L ' + (toothSize / 4) + ' ' + (-(toothSize / 2) + 8) + // upper right bump
- 'L ' + (toothSize / 2) + ' ' + (toothSize / 2) + // bottom right
- 'L ' + (-(toothSize / 2)) + ' ' + (toothSize / 2) + // bottom left
- 'L ' + (-(toothSize / 2) + 4) + ' ' + (-(toothSize / 2) + 8); // upper left bump
+ var t2 = toothSize / 2;
+ var path = 'M ' + (-t2 / 2 + 2) + ' ' + (-t2) + // upper left
+ 'L ' + (t2 / 2 - 6) + ' ' + (-t2) + // upper right
+ 'L ' + (t2 / 2) + ' ' + (-t2 + 8) + // upper right bump
+ 'L ' + t2 + ' ' + t2 + // bottom right
+ 'L ' + (-t2) + ' ' + t2 + // bottom left
+ 'L ' + (-t2 + 4) + ' ' + (-t2 + 8); // upper left bump
path += ' z';
return g.paper.path(path).attr({
fill: c,
- 'stroke': c,
- 'stroke-width': 1});
+ stroke: "none"
+ });
}
};
@@ -100,8 +103,8 @@ window.onload = function () {
var back = g.paper.rect(0, 0, 960, 650);
back.attr({
- 'fill': '#ececec',
- 'stroke': '#ececec'
+ fill: '#ececec',
+ stroke: 'none'
});
back.click(function() {
Something went wrong with that request. Please try again.