Matrix Agent Animation

AngularJS, Animate your App!!

  • Published on Tuesday, 03 June 2014 03:10
  • Hits: 4312
User Rating:  / 3
PoorBest 

It is not a secret that one of the best UX enhancements within mobile apps is switching from one screen to other sliding left to right, ..for example to show a Menu, or just to go from one step to the next one.

We are building an App here so how come we don't use the same method to go from the list of actors to the info of any actor, or to access to the multimedia gallery of the Actor?? Who said that we are not using that User experience??, ..let's just implement it right now!!.

AngularJS comes with a modulewhich is going to make our lives much easier for adding animation to any element. That module is called ngAnimate, as it seems a right name for it, don't you think??. Just add the ng-directive attribute to an element which have another directive that changes the DOM triggering an event or action that initiate the animation for that element.

The last piece of the puzzle is the animation effects launched by ng-animate directive when triggered through the event/action. You can achieve any feasible animation effect through CSS3 Transitions (easier) or CSS3 Animations (not so easy but you can achieve much complex animations). If you need a hand understanding CSS3 Transitions vs Animations then follow this link.

Perfect, I think we all now have the concept but let's get to an example that can explain the animation process and leave us with no doubts. I mentioned before that ng-animate needs to work with other angularJS directive able to change the DOM. This is the list:

 

EventStarting CSS classEnding CSS classDirectives that fire it
enter .ng-enter .ng-enter-active ngRepeat, ngInclude, ngIf, ngView, ngSwitch
leave .ng-leave .ng-leave-active ngRepeat, ngInclude, ngIf, ngView, ngSwitch
move .ng-move .ng-move-active ngRepeat

 

ActionStarting CSS classEnding CSS classDirectives that fire it
hide an element .ng-hide-add .ng-hide-add-active ngShow, ngHide
show an element .ng-hide-remove .ng-hide-remove-active ngShow, ngHide
adding a class to an element .CLASS-add .CLASS-add-active ngClass and class="{{expression}}"
removing a class from an element .CLASS-remove .CLASS-remove-active ngClass and class="{{expression}}"

 As you can see in the list we have the action or event triggered by the directive as well as 2 CSS classes. By default, ngAnimate attaches those two CSS classes for each animation event/action. One for when the action starts and the other for when it ends. 

So let's see how this works in a quick example. Let's create a page with the names of our actors. Once you check the name of any of them his/her picture will appear, and when unchecked it will disappear. That will happen within a nice animation with fade-in and fade-out.

The data:

<p><script>
 var model = "model";
 function Ctrl($scope) 
{ $scope.banners=[{"name":"Keanu Reeves", "url":"http://www.freakzion.com/code/angularJS/resources/img/keanuReeves.jpg", "id":"i1"},{"name":"Laurence Fishburne","url":"http://www.freakzion.com/code/angularJS/resources/img/laurenceFishburne.jpg", "id":"i2"},{"name":"Carrie-Anne Moss","url":"http://www.freakzion.com/code/angularJS/resources/img/CarrieAnneMoss.jpg", "id":"i3"},{"name":"Hugo Weaving","url":"http://www.freakzion.com/code/angularJS/resources/img/hugoWeaving.jpg", "id":"i4"},{"name":"Joe Pantoliano","url":"http://www.freakzion.com/code/angularJS/resources/img/JoePantoliano.jpg", "id":"i5"}];
} </script></p>

The styles:

