Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Circle-anim 3</title>
<style type="text/css" media="screen">
#circle-anim {
margin-top:-55px;
margin-left:-55px;
height:110px;
width:110px;
position:absolute;
left: 0;
top: 0;
background: transparent url(circle-anim.png) no-repeat left top;
}
#circle-container {
height: 600px;
width: 600px;
position: relative;
left: 250px;
top: 150px;
}
#jj-circle {
height: 400px;
width: 400px;
position:absolute;
background: transparent url(circle.gif) no-repeat left top;
margin: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
// * jQuery css bezier animation support -- Jonah Fox
// * version 0.0.1
// * Released under the MIT license.
// * Modified Dec 10 2011 for external reference to degree position of arcs - jscheuer1
// var path = $.path.bezier({
// start: {x:10, y:10, angle: 20, length: 0.3},
// end: {x:20, y:30, angle: -20, length: 0.2}
// })
// $("myobj").animate({path: path}, duration)
;(function($){
$.path = {}
var V = {
rotate: function(p, degrees) {
var radians = degrees * 3.141592654 / 180
var c = Math.cos(radians), s = Math.sin(radians)
return [c*p[0] - s*p[1], s*p[0] + c*p[1] ]
},
scale: function(p, n) {
return [n*p[0], n*p[1]]
},
add: function(a, b) {
return [a[0]+b[0], a[1]+b[1]]
},
minus: function(a, b) {
return [a[0]-b[0], a[1]-b[1]]
}
}
$.path.bezier = function( params ) {
params.start = $.extend({angle: 0, length: 0.3333}, params.start )
params.end = $.extend({angle: 0, length: 0.3333}, params.end )
this.p1 = [params.start.x, params.start.y];
this.p4 = [params.end.x, params.end.y];
var v14 = V.minus(this.p4, this.p1)
var v12 = V.scale(v14, params.start.length)
v12 = V.rotate(v12, params.start.angle)
this.p2 = V.add(this.p1, v12)
var v41 = V.scale(v14, -1)
var v43 = V.scale(v41, params.end.length)
v43 = V.rotate(v43, params.end.angle)
this.p3 = V.add(this.p4, v43)
this.f1 = function(t) { return (t*t*t); }
this.f2 = function(t) { return (3*t*t*(1-t)); }
this.f3 = function(t) { return (3*t*(1-t)*(1-t)); }
this.f4 = function(t) { return ((1-t)*(1-t)*(1-t)); }
/* p from 0 to 1 */
this.css = function(p) {
var f1 = this.f1(p), f2 = this.f2(p), f3 = this.f3(p), f4=this.f4(p)
var x = this.p1[0]*f1 + this.p2[0]*f2 +this.p3[0]*f3 + this.p4[0]*f4;
var y = this.p1[1]*f1 + this.p2[1]*f2 +this.p3[1]*f3 + this.p4[1]*f4;
return {top: y + "px", left: x + "px"}
}
}
$.path.arc = function(params) {
for(var i in params)
this[i] = params[i]
this.dir = this.dir || 1
while(this.start > this.end && this.dir > 0)
this.start -= 360
while(this.start < this.end && this.dir < 0)
this.start += 360
this.css = function(p) {
var a = this.start * p + this.end * (1 - p)
this.degs = a; // create reference to degree position of arc for external use - jscheuer1
a = a * 3.1415927 / 180 // to radians
var x = Math.sin(a) * this.radius + this.center[0]
var y = Math.cos(a) * this.radius + this.center[1]
return {top: y + "px", left: x + "px"}
}
};
$.fx.step.path = function(fx){
var css = fx.end.css(1 - fx.pos)
for(var i in css)
fx.elem.style[i] = css[i];
}
})(jQuery);
</script>
<script>
jQuery(function($){
var $acircle = $('#circle-anim'), rate = 12000, darc = new $.path.arc({
center : [458, 358],
radius : 186,
start : 179,
end : 180,
dir : -1
}),
totaldeg = darc.start - darc.end, ostart = darc.start;
function fullarc(){
$acircle.animate({
path : darc
}, {
duration: rate,
easing : 'linear',
complete: fullarc
});
}
fullarc();
$acircle.add('#jj-circle').hover(function(){
$acircle.stop();
}, function() {
$acircle.animate({
path : $.extend(darc, {start: darc.degs})
}, (darc.degs - darc.end) * rate / totaldeg, 'linear', function(){darc.start = ostart; fullarc();});
}
);
});
</script>
</head>
<body>
<div id="content">
<div id="circle-container">
<div id="jj-circle"> </div>
</div>
<div id="circle-anim" ></div>
</div>
</body>
</html>
Code:
jQuery(function($){
var $acircle = $('#circle-anim'), rate = 12000, darc = new $.path.arc({
center : [458, 358],
radius : 186,
start : 1 . . .
I initially went from 3000 to 6000, which is really the same speed (2 arcs at 3000 @ traversing half the distance combined into one arc traversing all of it at 6000 are the same). I doubled that to 12000 because the small circle was, in my opinion moving so fast that it was losing its shape to an unacceptable degree.
Animate along path - pause-resume - on hover
Reply With Quote
Yes it was going a bit to fast, I agree with you. It wasn't that important how fast it was going at that moment, because I didn't get it to function as I wanted it to function. As we say in Dutch: "You've placed the dot(point) on the i." 
Bookmarks