{"id":59939,"date":"2018-05-03T17:05:34","date_gmt":"2018-05-03T11:35:34","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59939"},"modified":"2024-04-12T14:20:51","modified_gmt":"2024-04-12T08:50:51","slug":"angular-animation-basics","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-animation-basics\/","title":{"rendered":"Angular Animation Basics"},"content":{"rendered":"

Angular Animation Basics<\/h1>\n

What kinds of Angular Animation are we talking about? I mean, I said a lot about using Angular Animation to enhance our user interfaces; but what exactly does that mean?<\/p>\n

It\u2019s obviously not enough to throw Angular Animation at our web page elements and hope it improves our conversion rate. That would be silly. Like every other aspect of design, what kinds of Angular Animation you use, and when you use them, must be carefully considered.<\/p>\n

Let\u2019s start by looking at the different types of Angular Animation typically used on the web:
\nInterface element animation<\/p>\n

I don\u2019t know whether this is the most common type of animation, though, at a guess, it probably is. And so it should be. This is, in my opinion, the most useful kind of Angular Animation that we have available to us.<\/p>\n

Like I said in the introduction, this is the Angular Animation that lets your users know that their action (clicking, for example) has been registered. Their click was the catalyst needed to make something happen, whether that be navigating to another page, opening a sidebar or modal window, or sending an e-mail from your contact form.<\/p>\n

That feedback isn\u2019t just nice to have, it\u2019s essential now, in this world of flat design. People need to know the difference between interface and decoration. Animating our elements in simple, and subtle ways upon interaction gives them the feedback they need.<\/p>\n

It can be as simple as making button backgrounds change, or making them bounce. This category also covers the animations that make sidebars \u201cslide\u201d onto the page, and the ones that make modal windows inflate themselves into existence.<\/p>\n

Waiting animations<\/p>\n

And once again, it\u2019s all about providing feedback to the user. These are the animations that you\u2019ll show to the user when something\u2019s happening in the background, and you don\u2019t want them to freak out.<\/p>\n

The utility of these animations was proven a long time ago, when graphical user interfaces were first invented. It started with the way the mouse cursor would turn into an hour glass, and progress bars, too. Apple introduced the \u201cspinning beach ball of death,\u201c at some point, and windows showed files flying gracefully from one folder to another.<\/p>\n

These conventions were adopted on the Web as soon as was possible, and with good reason. When people start to wonder what\u2019s going on, they keep clicking, or tapping. It might be an expression of frustration. They might believe it actually makes things go faster.<\/p>\n

Either way, telling your user what\u2019s happening, even via a simple progress bar, can ease the mind considerably\u2026 even for those of us who\u2019ve been using computers a long time.<\/p>\n

Story-telling animations<\/p>\n

Now story-telling with Angular Animation goes beyond cartoons. In fact, I\u2019m not talking about those at all. Rather, some people design websites so that as a user interacts with them (for example: by scrolling down the page), animations are triggered which tell a story.<\/p>\n

Some common examples are those pages that will show off a new product by \u201cassembling\u201d it before your eyes. Others play out more like a cartoon, with little characters following you down the page and everything.<\/p>\n

 <\/p>\n

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.<\/strong><\/p>\n

\"\"<\/a><\/p>\n