Animation Creation v0.1

<!DOCTYPE html>
<html>
<head>
<script>
var requestAnimationFrame =
window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame;

var cancelAnimationFrame =
window.cancelAnimationFrame||
window.webkitCancelRequestAnimationFrame||
window.webkitCancelAnimationFrame||
window.mozCancelRequestAnimationFrame||
window.mozCancelAnimationFrame||
window.oCancelRequestAnimationFrame||
window.oCancelAnimationFrame||
window.msCancelRequestAnimationFrame||
window.msCancelAnimationFrame;


function GameLoop(draw,calc)
{
 var newTime = Date.now();
 var time = 0;
 var calculate = calc||function(){};
 var draw = calc||function(){};
 var stopped = false;
 var paused = false;
 var animation= function()
 {
  if(!stopped)
  {
   oldTime = newTime;
   if(!paused)
   {
    calculate();
   }
   draw();
   newTime = Date.now();
   time=this.newTime-this.oldTime;
   animationFrame = requestAnimationFrame(animation);
  }
 };
 this.start = function(d,c)
 {
  if(d)draw = d;
  if(c)calculate = c;
  paused = false;
  animationFrame = requestAnimationFrame(animation);
 };
 this.stop = function()
 {
  cancelAnimationFrame(animationFrame);
 };
}

</script>
<script>
function MouseHandle(node,MEF,obj)
{
 var events = "mousedown|mousemove|mouseout|mouseover|mouseup|mousewheel|click|dblclick".split("|");
 this.pos = {start:false,current:false,end:false};
 this.stage = -1;
 this.down = false;
 this.obj = obj;
 this.MEF = MEF;
 for(var a=0; a<events.length; a++)
 {
  node["on"+events[a]] = this.MEF;
 }
 node.Handle = {};
 for(var a in this)
 {
  node.Handle[a] = this[a];
 }
}
function MouseArgs(params)
{
 var events = "mousedown|mousemove|mouseout|mouseover|mouseup|mousewheel|click|dblclick".split("|");
 this.start = new Point(-1,-1);
 this.end = new Point(-1,-1);
 this.down = false;
 this.obj = params;
 this.timestamp = {};
 for(var a in events)
 {
  this.timestamp[a] = false;
 }
}
/* Example Function
function meHandler(event)
{
 switch(event.type)
 {
  case "mousewheel":

  break;
  case "mousedown":

  break;
  case "mousemove":

  break;
  case "mouseup":

  break;
  case "mouseover":

  break;
  case "mouseout":

  break;
  case "click":

  break;
  case "dblclick":

  break;
 }
}
*/
</script>
<script>
function View()
{
 this.pos = {x:0,y:0};
 this.Z = 0;
 this.zoom = 1;
 this.scale = 1.1;
 this.Zoom = function(delta,x,y)
 {
  var X = x-this.pos.x;
  var Y = y-this.pos.y;
  var scale = this.scale;
  if(delta>0) this.Z++;
  else
  {
   this.Z--;
   scale = 1/scale;
  }
  this.zoom = Math.pow(this.scale, this.Z);
  this.pos.x+=X-scale*X;
  this.pos.y+=Y-scale*Y;
 }
}
</script>
<style>
*
{
 font-family:Calibri;
}
#canvas,#display
{
 position:absolute;
 width:50%;
 top:0px;
 bottom:0px;
 border:1px solid;
}
#canvas{left:0px;}
#display{right:0px;}
canvas
{
 background-image:url('opaque.png');
 background-size:10px 10px;
}
body,#canvas,#display
{
 min-height:850px;
}

#keyFrames
{
 overflow-y:scroll;
 overflow-x:hidden;
 position:relative;
 width:100%;
 height:auto;
 background-color:#EEE;
 text-align:right;
}
.keyFrame
{
 position:absolute;
 top:inherit;height:inherit;
 border-left:1px solid #000;
 -webkit-user-select:none;
}
.animation
{
 height:20px;
 border-top:1px solid;
 width:100%;
}
#framePos
{
 align:center;
 z-index:1000000000000;
 position:absolute;
 left:0%;
 top:0;
 height:100%;
 width:2px;
 background-color:#000;
 cursor:pointer;
}
#tridown
{
 width:0px;
 height:0px;
 border-left:5px solid transparent;
 border-right:5px solid transparent;
 border-top:20px solid #00F;
 margin-left:-4px;
 margin-top:-2px;
 opacity:0.5;
 cursor:inherit;
}
#square
{
 width:20px;
 height:20px;
 background-color:#00F;
 margin-left:-9px;
 border-radius:0px 0px 10px 10px;
 opacity:0.5;
}
</style>
</head>
<body>
<div id="canvas">
<table width="100%" height="100%">
<tr align="center">
<td valign="center">Canvas<br>
<canvas id="cvs" width="800" height="600"></canvas>

