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

Angular Animation<\/h1>\n

Angular Animation is one of humanity\u2019s life-long dreams (if some historians are to be believed). The theory begins with cave paintings: In some cave paintings, it\u2019s common to see creatures drawn with far too many limbs.<\/p>\n

There are a couple of theories behind this. Some suggest that this was simply because the artists had no means of erasing the limbs, leaving their mistakes on the walls for posterity. Others believe that these were the earliest attempts to capture the idea of motion in a static image. I choose to believe the second theory.<\/p>\n

And what\u2019s more natural than the desire to capture motion? Everything in nature moves. People walking, water running, plants unfolding, the only thing that is truly constant in nature is change, in the form of motion. Some of it happens in a blur, and some of it\u2019s too slow to perceive, but it\u2019s always happening.<\/p>\n

Angular Animation is change, and motion. It\u2019s the closest we get to capturing life in our art. This would be why people are always saying things like \u201cAngular Animation makes our websites (or presentations, or whatever) come alive.\u201d It might be overused, but it\u2019s a phrase that elegantly captures the purpose of Angular Animation in web design.<\/p>\n

That illusion of motion, when applied correctly, is what tells the users that they have actually done something. They have successfully interacted with the interface, and have caused something to change.<\/p>\n

This triggers the same feelings (or at least very similar feelings) in them as the ones they experience when they interact with physical objects. In a way, Angular Animation is skeuomorphic. That\u2019s right, I said the \u201cs\u201d word.<\/p>\n

When used right, Angular Animation is designed to mimic real-world interactions. In a way, we\u2019ve come full-circle. We might not be using far too many leather textures anymore, but we\u2019re still trying to imitate the real world.<\/p>\n

Motion is an important aspect in the design of modern web applications. Good user interfaces transition smoothly between states with engaging animations that call attention where it’s needed. Well-designed animations can make a UI not only more fun but also easier to use.
\nOverview<\/p>\n

Angular’s animation system lets you build animations that run with the same kind of native performance found in pure CSS animations. You can also tightly integrate your animation logic with the rest of your application code, for ease of control.<\/p>\n

Angular animations are built on top of the standard Web Animations API and run natively on browsers that support it.<\/p>\n

For other browsers, a polyfill is required. Uncomment the web-animations-js polyfill from the polyfills.ts file.<\/p>\n

 <\/p>\n

 <\/p>\n

IT Professionals, Web Developers, web programmers, IT students can use the below links to be updated on Angular 4<\/p>\n