Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
146 lines (123 sloc) 4.16 KB
//Sample Code: Test Animation 3
import 'dart:html';
import 'dart:math';
import 'package:rikulo_ui/view.dart';
import 'package:rikulo_ui/gesture.dart';
import 'package:rikulo_ui/effect.dart';
import "package:rikulo_ui/html.dart";
String createColor(num x) {
return CssUtil.color((92 * x).toInt(), (115 * x).toInt(), (229 * x).toInt());
}
List<View> createCube(int size) {
View v = new View();
v.width = size;
v.height = size;
v.style.border = "2px solid #3D4C99";
v.style.borderRadius = "10px";
v.style.backgroundColor = createColor(1);
v.style.userSelect = "none";
v.style.zIndex = "10";
int s = (size - 4) ~/ 8;
View brow1 = new View();
View brow2 = new View();
brow1.width = brow2.width = s * 2;
brow1.height = brow2.height = 0;
brow1.top = brow2.top = (2.5 * s).toInt();
brow1.left = s;
brow2.left = s * 5;
brow1.style.borderBottom = brow2.style.borderBottom = "2px solid #FFFFFF";
v.addChild(brow1);
v.addChild(brow2);
View eye1 = new View();
View eye2 = new View();
eye1.width = eye2.width = eye1.height = eye2.height = 0;
eye1.top = eye2.top = 4 * s;
eye1.left = 2 * s - 4;
eye2.left = 6 * s - 4;
eye1.style.border = eye2.style.border = "4px solid #FFFFFF";
eye1.style.borderRadius = eye2.style.borderRadius = "4px";
v.addChild(eye1);
v.addChild(eye2);
View mouth = new View();
mouth.width = mouth.height = 0;
mouth.style.borderTop = "10px solid transparent";
mouth.style.borderBottom = "10px solid #FFFFFF";
mouth.style.borderLeft = mouth.style.borderRight = "6px solid transparent";
mouth.left = 4 * s - 6;
mouth.top = 5 * s;
v.addChild(mouth);
return [v, brow1, brow2];
}
View cube, brow1, brow2;
num sanity = 1;
void setSanity(num x) {
sanity = x;
cube.node.style.backgroundColor = createColor(sanity);
brow1.style.transform = "rotate(${((1 - x) * 30).toInt()}deg)";
brow2.style.transform = "rotate(${((x - 1) * 30).toInt()}deg)";
}
void main() {
final View mainView = new View()..addToDocument();
View box = new Section();
box.width = 500;
box.height = 500;
box.left = 48;
box.top = 48;
box.style.border = "2px dashed #CCCCCC";
mainView.addChild(box);
List<View> views = createCube(100);
cube = views[0];
cube.left = 250;
cube.top = 250;
brow1 = views[1];
brow2 = views[2];
mainView.addChild(cube);
final Rectangle range = new Rectangle(50, 50, 446 - 50, 446 - 50);
final Element element = cube.node;
final num deceleration = 0.0005;
Motion inertialMotion;
EasingMotion recoveryMotion;
new Dragger(element, snap: (Point ppos, Point pos) => Points.snap(range, pos),
start: (DraggerState dstate) {
if (inertialMotion != null)
inertialMotion.stop();
if (recoveryMotion != null)
recoveryMotion.stop();
}, end: (DraggerState dstate) {
final Point vel = dstate.elementVelocity;
num speed = Points.norm(vel);
if (speed == 0) {
final num initSanity = sanity, diffSanity = 1 - initSanity;
recoveryMotion = new EasingMotion((num x, MotionState state) {
setSanity(diffSanity * x + initSanity);
}, easing: (num x) => x * x)..run();
return;
}
Point unitv = Points.divide(vel, speed);
Point pos = DomUtil.position(element);
inertialMotion = new Motion(move: (MotionState mstate) {
int elapsed = mstate.elapsedTime;
pos += unitv * speed * elapsed;
if (pos.x < range.left || pos.x > range.right) {
unitv = new Point(-unitv.x, unitv.y);
speed *= 0.8;
setSanity(sanity * 0.8);
}
if (pos.y < range.top || pos.y > range.bottom) {
unitv = new Point(unitv.x, -unitv.y);
speed *= 0.8;
setSanity(sanity * 0.8);
}
pos = Points.snap(range, pos);
element.style.left = CssUtil.px(pos.x.toInt());
element.style.top = CssUtil.px(pos.y.toInt());
speed = max(0, speed - deceleration * elapsed);
return speed > 0;
}, end: (MotionState mstate) {
final num initSanity = sanity, diffSanity = 1 - initSanity;
recoveryMotion = new EasingMotion((num x, MotionState state) {
setSanity(diffSanity * x + initSanity);
}, easing: (num x) => x * x)..run();
})..run();
});
}