-
Notifications
You must be signed in to change notification settings - Fork 0
/
1-avatar.html
82 lines (62 loc) · 2 KB
/
1-avatar.html
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
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Wobble Drag</title>
<link rel="stylesheet" href="../../assets/template.css" type="text/css" />
<script src="../../assets/template.min.js"></script>
</head>
<body class="template">
<canvas id="canvas" width="800" height="600"></canvas>
<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
<script src="webgl-0.8.1.min.js"></script>
<script>
var stage = new createjs.SpriteStage("canvas");
var image = new Image();
image.onload = function() {
createPixels();
}
image.src = "Avatars/Lanny.png";
var m = new createjs.Point(),
kids = [],
container;
function createPixels() {
var ss2 = new createjs.SpriteSheet({
images:[image],
frames: {width:image.width,height:1,count:image.height}
});
container = new createjs.SpriteContainer(ss2);
container.vx = container.vy = 0;
stage.addChild(container);
for (var i= 0, l=image.height; i<l; i++) {
var sprite = new createjs.Sprite(ss2);
sprite.gotoAndStop(i);
sprite.regX = image.width/2;
sprite.vx = sprite.vy = 0;
container.addChild(sprite);
kids.push(sprite);
}
stage.on("stagemousemove", function(event) {
m.setValues(event.stageX, event.stageY);
});
}
function update(event) {
var target = m;
for (var i=0, l=kids.length; i<l; i++) {
var kid = kids[i];
kid.x += (target.x - kid.x) * 0.95;
kid.y += (target.y+1 - kid.y) * 0.95;
target = kid;
}
for (var i=0, l=kids.length-1; i<l; i++) {
var kid = kids[i];
var nextKid = kids[i+1];
kid.scaleY = (nextKid.y - kid.y);
}
stage.update();
}
createjs.Ticker.on("tick", update);
LabTemplate.setupStageResize(stage);
</script>
</body>
</html>