Animations in Angular 6

Angular & Animations: More Realistic Experience

Animation brings liveliness to Application. Motion helps to understand UX with beauty. I’ve always admired animations, it gives soul to the app, converting it in a living entity that reacts to our actions. This helps to understand its functionality and make us empathise with it. Animation consists in transition an element from an initial state to a final state, calculating the middle states to provide the appearance of motion.

CSS Animations

The basic property that allows to animate an element with CSS is transition:

.element {
transition: [property] [duration] [ease] [delay]
}

Within it we can declare the [property] we want to animate, the [duration]of the animation, the type of flow [ease], and the [delay].

Angular Animations are based in the Web Animations API that basically brings all the power of the animations from the CSS to JS, allowing to do awesome things like pausing or reversing animations right in the code

Setting up animations

To start using animations in our Angular project we’ll need:

  • Project:
    Install BrowserModule and BrowserAnimationsModule and add them to the package.json (npm install --save @angular/animations @angular/platform-browser) .
  • Module:
    Add them to the modules you we’ll be applying animations (usually the app.module.ts or shared.module.ts).
  • Component:
    – Import the functions you’ll use { trigger, state, style, animate, transition } from '@angular/animations'
    – Declare the animation in the component’s decorator.

Using animations

An animation declaration is composed at least by a:

  • trigger([name], [definitions array]):
    Declares the animation with a name, used to apply it in the template.
  • transition([states], [definitions array]):
    Specifies the two states (initialState and finalState) that integrate the animation. ‘=>’ operator is used for unidirectional transitions, and ‘<=>’ for bidirectional ones.
  • animate(‘[duration] [delay] [ease]’):
    Defines the kind of animation that will be applied to the transition between the states.

After declaring the animation in the component, we can apply it to the element we want to animate in the template.

States

Like in any animation, Angular animations are just transitions between two styled states. There are 2 types of states:

  • Defaults:
    – void : when the element is not present in the view, it is in the void state.
    – * : wildcard, match any state.
  • Custom:
    States defined by us using state().

Common transitions with default states are “void => *” (when the element enters) and “* => void” (when the element leaves).

 

If we apply this animation to an element… we’ll see that nothing happens.That is because in the ‘void’ state the element is not present in the view, so it doesn’t have any style to transition from.

If we apply this animation to an element… we’ll see that nothing happens. That is because in the ‘void’ state the element is not present in the view, so it doesn’t have any style to transition from.

Without an styled Initial State, the browser can’t calculate the transition of those properties to the Final State.
By default, the Final State is the element naturally placed in the view, with the properties we have applied to it in CSS.

Styles

We can define styles with the style() function.

There are two kinds of styles:

  • State styles:
    Applied to the element while it is in the state. Removed when the state changes.
  • Transition styles:
    Applied to the element while it is transitioning to its Final State. Removed when the Final State is applied (with its State Styles) .

Inside Transition Styles, there are also two types:

  • ‘From’ styles:
    Placed at the beginning of the transition, they will be applied to the element right when it’s created.

This way, the element will have an style when the Initial State is ‘void’ and the browser will be able to transition from it. Solved, the transition now works and we can see a quite transparent element (opacity: 0.2) that enters from the left side of the screen (translateX(-100%)) and travels to its final state in the center of the page increasing its opacity.

  • ‘To’ styles:
    Placed inside animate(), they will be used to transition to it from the ‘from’ style, in this case ‘void’.

Now we can see the element entering from the left side of the screen, but this time it scales its size by a 50% before going back abruptly to its finale state, in the center of the page.

‘To’ and ‘From’ styles are removed when the transition completes, that’s why the transition ends abruptly showing the element with its original CSS styles.

Cat Application:

Let’s implement cat image library with animation. In this application we are adding random cat from the api with Animation and when we select that cat it will be on grey scaled and little bigger in size and  when we unselect that image goes to back in normal as before. Let’s get started. for basic setup you can follow my another blog

I hope you have followed all mentioned steps there.

I have used custom enterImg animation while adding cat into list. Now we can see the element entering from the left side of the screen, but this time it scales its size by a little bigger before going back to its finale state.

My output will be:

GIF

While selecting image, I have used selected animation. Now we can see the element which is selected will turn into gray scaled and this time it scales its size by a little bigger in final state. When we unselect it , will turn normal image as it was before.

Wait! It won’t work actually. We need some extra configuration for this in html as well. Please have look.

Now check the output.

GIF

Incase you need whole file check the below.

basically generateSrc function will push cat detail to catList. (Ps : I m fetching random cats from  catass api.) we further animate it and display the list. main logic resides in below file.

You can checkout this code on Github. Here’s my Repo.

References:

https://cyphertree.com/angular-6-is-now-available/

https://angular.io/api/animations/animate

https://angular.io/guide/animations

https://cataas.com/

 

 

 



Leave a Reply