Windows8Index: Codeproject - Html5 Animations Using Canvas

http://www.codeproject.com/Articles/734536/Pros-and-Cons-of-HTML-Cross-Platform-Android-Mobi

Editorial Note

This article is in the Product Showcase section for our sponsors at CodeProject. These reviews are intended to provide you with information on products and services that we consider useful and of value to developers.

The success of mobile applications depends on reaching target customers regardless of the device they use. And cross-platform mobile application development tools help developers do that. A typical customer might use an Android smartphone to access the Internet on the go, a Windows* PC at work, or an Apple iPad* in a café.

Instead of using complex technologies like Objective-C*, Xcode*, and iOS* APIs for Mac*, iPhone*, and iPad; Windows API, Visual Studio*, and C# for Windows PC; and Android APIs, Java*, and Eclipse* for Android smartphones, it is much easier and effective to use HTML5 cross-platform mobile application development tools. The key is to have the right features in your application that deliver a perfect user experience. Second, the app should have an inherent ability to work on new devices that continually hit the market.

HTML5, a markup language, has several features that allow it to run on devices specifically designed to consume less electricity. For example laptops, smartphones, and tablets have processors that consume significantly less power than desktop devices. It is the preferred markup language used today to structure and present content on the Internet.Strategy Analytics predicts that more than a billion HTML5 compatible devices will be in use worldwide by the end of 2013. HTML5 can be used to develop interactive web pages for deployment across multiple operating system platforms and browsers. Hence, cross-platform mobile app development tools based on HTML5 are appealing to mobile app developers.

http://www.codeproject.com/Articles/734099/Creating-cool-animations-and-transitions-in-HTML
posted under open source

Canvas Tag

One problem with earlier versions of HTML was the lack of multimedia techniques. You could not show a video or draw on the screen. With HTML5, new elements such as <video> and <canvas> have been released. These elements give developers the ability to use multimedia technology in "native" HTML, just by writing some JavaScript* in combination with HTML. A straightforward action that should be provided by multimedia technologies is animation, and now HTML5 has some ways to do it.

One of the most exciting features of HTML5 is the <canvas> element that can be used to draw vector graphics and engender astonishing effects, interactive games, and animations. The HTML5 Canvas is picture-perfect for creating great visual material that augments UIs, diagrams, photo albums, charts, graphs, animations, and embedded drawing applications. HTML5 Canvas works with JavaScript libraries and CSS3 allowing you to create interactive web-predicated games and animations.

The elementary code for using and setting a canvas looks like this:

Collapse | Copy Code

<canvas id= "animation" width="150" height="150">

Sorry, your browser doesn't support the HTML5 element canvas.

</canvas>

This looks similar to the <img> element; the difference is that it doesn't have the src and alt attributes. The <canvas>element has only two characteristics: width and height. If your renderings seem inaccurate, try designating your width and height attributes explicitly in the <canvas> attributes, and not with CSS. The width and height attributes default to 300 and 150, respectively. The id will be used to initialize the canvas using JavaScript, and the text inside will be displayed as a call back when the mobile browser doesn’t support it.

Coordinate System

The prerequisite knowledge you need to draw on the canvas is the coordinate system. The canvas is constructed around the x and y coordinates. If you have worked with any other 2D graphics programming language, you already know the standard Cartesian coordinate system, where (0,0) is the top left corner. If we want to move a square to the right, we have to increase our x-axis value; if we wish to move up, we have to decrease our y-axis value. The diagram below shows how the x and y coordinate system is implemented.

The diagram shows a canvas area that is 200 pixels by 200 pixels:

The top left corner is x=0, y=0.
The x value increases horizontally, and the y value increases vertically.
The bottom right corner is x=200, y=200.
The center point is x=100, y=100.

We define the init method, which is used for initialization. The canvas is blank. To draw something, JavaScript first needs to get hold of the rendering context. To do this, the <canvas> element provides a getContext()method that captures the rendering context and its drawing functions.

