Image Of Animation Using Web Application In TypeScript

Nitin Bhardwaj
11y
9.8k
0
0

Article

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.

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>

#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>

<div>

<h3>Image Animation In TypeScript</h3>

</div>

         </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

Up Next

Ebook Download

View all

Test

Read by 16 people

Download Now!

Learn

View all