Ir al contenido principal

AngularJS: Animate

Animate

  • Add ngAnimate to the application 
    • angular-animate.min.js
    • var app = angular.module('app', [ 'ngRoute', 'ngAnimate' ]);

  • Implement the $routeProvider
    • Ex.
    • $routeProvider

        // home page
        .when('/', {
            templateUrl: 'page-home.html',
            controller: 'mainController'
        })
  • Add the property pageClass to establish the animation  
    • app.controller('aboutController', function($scope) {
    $scope.pageClass = 'page-about';
});
  • In the ngView load the property: pageClass
<body ng-app="animateApp">

    <!-- inject our views using ng-view -->
    <!-- each angular controller applies a different class here -->
    <div class="page {{ pageClass }}" ng-view></div>

</body>

  • Add the Css style
/* ANIMATIONS
============================================================================= */

.page.ng-leave { z-index:9999; }
.page.ng-enter { z-index:8888; }

/* page specific animations ------------------------ */

/* home -------------------------- */
.page-home.ng-leave         {
    -webkit-transform-origin: 0% 0%;
-webkit-animation: rotateFall 1s both ease-in;
-moz-transform-origin: 0% 0%;
-moz-animation: rotateFall 1s both ease-in;
transform-origin: 0% 0%;
animation: rotateFall 1s both ease-in;
}
.page-home.ng-enter {  
    -webkit-animation:scaleUp 0.5s both ease-in;
-moz-animation:scaleUp 0.5s both ease-in;
animation:scaleUp 0.5s both ease-in;    
}

/* about ------------------------ */
.page-about.ng-leave        {
    -webkit-animation:slideOutLeft 0.5s both ease-in;
-moz-animation:slideOutLeft 0.5s both ease-in;
animation:slideOutLeft 0.5s both ease-in;   
}
.page-about.ng-enter {  
    -webkit-animation:slideInRight 0.5s both ease-in;
-moz-animation:slideInRight 0.5s both ease-in;
animation:slideInRight 0.5s both ease-in;    
}

/* contact ---------------------- */
.page-contact.ng-leave      {
    -webkit-transform-origin: 50% 50%;
-webkit-animation: rotateOutNewspaper .5s both ease-in;
-moz-transform-origin: 50% 50%;
-moz-animation: rotateOutNewspaper .5s both ease-in;
transform-origin: 50% 50%;
animation: rotateOutNewspaper .5s both ease-in;
}
.page-contact.ng-enter { 
    -webkit-animation:slideInUp 0.5s both ease-in;
-moz-animation:slideInUp 0.5s both ease-in;
animation:slideInUp 0.5s both ease-in;  
}

/* rotate and fall */
@-webkit-keyframes rotateFall {
0% { -webkit-transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
}
@-moz-keyframes rotateFall {
0% { -moz-transform: rotateZ(0deg); }
20% { -moz-transform: rotateZ(10deg); -moz-animation-timing-function: ease-out; }
40% { -moz-transform: rotateZ(17deg); }
60% { -moz-transform: rotateZ(16deg); }
100% { -moz-transform: translateY(100%) rotateZ(17deg); }
}
@keyframes rotateFall {
0% { transform: rotateZ(0deg); }
20% { transform: rotateZ(10deg); animation-timing-function: ease-out; }
40% { transform: rotateZ(17deg); }
60% { transform: rotateZ(16deg); }
100% { transform: translateY(100%) rotateZ(17deg); }
}

/* scale up */
@keyframes scaleUp {
from { opacity: 0.3; transform: scale(0.8); }
}
@-moz-keyframes scaleUp {
from { opacity: 0.3; -moz-transform: scale(0.8); }
}
@-webkit-keyframes scaleUp {
from { opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* slide in from the right */
@keyframes slideInRight {
from { transform:translateX(100%); }
to { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
from { -moz-transform:translateX(100%); }
to { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
from { -webkit-transform:translateX(100%); }
to { -webkit-transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
from { transform:translateY(100%); }
to { transform: translateY(0); }
}
@-moz-keyframes slideInUp {
from { -moz-transform:translateY(100%); }
to { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideInUp {
from { -webkit-transform:translateY(100%); }
to { -webkit-transform: translateY(0); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
to { transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {
to { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
to { -webkit-transform: translateX(-100%); }
}

/* rotate out newspaper */
@-webkit-keyframes rotateOutNewspaper {
to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@-moz-keyframes rotateOutNewspaper {
to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@keyframes rotateOutNewspaper {
to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

Comentarios

Publicar un comentario

Entradas populares de este blog

Android - Basic Steps (Service)

Service Run in the main thread of the hosting application Android can kill the Service if need the resources Purpose Supporting inter-application method execution Performing background processing Start a Service Call Context.startService(Intent intent)\ To call from a Fragment use getActivity().getApplicationContext().startService( intentService); Executing the service After call startService(...)  In the Service is executed the method onStartCommand(...) If the method returns the constant START_NOT_STICKY then Android will not restart the service automatically if the the process is killedp Foreground To execute the service foreground call the method startForeground() Use this if the user is aware of the process Bind to a Service Call the method Context.bindService( Intent service ServiceConnection con int flags ) Send Toast from the Service On the method onStartCommand receive the message   ...
Publicar un comentario
Leer más

Android - Basic Steps (Location & Maps)

Location Is composed by Latitude Longitude Time-stamp Accuracy Altitude Speed Bearing LocationProvider Types: Network  Wifi access points Cell phone towers GPS Passive Piggyback on the readings requested by other application Permissions Network  android.permission.ACCESS_COARSE_LOCATION android.permission.ACCESS_FINE_LOCATION GPS android.permission.ACCESS_FINE_LOCATION Passive Provider android.permission.ACCESS_FINE_LOCATION LocationManager System service for accessing location data getSystemService( Context.LOCATION_SERVICE ) Functions Determine the last known user location Register for location update Register to receive intents when the device nears or move away from a given geographic area LocationListener Defines callbacks methods that are called when Location or LocationProvider status change. Methods onLocationChanged(...) onProviderDisabled(...) onProviderEnabled(...) onStatusChan...
Publicar un comentario
Leer más

Android - Basic Steps (Sensors)

Sensors There are three types: Motion Position Environment ServiceManager Get a reference with   getSystemService(Context.SENSOR_SERVICE) Get a specific sensor SensorManager.getDefaultSensor(int type) Sensor Types Sensor.TYPE_ACCELEROMETER Sensor.TYPE_MAGNETIC_FIELD Sensor.TYPE_PRESSURE SensorEventListener Interface for SensorEvent callback When the accuracy has changed onAccuracyChanged() When has a new value onSensorChanged() SensorManager To register or unregister SensorEvents registerListener() unregisterListener() SensorEvents Include Data is sensor Sensor Type time-stamp Accuracy Measurement data Filters Low-pass Deemphasize transient force changes Emphasize constant force components Example Carpenter's level High-pass Emphasize transient force changes Deemphasize  constant force components Example Percussion instrument
Publicar un comentario
Leer más