Animation Sample - xkp/Doc GitHub Wiki

Application definition:

    <application source="anim-test.xs" width="640" height="400" title="">
        <resources>
            <resource src="images/img.png"/>
        </resources>
        
        <sequence id="test_anim">
            <at time="0">
                <animate property="img1.x">
                    <keys>
                        <key t="0" value="20"/>
                        <key t="1" value="150"/>
                        <key t="4" value="20"/>
                    </keys>
                </animate>
                <animate property="img1.y" from="20" to="150" in="3"/>
            </at>
            
            <at time="2">
                <run sequence="grow"/>
            </at>
            
            <sequence id="grow">
                <at time="0">
                    <animate property="img1.width"  from="10" to="200" in="5"/>
                    <animate property="img1.height" from="10" to="200" in="5"/>
                </at>
            </sequence>
            
            <when expr="img1.width >= 100">
                <run method="shrink"/>
            </when>

            <when expr="img1.width <= 30">
                <run sequence="grow"/>
            </when>
        </sequence>
      
        <img id="img1" src="images/img.png" x="0" y="0" width="30" height="30"/>
    </application>

Code:

on img1.click()
{
	test_anim.start();
}

Output:

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/jquery.utils.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/ms-ui.js"></script>
<script type="text/javascript" src="js/ms-streamer.js"></script>
<script type="text/javascript" src="js/ms-state.js"></script>

<script type="text/javascript">			
var g_ui;
var g_elapsed = 0;
var g_delta = 0.0;
var g_canvas;

function default_interpolate(a, b, t)
{
    return a + (b - a)*t;
}

function start(resolution)  
{  
	var start = new Date().getTime();  
	function update()  
	{  
		var now   = new Date().getTime();
		g_delta  = now - g_elapsed;  
		g_elapsed = now; 
              
		var context = g_canvas.getContext('2d');
		g_ui.update(g_delta, context);
        
        update_sequences(g_delta);
              
		window.setTimeout(update, resolution);  
	}  
	window.setTimeout(update, resolution);  
}  

var g_sequences = [];
function update_sequences(delta)
{
    
	for(var i = 0; i < g_sequences.length; i++)
	{
		var seq = g_sequences[i]
		if (seq.running)
			seq.update(delta);
	}
}

window.onload = function() 
{
	var drawingCanvas = document.getElementById("myCanvas");
        
	g_canvas = drawingCanvas;
	if (drawingCanvas && drawingCanvas.getContext)
	{
		var client =
		{
			width: 640,
			height: 400,
			canvas: drawingCanvas
		};
            
		var streamer = new ms.streamer.Streamer();
		var ui = new ms.ui.Manager(client, streamer);
		g_ui = ui;

		var images = 
		[
            'images/img.png',
		];
      
		ui.load_images(images, function()
		{
			drawingCanvas.onmousemove = function(ev)
			{
				ui.mouse_move(ev.clientX, ev.clientY);                  
			};

			drawingCanvas.onmousedown = function(ev)
			{
				ui.mouse_down(ev.clientX, ev.clientY);                  
			};

			drawingCanvas.onmouseup = function(ev)
			{
				ui.mouse_up(ev.clientX, ev.clientY);                  
			};


			var application = ui.root;
            var img1 = application.newImage('images/img.png');
            img1.rect(0, 0, 30, 30);
            img1.click = function()
            {    
                test_anim.start();
            };
        
            application.rect(0, 0, 640, 400);
        
            var test_anim = new ms.state.Sequence();
            g_sequences.push(test_anim);
            var ____i1 = new ms.state.Interpolator(
                "x", 
                default_interpolate,
                function(value)
                {
                    img1.set_x(value);
                },
                [
                    {t: 0, value: 20},
                    {t: 1, value: 150},
                    {t: 4, value: 20},
                ]);
            test_anim.addAction(img1, "x", new ms.state.State(0, 4, ____i1));                    
            
            var ____i2 = new ms.state.Interpolator(
                "y", 
                default_interpolate,
                function(value)
                {
                    img1.set_y(value);
                },
                [
                    {t: 0, value: 20},
                    {t: 3, value: 150},
                ]);
            test_anim.addAction(img1, "y", new ms.state.State(0, 3, ____i2));                    
            
            var grow = new ms.state.Sequence();
            g_sequences.push(grow);
            var ____i3 = new ms.state.Interpolator(
                "width", 
                default_interpolate,
                function(value)
                {
                    img1.set_width(value);
                },
                [
                    {t: 0, value: 10},
                    {t: 5, value: 200},
                ]);
            grow.addAction(img1, "width", new ms.state.State(0, 5, ____i3));                    
            
            var ____i4 = new ms.state.Interpolator(
                "height", 
                default_interpolate,
                function(value)
                {
                    img1.set_height(value);
                },
                [
                    {t: 0, value: 10},
                    {t: 5, value: 200},
                ]);
            grow.addAction(img1, "height", new ms.state.State(0, 5, ____i4));                    
            
    
			start();
			ui.draw(drawingCanvas.getContext('2d'));
		});
	}
}
</script>

</head>

<body>

	<canvas id="myCanvas" width="640" height="400">

		<p>Your browser doesn't support canvas.</p>

	</canvas>

</body>

</html>
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️