<div id="keyFrames" unselectable onselectstart="event.preventDefault();return false;">
Animation Length<input type="number" min="1" value="10000" oninput="ChangeAniLength(this.value)"/>
<div id="frameDisp"><br><br></div>
<div id="framePos" title="Frame {0}"><div id="square"></div><div id="tridown"></div></div>

</div>
<script src="animation.js"></script>
<script>
var sprite =
{
 PointA:[0,250,777,1003,1500,2500,2600,2700,2800,2900,3000,4000,4500,4750,6000,6100,6110,6500,7000,8000,9000],
 PointB:[0,1000,2000,3000,4000,5000,6000,7000,8000,9000],
 PointC:[0,250,777,1003,1500,2500,2600,2700,2800,2900,3000,4000,4500,4750,6000,6100,6110,6500,7000,8000,9000],
 PointD:[0,1000,2000,3000,4000,5000,6000,7000,8000,9000],
 PointE:[0,250,777,1003,1500,2500,2600,2700,2800,2900,3000,4000,4500,4750,6000,6100,6110,6500,7000,8000,9000],
 PointF:[0,1000,2000,3000,4000,5000,6000,7000,8000,9000]
}
for(var s in sprite)
{
 var a = AddAnimation(sprite,s);
 a.title = s;
 for(var b=0; b<sprite[s].length; b++)
 {
  AddKeyFrame(sprite[s][b],a,sprite,s,b)
 }
}
</script>

</td>
</tr>
</table>
</div>

</div>


<div id="display">
<div style="margin-top:-100px;">
<table width="100%" height="100%">
<tr align="center">
<td valign="center">Preview<br>
<canvas id="preview" width="800" height="600"></canvas>
</td>
</tr>
</table>
</div>
</body>
<script>
function Point(x,y,width)
{
 this.width=width||3;
 this.x = x;
 this.y = y;
 this.draw = function(G,view)
 {
  G.beginPath();
  G.moveTo(this.x*view.zoom+view.pos.x+this.width,this.y*view.zoom+view.pos.y);
  G.arc(this.x*view.zoom+view.pos.x,this.y*view.zoom+view.pos.y,this.width,0,2*Math.PI);
  G.stroke();
 }
 this.draw2 = function(G)
 {
  G.beginPath();
  G.moveTo(this.x+this.width,this.y);
  G.arc(this.x,this.y,this.width,0,2*Math.PI);
  G.stroke();
 }
}

function Animation(start,end,type,params)
{
 for(var a in params)
 {
  this[a] = params[a];
 }
 this.aniLen = end-start;
 this.start = start;
 this.type = type;
 this.calc = function(time)
 {
  var t = ((time-this.start)/this.aniLen)%1;
  var dx = 0;
  var dy = 0;
  if(this.point)
  {
   dx = (this.point.end.x-this.point.start.x);
   dy = (this.point.end.y-this.point.start.y);
  }
  switch(this.type)
  {
   case Animation.Linear:
    return new Point(this.point.start.x+t*dx,this.point.start.y+t*dy);
   break;
   case Animation.Sine:
    var dt = Math.sin(t*Math.PI*2)*0.5+0.5;
    return new Point(this.point.start.x+dt*dx,this.point.start.y+dt*dy);
   break;
   case Animation.Cosine:
    var dt = Math.cos(t*Math.PI*2)*0.5+0.5;
    return new Point(this.point.start.x+dt*dx,this.point.start.y+dt*dy);
   break;
   case Animation.Tangent:
    var dt = Math.tan(t*Math.PI*2)*0.5+0.5;
    return new Point(this.point.start.x+dt*dx,this.point.start.y+dt*dy);
   break;
   case Animation.Bezier:
    var t1 = 1-t;
    var pt=[t1*t1*t1,t1*t1,t1,1];
    var tt=[1,3*t,3*t*t,t*t*t];
    for(var a=0; a<4; a++)
    {
     dx+=pt[a]*tt[a]*this.points[a].x;
     dy+=pt[a]*tt[a]*this.points[a].y;
    }
    return new Point(dx,dy);
   break;
   case Animation.Other:
    return this.Function(t);
   break;
  }
 }
 this.update = function(params)
 {
  for(var a in params)
  {
   this[a] = params[a];
  }
 }
}
Animation.Linear=0;
Animation.Sine=1;
Animation.Cosine=2;
Animation.Tangent=3;
Animation.Bezier=4;
Animation.Other=5;


