×·ÇóËٶȵ±È»²»ÊÇʹÓÃ
JavaScriptµÄΨһÀíÓÉ£¬Ëü»¹¾ßÓÐÒ»´ó¶ÑÆäËûͬµÈÖØÒªµÄ¹¦ÄÜ¡£ÈÃÎÒÃÇ´óÖ¿´¼¸¸ö
JavaScriptËù¶ÀÓв¢ÖµµÃ¹Ø×¢µÄ¶¯»¹¦ÄÜ¡£
1.3.1¡¡Ò³Ãæ¹ö¶¯
Ò³Ãæ¹ö¶¯ÊÇ»ùÓÚ
JavaScriptµÄ¶¯»×îΪÁ÷ÐеÄÓ¦ÓÃÖ®Ò»¡£×î½ü£¬
ÍøÒ³Éè¼ÆµÄÇ÷ÊÆÊÇ´´½¨ºÜ³¤µÄÒ³Ãæ¡£Ëæ×ÅÒ³ÃæÏòϹö¶¯£¬ÈÃÿһ²¿·ÖеÄÄÚÈÝ×Ô¶¯¹öµ½¿ÉÊÓÇøÓòÖÐÀ´¡£
ÀýÈçVelocityÕâÑùµÄ
JavaScript¶¯»¿âÌṩÁËÒ»ÖÖ½«ÔªËعö¶¯ÖÁ¿ÉÊÓÇøÓòµÄ¼òµ¥º¯Êý£º
$element.velocity("scroll", 1000);
ÒÔÉÏ´úÂëͨ¹ýʹÓÃVelocityµÄ"scroll"ÃüÁîÈÃ
ä¯ÀÀÆ÷ÓÃ1000ºÁÃëµÄʱ¼ä¹ö¶¯ÖÁ$elementµÄÉÏ·½±ßԵλÖá£×¢Ò⣬VelocityµÄÓï·¨ÓëjQueryµÄ$.animate()º¯Êý¼¸ºõһģһÑù£¬Õâ»áÔÚ±¾ÕºóÃæµÄ²¿·Ö½øÐÐÏêÊö¡£
1.3.2¡¡¶¯»·´×ª
¶¯»·´×ªÊÇÓÃÓÚ³·ÏûÔªËØÇ°Ò»¸ö¶¯»µÄ¼ò±ã·½·¨¡£Í¨¹ýµ÷Ó÷´×ªÃüÁÄã»áÊ¹ÔªËØÒÔ¶¯»ÐÎʽ±ä¶¯»ØÉÏÒ»¸ö¶¯»¿ªÊ¼Ö®Ç°µÄÖµ¡£·´×ªµÄ³£¼ûÓÃ;ÊǶ¯Ì¬ÏÔʾһ¸öģ̬¶Ô»°¿ò£¬È»ºóÔÚÓû§µã»÷“¹Ø±Õ”ºóÔÙ½«ÆäÒþ²ØÆðÀ´¡£
Èç¹ûÏëʵÏÖ¶¯»·´×ª£¬µ«È´Ã»ÓÐÓÅ»¯¹¤×÷Á÷³ÌµÄ»°£¬Äã»áÕâô×ö£º°ÑÉÏ´ÎÔÚÿ¸öÔªËØÉ϶¯Ì¬ÏÔʾµÄÌØ¶¨ÊôÐÔ¸ú×ټǼÏÂÀ´£¬ÒÔ±¸ºóÐø·´×ª¶¯»Ö®Óᣵ«ÊÇÔÚUI´úÂëÖиú×Ù֮ǰµÄ¶¯»×´Ì¬ºÜ¿ì¾Í»á±äµÃÄÑÒÔ¿ØÖÆ¡£ÓëÖ®ÐγÉÏÊÃ÷¶Ô±ÈµÄÊÇVelocity£¬Í¨¹ýreverseÃüÁî¾Í¿ÉÒÔ¼ÇסһÇС£
ÓëVelocityÖÐscrollÃüÁîµÄÓï·¨ÏàËÆ£¬reverseÃüÁîÒ²ÊÇͨ¹ý½«"reverse"×÷ΪVelocityµÄµÚÒ»¸ö²ÎÊý´«Èë¶øµ÷Óõģº
// µÚÒ»¸ö¶¯»£ºÉèÖÃÔªËØµÄopacityÊôÐԱ䶯ÖÁ0µÄ¶¯»
$element.velocity({ opacity: 0 });
// µÚ¶þ¸ö¶¯»£ºÉèÖÃÔªËØµÄopacityÊôÐÔÖµ±ä¶¯»Ø³õʼֵ1µÄ¶¯»
$element.velocity("reverse");
µ±Ì¸µ½JavaScriptµÄ¶¯»¶¨Ê±¿ØÖÆÊ±£¬¾Í²»½ö½öÊÇ·´×ªÄÇô¼òµ¥ÁË£ºJavaScript»¹ÔÊÐí¶ÔÈ«²¿ÕýÔÚÔËÐе͝»½øÐÐÈ«¾Ö¼õËÙ»ò¼ÓËÙ¡£µÚ4Õ»á½éÉÜÕâһǿ´ó¹¦ÄܵÄÏà¹ØÖªÊ¶¡£
1.3.3¡¡»ùÓÚÎïÀíµÄ¶¯Ð§
¶¯Ð§Éè¼ÆÖеÄÎïÀíÔÔò·´Ó³Á˳ɾÍÓÅÐãÓû§ÌåÑ飨UX£©µÄºËÐÄÔÔò£ºÄǾÍÊǰéËæ×ÅÓû§µÄÊäÈ룬½çÃæ³öÏÖ×ÔÈ»µÄ·´Ó¦¡£»»ÑÔÖ®£¬½çÃæÉè¼Æ×ñ´ÓÎïÌåÔÚÕæÊµÊÀ½çÖеÄÔ˶¯¹æÂÉ¡£
ÔÚVelocityÖÐÓÐÒ»¸ö¼òµ¥ÇÒÇ¿´óµÄÈëÃż¶ÎïÀí¶¯Ð§£¬¼´»ùÓÚµ¯»ÉÔ˶¯ÔÀíµÄ»º¶¯ÀàÐÍ¡££¨ÎÒÃÇ»áÔÚÏÂÒ»ÕÂÏêϸ̽ÌÖ»º¶¯µÄ¸ÅÄî¡££©Ê¹ÓõäÐ͵Ļº¶¯Ñ¡Ï¿ÉÒÔ´«ÈëÒ»¸öÓëÔ¤Ïȶ¨ÒåµÄ»º¶¯ÇúÏߣ¨ÀýÈ磬"ease"»ò"easeInOutSine"£©Ïà¶ÔÓ¦µÄ×Ö·û´®¡£Ïà·´£¬µ¯»ÉÎïÀí»º¶¯ÀàÐͽÓÊÜÒ»¸öº¬ÓÐÁ½¸öÏîµÄÊý×é×÷Ϊ²ÎÊý¡£
// ʹÓÃ500¸öÕÅÁ¦µ¥Î»ºÍ20¸öĦ²ÁÁ¦µ¥Î»µÄµ¯»ÉÎïÀí»º¶¯£¬ÉèÖý«ÔªËصĿí¶È±ä¶¯ÖÁ"500px"µÄ¶¯»
$element.velocity({ width: "500px" }, { easing: [ 500, 20 ] });
»º¶¯Êý×éÖеĵÚÒ»Ïî´ú±íµ¯»ÉµÄÕÅÁ¦£¬¶øµÚ¶þÏî´ú±íĦ²ÁÁ¦¡£ÕÅÁ¦ÖµÔ½´ó£¬¶¯»µÄ×ÜÌåËٶȾÍÔ½¿ì£¬×ÜÌå·´µ¯·ù¶È¾ÍÔ½´ó¡£Ä¦²ÁÁ¦ÖµÔ½µÍ£¬¶¯»Î²²¿Õñ¶¯µÄËٶȾÍÔ½¿ì¡£Í¨¹ýµ÷ÕûÕâЩÊýÖµ£¬¿ÉÒÔÎªÒ³ÃæÉÏÿһ¸ö¶¯»ÊµÏÖ¶ÀÌØµÄÔ˶¯Ð§¹û£¬ÕâÓÐÖúÓÚÇ¿»¯²»Í¬ÐÐΪ֮¼äµÄ²îÒì¡£