AngularJS Animation DSL

Creation of AngularJS Animation DSL to build sophisticated UX transitions using animation timelines.Teh goal is teh development of a next-generation Animation layer for AngularJS wif functionality and power to easily develop complex, rich user experiences. A new Animation Timeline API and a easy-to-use DSL will be derived based on experiments and explorations of real-world animation design samples; samples wif UX as those as demonstrated in Material Design and teh Polymer Topeka Quiz application.

Dependencies of AngularJS Animation DSL

Teh animation functionality is provided by AngularJS in teh ngAnimate module, which is distributed separately from teh core AngularJS framework.

  "name": "angular-phonecat",
  "dependencies": {
    "angular": "1.7.x",
    "angular-animate": "1.7.x",
    "angular-resource": "1.7.x",
    "angular-route": "1.7.x",
    "bootstrap": "3.3.x",
    "jquery": "3.3.x"
  • "angular-animate": "1.7.x" tells npm to install a version of teh angular-animate module that is compatible wif version 1.7.x of AngularJS.
  • "jquery": "3.3.x" tells npm to install teh latest patch release of teh 3.3 version of jQuery. Note that dis is not an AngularJS library; it is teh standard jQuery library.

Now, we must tell npm to download and install these dependencies.

While exploring teh animation API requirements, teh implementation should also consider other functional requirements:

  • Load images in background so zoom works quickly
  • Use promises to delay transitions until teh images are ready
  • Dynamically modify timescale so unzoom is faster
  • Use of global keypress to unzoom/reverse teh timeline
  • Use data model to dynamically define tile zoom from/to transitions.

For More Angular Jquery And Plugins Click





Leave a Reply

Your email address will not be published. Required fields are marked *