In this article we show image animation using a web application in TypeScript.
The following example shows an animation using a web application in TypeScript. In this example we create a Run function and this function calls an onload event of the window so when the page is loaded the Run function will be called. In the Run function, we call another function using the setTimeout function.
Step 1
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under "Visual C#".
Give the name of your application as "Image_Animation" and then click ok.
Step 2
After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts, js and css files and the aspx page.
![solution-explorer.jpg]()
Coding
app.ts
class Image_Animation
{
Run()
{
var img=(<HTMLImageElement>document.getElementById("image1"));
img.src = "Image1.jpg";
img.style.visibility = "visible";
setTimeout(() => { this.Run1(); }, 1000);
}
Run1()
{
var img=(<HTMLImageElement>document.getElementById("image2"));
img.src = "Image2.jpg";
img.style.visibility = "visible";
setTimeout(() => { this.Run2(); }, 1000);
}
Run2()
{
var img=(<HTMLImageElement>document.getElementById("image3"));
img.src = "Image3.jpg";
img.style.visibility = "visible";
setTimeout(() => { this.Run3(); }, 1000);
}
Run3()
{
var img=(<HTMLImageElement>document.getElementById("image4"));
img.src = "Image4.jpg";
img.style.visibility = "visible";
setTimeout(() => { this.Run4(); }, 1000);
}
Run4()
{
var img=(<HTMLImageElement>document.getElementById("image5"));
img.src = "Image5.jpg";
img.style.visibility = "visible";
setTimeout(() => { this.Run5(); }, 1000);
}
Run5()
{
var img=(<HTMLImageElement>document.getElementById("image6"));
img.src = "Image6.jpg";
img.style.visibility = "visible";
setTimeout(() => { this.Run6(); }, 1000);
}
Run6()
{
var img=(<HTMLImageElement>document.getElementById("image7"));
img.src = "Image7.jpg";
img.style.visibility = "visible";
setTimeout(() => { this.Stop(); }, 2000);
}
Stop()
{
var img1=(<HTMLImageElement>document.getElementById("image1"));
var img2=(<HTMLImageElement>document.getElementById("image2"));
var img3=(<HTMLImageElement>document.getElementById("image3"));
var img4=(<HTMLImageElement>document.getElementById("image4"));
var img5=(<HTMLImageElement>document.getElementById("image5"));
var img6=(<HTMLImageElement>document.getElementById("image6"));
var img7=(<HTMLImageElement>document.getElementById("image7"));
img1.style.visibility = "hidden";
img2.style.visibility = "hidden";
img3.style.visibility = "hidden";
img4.style.visibility = "hidden";
img5.style.visibility = "hidden";
img6.style.visibility = "hidden";
img7.style.visibility = "hidden";
setTimeout(() => { this.Run(); }, 1000);
}
}
window.onload = () =>
{
var obj = new Image_Animation();
obj.Run();
};
Image_Animation_Demo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image_Animation_Demo.aspx.cs" Inherits="Animation_Image.Image_Animation_Demo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="app.js"></script>
<style type="text/css">
#image {
height: 163px;
width: 164px;
}
#image0 {
height: 163px;
width: 165px;
z-index: 1;
left: 18px;
top: 62px;
position: absolute;
}
#image1 {
height: 163px;
width: 164px;
}
#image2 {
height: 163px;
width: 164px;
}
#image3 {
height: 163px;
width: 164px;
}
#image4 {
height: 163px;
width: 164px;
}
#image5 {
height: 163px;
width: 164px;
}
#Image2 {
height: 163px;
width: 164px;
}
#Image3 {
height: 163px;
width: 164px;
}
#Image4 {
height: 163px;
width: 164px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h3>Image Animation In TypeScript</h3>
<div id="div" style="height: 262px; width: 907px">
<img id="image1" alt="" style="height: 256px; width: 129px" />
<img id="image2" alt="" src="" style="height: 256px; width: 129px" />
<img id="image3" alt="" src="" style="height: 256px; width: 129px" />
<img id="image4" alt="" src="" style="height: 256px; width: 129px" />
<img id="image5" alt="" src="" style="height: 256px; width: 129px" />
<img id="image6" alt="" src="" style="height: 256px; width: 129px" />
<img id="image7" alt="" src="" style="height: 256px; width: 129px" />
</div>
<p> </p>
</div>
</form>
</body>
</html>
app.js
var Image_Animation = (function () {
function Image_Animation() { }
Image_Animation.prototype.Run = function () {
var _this = this;
var img = (document.getElementById("image1"));
img.src = "Image1.jpg";
img.style.visibility = "visible";
setTimeout(function () {
_this.Run1();
}, 1000);
};
Image_Animation.prototype.Run1 = function () {
var _this = this;
var img = (document.getElementById("image2"));
img.src = "Image2.jpg";
img.style.visibility = "visible";
setTimeout(function () {
_this.Run2();
}, 1000);
};
Image_Animation.prototype.Run2 = function () {
var _this = this;
var img = (document.getElementById("image3"));
img.src = "Image3.jpg";
img.style.visibility = "visible";
setTimeout(function () {
_this.Run3();
}, 1000);
};
Image_Animation.prototype.Run3 = function () {
var _this = this;
var img = (document.getElementById("image4"));
img.src = "Image4.jpg";
img.style.visibility = "visible";
setTimeout(function () {
_this.Run4();
}, 1000);
};
Image_Animation.prototype.Run4 = function () {
var _this = this;
var img = (document.getElementById("image5"));
img.src = "Image5.jpg";
img.style.visibility = "visible";
setTimeout(function () {
_this.Run5();
}, 1000);
};
Image_Animation.prototype.Run5 = function () {
var _this = this;
var img = (document.getElementById("image6"));
img.src = "Image6.jpg";
img.style.visibility = "visible";
setTimeout(function () {
_this.Run6();
}, 1000);
};
Image_Animation.prototype.Run6 = function () {
var _this = this;
var img = (document.getElementById("image7"));
img.src = "Image7.jpg";
img.style.visibility = "visible";
setTimeout(function () {
_this.Stop();
}, 2000);
};
Image_Animation.prototype.Stop = function () {
var _this = this;
var img1 = (document.getElementById("image1"));
var img2 = (document.getElementById("image2"));
var img3 = (document.getElementById("image3"));
var img4 = (document.getElementById("image4"));
var img5 = (document.getElementById("image5"));
var img6 = (document.getElementById("image6"));
var img7 = (document.getElementById("image7"));
img1.style.visibility = "hidden";
img2.style.visibility = "hidden";
img3.style.visibility = "hidden";
img4.style.visibility = "hidden";
img5.style.visibility = "hidden";
img6.style.visibility = "hidden";
img7.style.visibility = "hidden";
setTimeout(function () {
_this.Run();
}, 1000);
};
return Image_Animation;
})();
window.onload = function () {
var obj = new Image_Animation();
obj.Run();
};
//@ sourceMappingURL=app.js.map
Output
![Human-evolution-animation.gif]()