forked from Keyframes/Keyframes.Pathfinder
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathkeyframes.pathfinder.js
More file actions
99 lines (78 loc) · 2.66 KB
/
Copy pathkeyframes.pathfinder.js
File metadata and controls
99 lines (78 loc) · 2.66 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
(function() {
$.keyframe = $.extend($.keyframe, {
pathfinderOpts: {
bezierSteps: 100,
circleSteps: 100
},
bezierPath: function(kfro, p1, p2, p3, p4){
var opts = $.keyframe.pathfinderOpts;
if(p4 == null){
p4 = p1;
}
p1 = coord(p1[0],p1[1]);
p2 = coord(p2[0],p2[1]);
p3 = coord(p3[0],p3[1]);
p4 = coord(p4[0],p4[1]);
var points = {};
var step = 1 / opts.bezierSteps;
for (var i = 0; i <= 1.01; i += step){
var newpos = getBezier(i, p1, p4, p3, p2);
points[ (100 - Math.round(i * 100)) + '%' ] = { 'transform': 'translate(' + newpos.x + 'px,' + newpos.y + 'px)' };
}
return $.extend(kfro, points);
},
circlePath: function(kfro, center, radius){
var opts = $.keyframe.pathfinderOpts;
center = coord(center[0],center[1]);
var points = {};
var pieandahalf = 1.5 * Math.PI;
var notmuchpie = Math.PI / 180;
var step = 100 / opts.circleSteps;
var degreestep = 360 / opts.circleSteps;
for (var i = 0; i <= opts.circleSteps; ++i){
var degree = degreestep * i;
var radians = pieandahalf + degree * notmuchpie;
var newpos = getCirclePoint(radians, radius, center);
points[ Math.round(step * i) + '%' ] = { 'transform': 'translate(' + newpos.x + 'px,' + newpos.y + 'px)' };
}
for(step in kfro){
var rules = kfro[step];
for(newstep in points){
var newrules = points[newstep];
if(step == newstep){
if(newrules.transform && rules.transform){
points[newstep].transform = newrules.transform + ' ' + rules.transform;
break;
}
}
}
}
return $.extend(kfro, points);
}
});
function getCirclePoint(radians, radius, center) {
return {
x: (center.x + radius * Math.cos(radians)),
y: (center.y + radius * Math.sin(radians))
}
}
//====================================\\
// 13thParallel.org Beziér Curve Code \\
// by Dan Pupius (www.pupius.net) \\
//====================================\\
var coord = function (x,y) {
if(!x) var x=0;
if(!y) var y=0;
return {x: x, y: y};
}
function B1(t) { return t*t*t }
function B2(t) { return 3*t*t*(1-t) }
function B3(t) { return 3*t*(1-t)*(1-t) }
function B4(t) { return (1-t)*(1-t)*(1-t) }
function getBezier(percent,C1,C2,C3,C4) {
var pos = new coord();
pos.x = C1.x*B1(percent) + C2.x*B2(percent) + C3.x*B3(percent) + C4.x*B4(percent);
pos.y = C1.y*B1(percent) + C2.y*B2(percent) + C3.y*B3(percent) + C4.y*B4(percent);
return pos;
}
}).call(this);