UFCEKT-20-33D Modelling and Animation 3D Modelling & Animation Special Effects Picture...
06 animation and effects
description
Transcript of 06 animation and effects
CHAPTER 6: ANIMATION AND EFFECTS
Remember, dynamically modifying a web page takes just two steps1. Select the element(s)
2. Do something with them• This is about the doing something – animating elements• For example
$(selector).hide();$(selector).show();
There are two optional parameters on each effect
1. speed• fast• normal• slow• number in milliseconds
2. callback• A function to call when the effect is over
Hiding and showing
• hide()• show()• toggle()
Fading in and out• Fade elements in and out• fadeIn()• fadeOut()• fadeToggle()• fadeTo(percentage)
Sliding in and out• slideUp() – slides into view• slideDown() – slides out of view• slideToggle()
Animationsanimate( { property: value, …}, timeInMilliseconds);
Easing allows a more interesting animation
• jQuery has two built-in easing functions• linear• swing
• To use this, add the easing function
$(selector).animate({ property: value, property: value }, slow, 'swing');
With the jQuery easing plug-in, you have many more functions available
jswing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
Callback functions allow you to do something when the effect is complete$(selector).fadeIn( speed, function() { // Do something });
Conclusion• jQuery allows animation and effects• You can show(), hide(), fadeIn(), fadeOut(), slideUp() and
slideDown()• You can specify a speed with an optional slow, fast,
normal, and number• Animation allows you to animate any numeric property• Easing functions create more interesting animations than
a simple linear one• You can even call a function when the animation is
complete with a callback function
Lab• Login slider tutorial – pp. 190 – 192• Animated dashboard tutorial – pp. 198 - 203