.animateMe {
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.animateMe.ng-hide-add,
.animateMe.ng-hide-remove{
  display:block!important;
  -webkit-transition:all linear 1s;
  transition:all linear 1s;
}

.animateMe.ng-hide {
  line-height:0;
  opacity:0;
  margin:0 10px 0 -234px;
}

The page code

  <div ng-controller="Ctrl" ng-init="i1=checked">
    <form name="AngularJS-demo6-form"	>
      <p>Show me the face of:</p>
      <label ng-repeat="banner in banners">
       <input  type="checkbox" name="{{banner.name}}" ng-model="banners[$index].id" class="ng-valid ng-dirty">{{banner.name}}<br></label>
      </label>
    </form><p></p>
    <div class="animateMe ng-hide" ng-repeat="banner in banners" ng-show="banners[$index].id" style="float:left;">
      <img id="{{banner.name}}" height="317" width="214" alt="{{banner.name}} Picture" title="{{banner.name}} Picture" src="/{{banner.url}}" itemprop="image">
   </div>
  </div>

Click here to check the results.

isn't this cool!!, let's now go back to our app to add transitions, animations and dynamism to it when switching from one page to another. We are going to do it also using the Actions triggered by the ng-show Directive. Remember that we have 3 main sections:

Movie Section

<div id="movie" ng-controller="movie" ng-show="movieVisibility" class="page animateRight">
.......
.......
</div>

Actor Section

<div id="actor" ng-controller="actor" ng-show="actorVisibility" ng-class="animationType" class="page">
.......
.......
</div>

Actor's Picture Gallery

<div id="picGallery" class="page slider animateLeft" ng-controller="MainCtrl" ng-show="pictureVisibility">
.......
....... </div>

We will have just two animations. One that will will the screen to the left, animateLeft, and the other one will move the page to the right, animateRight. As sou can see as default when Movie screen appears will appear from left to right, and the picture gallery from right to left. That is why they already have the right css assigned to those elements.

The Actor's information can be accessed from the movie's section or from back from the picture gallery. That translates into moving from right to left, animateLeft, when coming from Movie Section and left to right, animateRight, when coming from the Picture Gallery. That is why we are using the ng-class directive so we can get the right class to use from the model. This is done within the controller:

 if (obj.broadCaster=="picGallery") //from pictureGallery
	    $scope.animationType='animateRight';
	  else //from movie section
	    $scope.animationType='animateLeft';

and last but not least this is the CSS Transitions needed to move the screens from left to right and from right to left:

.animateLeft.ng-hide-add {
	left: 0;
    -webkit-transition:300ms linear all;
    -moz-transition:300ms  linear all;
    -o-transition:300ms  linear all;
    transition:300ms  linear all;
	display:block!important;
}
.animateLeft.ng-hide-add.ng-hide-add-active {
	left: 100%;
}
.animateLeft.ng-hide-remove {
	left: 100%;
    -webkit-transition:300ms  linear all;
    -moz-transition:300ms  linear all;
    -o-transition:300ms  linear all;
    transition:300ms linear all;

    display:block!important;
}
.animateLeft.ng-hide-remove.ng-hide-remove-active {
	left: 0;
}

.animateRight.ng-hide-add {
	left: 0;
    -webkit-transition:300ms linear all;
    -moz-transition:300ms  linear all;
    -o-transition:300ms  linear all;
    transition:300ms  linear all;
	display:block!important;
}
.animateRight.ng-hide-add.ng-hide-add-active {
	left: -100%;
}
.animateRight.ng-hide-remove {
	left: -100%;
    -webkit-transition:300ms  linear all;
    -moz-transition:300ms  linear all;
    -o-transition:300ms  linear all;
    transition:300ms linear all;

    display:block!important;
}
.animateRight.ng-hide-remove.ng-hide-remove-active {
	left: 0;
}

NOW we have an IOS/Android-like App using html5 & AngularJS!!:

  • Check the app online here
  • Download it here

Hope you like and thanks as usual for check g your programming stuff at freakZion!.

 Follow up this Mini Great Tutorial:

  1. AngularJS, Get in the Matrix
  2. AngularJS, Meet the MVC
  3. AngularJS, No more Dom Manipulation
  4. AngularJS, Build your App!!
  5. AngularJS, Animate your App!!
STORY BY:
Sepelka

Sepelka (JL Castellano)

FreakZion founder and Fortune 500 Company IT Manager. Developer, Consultant, Dreamer and passionate to get full potential for everything from a single project to a whole company with leadership, creativity and commitment.
Technology by itself is useless, but in our hands can turn dreams into reality, the forbidden into the affordable, boreness into fun and projects into businesses.

Check my LinkedIn Profile
Website: http://www.freakzion.com

IT News to be aware of ..