function CanvasMouseEvent(event)
{
 this.Handle.pos.current = new Point(event.offsetX,event.offsetY);
 switch(event.type)
 {
  case "mousewheel":
   event.preventDefault();
   this.Handle.obj.view.Zoom(event.wheelDelta,this.Handle.pos.current.x,this.Handle.pos.current.y);
   redraw();
  break;
  case "mousedown":
   this.Handle.pos.start = new Point(event.offsetX-this.Handle.obj.view.pos.x,event.offsetY-this.Handle.obj.view.pos.y);
   this.Handle.pos.end = new Point(event.offsetX-this.Handle.obj.view.pos.x,event.offsetY-this.Handle.obj.view.pos.y);
   this.Handle.down = true;
   event.preventDefault();
  break;
  case "mousemove":
   if(this.Handle.down)
   {
    this.Handle.obj.view.pos.x = this.Handle.pos.current.x-this.Handle.pos.start.x;
    this.Handle.obj.view.pos.y = this.Handle.pos.current.y-this.Handle.pos.start.y;
    this.Handle.pos.end = new Point(event.offsetX,event.offsetY);
    redraw();
   }
  break;
  case "mouseup":
   this.Handle.down = false;
   this.Handle.pos.end = new Point(event.offsetX,event.offsetY);
  break;
 }
}


function PreviewMouseEvent(event)
{
 this.Handle.pos.current = new Point(event.offsetX,event.offsetY);
 switch(event.type)
 {
  case "mousewheel":
   event.preventDefault();
   this.Handle.obj.view.Zoom(event.wheelDelta,this.Handle.pos.current.x,this.Handle.pos.current.y);
  break;
  case "mousedown":
   this.Handle.pos.start = new Point(event.offsetX-this.Handle.obj.view.pos.x,event.offsetY-this.Handle.obj.view.pos.y);
   this.Handle.pos.end = new Point(event.offsetX-this.Handle.obj.view.pos.x,event.offsetY-this.Handle.obj.view.pos.y);
   this.Handle.down = true;
   event.preventDefault();
  break;
  case "mousemove":
   if(this.Handle.down)
   {
    this.Handle.obj.view.pos.x = this.Handle.pos.current.x-this.Handle.pos.start.x;
    this.Handle.obj.view.pos.y = this.Handle.pos.current.y-this.Handle.pos.start.y;
    this.Handle.pos.end = new Point(event.offsetX,event.offsetY);
   }
  break;
  case "mouseup":
   this.Handle.down = false;
   this.Handle.pos.end = new Point(event.offsetX,event.offsetY);
  break;
 }
}


function Part(start,end,type,params)
{
 for(var a in params)
 {
  this[a] = params[a];
 }
 this.anim = new Animation(start,end,type,params);
 this.update = function(params)
 {
  for(var a in params)
  {
   this[a] = params[a];
  }
 }
 this.calc = function(time,view)
 {
  var raw = this.anim.calc(time);
  return new Point(raw.x*view.zoom+view.pos.x,raw.y*view.zoom+view.pos.y);
 }
}
function Sprite()
{
 this.update = function(params)
 {
  for(var a in params)
  {
   this[a] = params[a];
  }
 }
}

function redraw()
{
 t = frame.value/frame.max;
 var G = cvs.getContext("2d");
 G.clearRect(0,0,cvs.width,cvs.height);
}

var totalTime = 0;
function dispDraw()
{
 var G = preview.getContext("2d");
 G.clearRect(0,0,cvs.width,cvs.height);
 totalTime+=Template.time;
}

function dispCalc()
{

}

var view = new View();
var preView = new View();
var cHandle = new MouseHandle(cvs,CanvasMouseEvent,{view:view});
var pHandle = new MouseHandle(preview,PreviewMouseEvent,{view:preView});
var Template = new GameLoop();


redraw();
Template.start(dispDraw,dispCalc);

</script>
</body>
</html>