Image Of Animation Using Web Application In TypeScript

Introduction

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 unload 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.

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: 163 px;
width: 164 px;
}
# image0 {
height: 163 px;
width: 165 px;
z - index: 1;
left: 18 px;
top: 62 px;
position: absolute;
}
#
image1 {
height: 163 px;
width: 164 px;
}
#
image2 {
height: 163 px;
width: 164 px;
}
#
image3 {
height: 163 px;
width: 164 px;
}
#
image4 {
height: 163 px;
width: 164 px;
}
#
image5 {
height: 163 px;
width: 164 px;
}
#
Image2 {
height: 163 px;
width: 164 px;
}
#
Image3 {
height: 163 px;
width: 164 px;
}
#
Image4 {
height: 163 px;
width: 164 px;
}
<
/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 > & nbsp; < /p>
&
nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; < /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