Design patterns and Animation with jQuery -...
Transcript of Design patterns and Animation with jQuery -...
-
Design patterns and Animation with jQuery
with Paul Bakaus
-
The desktop.
-
The greatest UI innovation ever.
-
Drag & Drop.
-
What about us?
-
We are pioneers.
-
Drag & Drop.
in the web?
-
Mixed worlds.
Application features everywhere Web 2.0 : Customization and Sharing
No user interface standard No supportive front-end interaction
-
Whats going on?!
-
What you will learn in this session
Animations and Effects in Javascript Finding and using front-end design patterns Real world issues and their solutions jQuery UI and jQuery FX
-
Animation in JavaScript
-
The web is growing.
-
HTML (Markup)
The web is growing.
-
HTML (Markup)
CSS (Presentation)
The web is growing.
-
HTML (Markup)
CSS (Presentation)
JavaScript (Usability)
The web is growing.
-
HTML (Markup)
CSS (Presentation)
JavaScript (Usability)
The web is growing.
Where is the animation part?
-
HTML (Markup)
CSS (Presentation)
JavaScript (Usability)
The web is growing.
Where is the animation part?
?
-
setInterval / setTimeout
400px
var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)
-
setInterval / setTimeout
400px
var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)
-
setInterval / setTimeout
400px
var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)
-
setInterval / setTimeout
400px
var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)
-
setInterval / setTimeout
400px
var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)
-
setInterval / setTimeout
400px
var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)
-
setInterval / setTimeout
400px
var distance = 400 //Distance in pxvar duration = 2000 //Duration in msvar interval = 13 // The frameratevar step = distance / (duration / interval);setInterval(function() { myEl.style.left += step; }, interval)
-
Issues
Rounded values setInterval does not necessarily execute
every (interval) ms
Conclusion: setInterval is unreliable.
-
Self-recalculating method
400px
Create a Date() object upon beginning Create a new Date() object every interval and get
the current offset
Recalculates the step based on this information
-
Self-recalculating method
400px
Create a Date() object upon beginning Create a new Date() object every interval and get
the current offset
Recalculates the step based on this information
-
Frontend design patterns
-
What they are
Answers to common usability issues Solutions for interaction, navigation and
visualisation
Often JavaScript based
-
Where to find them
Common JavaScript libraries (jQuery, YUI) Real world situations (Desktop)
-
Accordion.
-
Accordion.
-
Drag & Drop.
-
Drag & Drop.
-
Collapse & Expand.
-
Collapse & Expand.
-
Now the user will be able to see whats going on.
Good.
-
The real world.
-
Possible issues
Timing Performance Separation of Markup/Presentation Cross-Browser compatibility
-
PerformanceUse one timer.
var timer = setInterval(function() {
//Get the current timestamp
var time = (new Date()).getTime();
//Handle everything thats in queue
for(var i=0;i
-
PerformanceNest your Animations.
Sample elementSample elementSample element
$(div).animate({ top: 200 }, 1000);
-
PerformanceNest your Animations.
Sample elementSample elementSample element
$(div).animate({ top: 200 }, 1000);
-
PerformanceNest your Animations.
Sample elementSample elementSample element
$(div.container).animate({ top: 200 }, 1000);
-
PerformanceAnimate your stylesheets.
Modifying the DOM is slow. Grab a single css rule (div.container a.big) Changing this rule will change all elements,
too.
-
Browser wars?
-
The Answers.-or-
Your unfair advantage.
-
jQuerys animate()
$(div.small).animate({fontSize: 2em,width: 100%,scrollTop: 0
}, slow);
-
Your unfair advantage.
Animate everything - em, px, % All previous mentioned issues solved Relative animations Intelligent animations (intention detection) Queue control
-
jQuerys offset()
var o = $(div.small).offset();
-
A good position.
Absolute offset of every element (left/top) Regardless of block/inline/positioned/non-
positioned
Bullet proof: Hundreds of cross-browser tests
-
jQuerys Effect Library Many ready-to-use effects Advanced animations
Class/CSS animations Color animations
jQuery Enchant.(Working title)
-
Ready to use.
$(div.small).hide({ method: scale}, 1000);
-
Ready to use.
-
Class animations.
Dont modify styles directly Animate from one class to another
$(div.container).addClass(error, 1000)
-
Class animations.
Dont modify styles directly Animate from one class to another
-
Color animations.
Animate from one color to another Regardless of hex, rgb, named colors
$(div.container).animate({ backgroundColor: red })
-
jQuerys UI Library Ready-to-use patterns Core interaction modules Easily extendable
-
Ready to use.
$(div.small).draggable(); $(textarea).resizable(); $(ul.mytabs).tabs();
-
Ready to use.
-
Ready to use.
-
Core interaction. Mouse Interaction
Drag & Drop
Sorting
Selections
Keyboard Interaction
Selections
Shortcuts
Navigation
-
Give it a try!http://ui.jquery.comhttp://fx.jquery.com
http://ui.jquery.comhttp://ui.jquery.comhttp://fx.jquery.comhttp://fx.jquery.com
-
Thank you for your attention.http://www.paulbakaus.com
http://www.paulbakaus.comhttp://www.paulbakaus.com