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
|
var map, wingr,wingl,muscler, musclel, stringr, stringl, cavity, flight_path, flight_path_length, last_point, step;
var prev_step = 0
step = 0;
map = Snap('#left-bits');
wingr = map.select('#wingr');
wingrbbox = wingr.getBBox();
wingl = map.select('#wingl');
winglbbox = wingl.getBBox();
musclel = map.select('#musclel');
musclelbbox = musclel.getBBox();
muscler = map.select('#muscler');
musclerbbox = muscler.getBBox();
stringl = map.select('#stringl');
stringlbbox = stringl.getBBox();
stringr = map.select('#stringr');
stringrbbox = stringr.getBBox();
cavity = map.select('#cavity');
cavitybbox = cavity.getBBox();
flight_path = map.select('#path');
flight_path_l = Snap.path.getTotalLength(flight_path);
last_point = flight_path.getPointAtLength(flight_path_length);
console.log('step', step, 'final', flight_path_l)
function angle(n) {
return Math.random() * (n * 2) + n;
}
let cb = function() {
prev_step = step
step = step + parseInt(pas.innerHTML) * 10;
if (step > flight_path_l) prev_step = step = 0
$('#pas').text(step)
$('#prev_step').text(prev_step)
$('#step').text(step)
$('#next_step').text(flight_path_l)
console.log('pas', pas.innerHTML)
Snap.animate(prev_step, step, function(val) {
//console.log('pas');
step = val;
moveToPoint = Snap.path.getPointAtLength( flight_path, val );
x = moveToPoint.x ;
y = moveToPoint.y ;
// console.log('animating ' + x + ' ' + y);
wingr.transform('translate(' + x + ',' + y + ') '+', '+wingrbbox.cx+', '+wingrbbox.cy);
wingl.transform('translate(' + x + ',' + y + ')' + (moveToPoint.alpha - 90)+', '+winglbbox.cx+', '+winglbbox.cy);
cavity.transform('translate(' + x + ',' + y + ') rotate('+ (moveToPoint.alpha - angle(-10))+', '+cavitybbox.cx+', '+cavitybbox.cy+')');
musclel.transform('translate(' + x + ',' + y + ') rotate('+ (moveToPoint.alpha - angle(20))+', '+musclelbbox.cx+', '+musclelbbox.cy+')');
muscler.transform('translate(' + x + ',' + y + ') rotate('+ (moveToPoint.alpha - angle(30))+', '+musclerbbox.cx+', '+musclerbbox.cy+')');
stringr.transform('translate(' + x + ',' + y + ') rotate('+ (moveToPoint.alpha - angle(-20))+', '+stringrbbox.cx+', '+stringrbbox.cy+')');
stringl.transform('translate(' + x + ',' + y + ') rotate('+ (moveToPoint.alpha - angle(9))+', '+stringlbbox.cx+', '+stringlbbox.cy+')');
},5000, mina.easeout);
}
document.addEventListener("requestMove", cb,false);
|
