refactor animations

- update walking animation
- add running, rotating animation
- add natural speed for animations

src/animation.js

@@ -15,6 +15,7 @@ class AnimationHandle {
 		this.speed = this._speed = 1.0;
 		this._lastChange = null;
 		this._lastChangeX = null;
+		this._animationNaturalSpeed = animation.naturalSpeed;
 	}
 	play(player, time) {
 		if (this._lastChange === null) {
@@ -31,7 +32,7 @@ class AnimationHandle {
 		}
 		if (this.paused === false) {
 			let dt = time - this._lastChange;
-			let x = this._lastChangeX + this.speed * dt;
+			let x = this._lastChangeX + (this.speed * this._animationNaturalSpeed) * dt;
 			invokeAnimation(this.animation, player, x);
 		}
 	}
@@ -55,17 +56,74 @@ class CompositeAnimation {
 	}
 }
 
-let WalkAnimation = (player, time) => {
+let WalkingAnimation = (player, time) => {
 	let skin = player.skin;
-	let angleRot = time + Math.PI / 2;
 
-	// Leg Swing
-	skin.leftLeg.rotation.x = Math.cos(angleRot);
-	skin.rightLeg.rotation.x = Math.cos(angleRot + (Math.PI));
+	// Leg swing
+	skin.leftLeg.rotation.x = Math.sin(time) * 0.3;
+	skin.rightLeg.rotation.x = Math.sin(time + Math.PI) * 0.3;
 
-	// Arm Swing
-	skin.leftArm.rotation.x = Math.cos(angleRot + (Math.PI));
-	skin.rightArm.rotation.x = Math.cos(angleRot);
+	// Arm swing
+	skin.leftArm.rotation.x = Math.sin(time + Math.PI) * 0.5;
+	skin.rightArm.rotation.x = Math.sin(time) * 0.5;
+	let basicArmRotationZ = Math.PI * 0.02;
+	skin.leftArm.rotation.z = Math.cos(time) * 0.03 + basicArmRotationZ;
+	skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.03 - basicArmRotationZ;
+
+	// Head shaking with different frequency & amplitude
+	skin.head.rotation.y = Math.sin(time / 2) * 0.2;
+	skin.head.rotation.x = Math.sin(time / 3) * 0.15;
+
+	// Always add an angle for cape around the x axis
+	let basicCapeRotationX = Math.PI * 0.06;
+	player.cape.rotation.x = Math.sin(time / 1.5) * 0.06 + basicCapeRotationX;
 };
 
-export { CompositeAnimation, WalkAnimation, invokeAnimation };
+WalkingAnimation.naturalSpeed = 5;
+
+let RunningAnimation = (player, time) => {
+	let skin = player.skin;
+
+	// Leg swing with larger amplitude
+	skin.leftLeg.rotation.x = Math.cos(time + Math.PI) * 1.3;
+	skin.rightLeg.rotation.x = Math.cos(time) * 1.3;
+
+	// Arm swing
+	skin.leftArm.rotation.x = Math.cos(time) * 1.5;
+	skin.rightArm.rotation.x = Math.cos(time + Math.PI) * 1.5;
+	let basicArmRotationZ = Math.PI * 0.1;
+	skin.leftArm.rotation.z = Math.cos(time) * 0.1 + basicArmRotationZ;
+	skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.1 - basicArmRotationZ;
+
+	// Jumping
+	player.position.y = Math.cos(time * 2);
+	// Dodging when running
+	player.position.x = Math.cos(time) * 0.15;
+	// Slightly tilting when running
+	player.rotation.z = Math.cos(time + Math.PI) * 0.01;
+
+	// Apply higher swing frequency, lower amplitude,
+	// and greater basic rotation around x axis,
+	// to cape when running.
+	let basicCapeRotationX = Math.PI * 0.3;
+	player.cape.rotation.x = Math.sin(time * 2) * 0.1 + basicCapeRotationX;
+
+	// What about head shaking?
+	// You shouldn't glance right and left when running dude :P
+};
+
+RunningAnimation.naturalSpeed = 13;
+
+let RotatingAnimation = (player, time) => {
+	player.rotation.y = time;
+};
+
+RotatingAnimation.naturalSpeed = 1;
+
+export {
+	CompositeAnimation,
+	invokeAnimation,
+	WalkingAnimation,
+	RunningAnimation,
+	RotatingAnimation
+};

src/skinview3d.js

@@ -1,3 +1,9 @@
 export { SkinObject, CapeObject, PlayerObject } from "./model";
-export { SkinViewer, SkinControl } from "./viewer";
-export { invokeAnimation, CompositeAnimation, WalkAnimation } from "./animation";
+export { SkinViewer, MouseControl } from "./viewer";
+export {
+	invokeAnimation,
+	CompositeAnimation,
+	WalkingAnimation,
+	RunningAnimation,
+	RotatingAnimation
+} from "./animation";

types/animation.d.ts

@@ -29,3 +29,5 @@ export class CompositeAnimation implements IAnimation {
 }
 
 export const WalkAnimation: AnimationFn;
+export const RunningAnimation: AnimationFn;
+export const RotatingAnimation: AnimationFn;