Collapse | Copy Code

    function init ()

    {

    var cans document.getElementById("animation);

    var canctx = canvas.getContect(‘2d’);

    }

The cans variable captures the canvas that we can draw the graphics objects on, and canctx holds the rendering context. In this case it is a 2D graphics object.

This context encompasses the methods for drawing on the canvas such as arc(), lineto(), and fill().

Drawing Tools

The drawing tools for drawing on the canvas are:

Lines
Rectangles
Arcs
Bezier and quadratic curves
Circles and semicircles

Drawing lines

We use the beginpath() method to reset the current drawing on the screen. Then we use the moveto(), lineto(), and stroke() techniques to draw a line on the canvas.

canctx.beginPath();
canctx.moveTo(x,y);
canctx.lineTo(x,y);
canctx.stroke(x,y);

The beginpath() method ensures that we are starting a new path. It begins another path, wiping out the present path (if any). If you discover you're getting an interfacing line in an animation from the start to the end of your path, it may be that you haven't used the beginpath() capacity to start your path/drawing. To make a way with HTML5 Canvas, we can associate different subpaths. The completion purpose of every new subpath turns into the new setting focus.

The moveTo() method sets the conditions for where the new subpath is to start. The lineTo() method generates subpaths. We can change the look of the line with lineWidth and strokeStyle. The lineWidth element modifies the thickness of the line, and strokeStyle modifies the color.

To create a line like the one shown above, we alter the code as below:

context.moveTo(50, 50) ‒ places the initial point for the path at (x=20, y=20)
context.lineTo(50,200) ‒ identifies the end point for the line
context.lineWidth = 10 ‒ the width of the line
context.strokeStyle = "#0000FF" ‒ the color of the line
context.lineCap = "round" ‒ makes the ends round
context.stroke() ‒ smears the line on the canvas

The three possible line caps are:

Context.round
Context.square
Context.butt

Drawing Rectangles

The three ways to draw a rectangular on the canvas are:

fillRect(x,y,width,height) ‒ draws a filled rectangle
strokeRect(x,y,width,height) ‒ draws a rectangular outline
clearRect(x,y,width,height) ‒ clears the given area and makes it fully opaque

All three types of rectangles are shown below.

Drawing a circle and animating it

In this section we will be generating a circle that moves about on the canvas. To generate the circle we will create adrawcircle function.

Collapse | Copy Code

    function drawcircle(x,y)

    {

    canctx.beginPath();

    canctx.arc(x,y,r,0,360,true);

    canctx.fill();

    }

The beginpath() method ensures that we are starting a new path. The arc(x, y, radius, startAngle, endAngle, anticlockwise) defines the size and shape of our circle.

The fill() method fills the circle with the color defined by the value of the fillstyle attribute of the context object.

To move the circle, we just need to alter the x and y values at a particular interval of time using the setInterval()method to the init function. Fundamentally we just redraw the circle. The animation is actually coming from thesetInterval method. The increment of the circle’s current position gives the effect of movement. Without changing the X and Y values, the circle would not move at all!

Collapse | Copy Code

    setInterval(draw,10);

The setInterval() method requests a function or assesses an expression at definite intervals (in milliseconds).

If you execute the code, you’ll see a smooth moving animation of a ball leaving behind a trace. The reason for this is we do not refresh the frame and all the new drawing is added on top of the old. We will have to clear the frame every time the draw() function is called to hide this, the coolest (and fastest) way to do this is by just drawing a huge square on top of the whole canvas or by calling the clear function:

Collapse | Copy Code

    function draw()

    {

    canctx.fillStyle = rgb(255,255,255);

    canctx.fillRect (0, 0, 400, 400);

    if (x + dx > WIDTH || x + dx < 0)

    dx = -dx;

    if (y + dy > HEIGHT || y + dy < 0)

    dy = -dy;

    circleX += dx;

    circleY += dy;

    drawcircle(circleX, circleY);

    }

Note: CircleX and CircleY are the X and Y positions of the circle, while dx and dy are the displacements with respect to the current position.

Transition is the procedure of altering from one form or situation to another. To add transition to HTML5 apps, we use CSS files. For instance, a lingering effect is instant on a link. With a transition, you can spread the extent of the advent of the change. This can be useful to draw attention to a particular part of the application.

Generally, when a CSS property value is altered, the extracted consequence is promptly rationalized, with the affected features instantly varying from the old property value to the new property value. This segment designates a way to stipulate transitions using new CSS properties. Using these properties, the object can be made to smoothly transition from one state to the other.

transition-property

The transition-property line outlines which CSS property we want to change. The default value is ‘none’, which implies no transition. If we insert a value of ‘all’, all transition properties are applied.

transition-duration

The transition-duration property outlines the transition length. When the element changes to the original state, the duration echoes. We specify the duration in seconds (a number followed by an "s") or milliseconds ("ms"). The default is 0s.

transition-timing-function

The transition-timing-function property tells the browser the speed of the transition and how the speed changes over the length of the transition. The default value is ‘ease’. Other pre-defined values are ‘linear’, ‘ease-in’, ‘ease-out’, and ‘ease-in-out’.

transition-delay

The transition-delay property states the interval that occurs before the transition starts, that is, after a transition is prompted, the delay represents the time that lapses before any transition transpires.

Collapse | Copy Code

    .example {

    transition-property: background-color;

    transition-duration: 5s;

    transition-timing-function: ease-out;

    transition-delay: 2s;

    }

Transition shorthand

We can declare all of these properties in a single shorthand declaration. Consequently, we can prompt the above example as follows:

Collapse | Copy Code

    .example {

    transition: background-color 5s ease-out 2s;

    }

The authoritative ordinance of the time-cognate values is paramount. The first time value always represents duration, so if you want to include a delay, you must first define a duration.

Triggering a transition

Now that we know the syntax for CSS3 transitions, let us look at how to trigger them. The best way to trigger a transition is by using the: hover pseudo-class. The code for the: hover trigger might look like the following:

Collapse | Copy Code

    .example {

    background-color: green;

    transition: background-color 5s ease-out 2s;

    }

    .example:hover {

    background-color: red

    }

If we hover over the element, the background color changes from green to red over a five-second duration, after a two-second initial delay.

Transitions triggered by events other than the: hover trigger

Triggering the transition is really not so much about the trigger itself (in the circumstance above, the trigger presence being: hover). What actually makes the transition happen is the transmutation of the element’s state.

There are number of ways apart from the "hover:trigger" to trigger a transition.Using: active

The: active pseudo-class characterizes the state that occurs when we click an element and hold the mouse button. The code might look like the following:

Collapse | Copy Code

    .example {

    width: 200px;

    height: 200px;

    transition: width 5s ease-out;

    }

    .example: active {

    height: 400px;

    }

In this code case, the transition of the height property starts when we click and hold on an element, thus preserving the element's "active" state.

Some of the other pseudo-classes that we could use to trigger transitions are focus, checked. We could also trigger a transition with a combination of HTML5, CSS, and JavaScript and create wonderful mobile apps.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Windows8Index

Pages

Tuesday, March 4, 2014

Codeproject - Html5 Animations Using Canvas

Pros and Cons of HTML5 Cross-Platform Android* Mobile App Development Tools on Intel® Processor-based Devices

Editorial Note

Creating cool animations and transitions in HTML5 app for Intel Android devices

Canvas Tag

Coordinate System

Drawing Tools

Drawing lines

Drawing Rectangles

Drawing a circle and animating it

transition-property

transition-duration

transition-timing-function

transition-delay

Transition shorthand

Triggering a transition

Transitions triggered by events other than the: hover trigger

Other Related Articles and Resources

License

No comments:

Post a Comment