±à¼ÍƼö: |
±¾ÎÄÀ´×ÔÓÚ×÷Õßadmin
,ÎÒÃǽ«Ê¹ÓÃÕâЩ»ù±¾µÄ¶¯»À´´´½¨Ò»Ð©¸ß¼¶¶¯»¡£½ñÌìÎÒÃǽéÉܵĵÚÒ»¸ö¸ß¼¶¶¯»½Ð×ö»º¶¯¶¯» |
|
Ç°ÃæµÄÕ½ÚÎÒÃǽéÉÜÁËÐí¶à»ù±¾µÄ¶¯»£¬ÔÚ±¾½ÚÎÒÃǽ«Ê¹ÓÃÕâЩ»ù±¾µÄ¶¯»À´´´½¨Ò»Ð©¸ß¼¶¶¯»¡£½ñÌìÎÒÃǽéÉܵĵÚÒ»¸ö¸ß¼¶¶¯»½Ð×ö»º¶¯¶¯»(ease),Ò²ÐíÔÚдcss¶¯»µÄʱºòÒѾ½Ó´¥¹ý
ease Õâ¸ö¸ÅÄî¡£µ«ÎÒÃǽñÌìÒª½éÉܵÄÊÇÈçºÎÔÚcanvasÖÐʵÏÖÕâÑùµÄ¶¯»Ð§¹û¡£±¾ÕÂÖ÷ÒªÄÚÈÝ£º
°Ù·Ö±ÈÔ˶¯µÄ¸ÅÄî
¶¨µã»º¶¯¶¯»
·Ç¶¨µã»º¶¯¶¯»
Ö»ÄÜÓÃÔÚÔ˶¯ÖÐÂð
1.°Ù·Ö±ÈÔ˶¯
°Ù·Ö±ÈÔ˶¯µÄ¸ÅÄîÊÇÎÒÃǽ²½â»º¶¯¶¯»£¬°üÀ¨ÏÂÒ»½Úµ¯ÐÔ¶¯»µÄºËÐÄ¡£ÕâÁ½¸ö¶¯»µÄºËÐĸÅÄî¶¼ÊÇ»ùÓÚ°Ù·Ö±ÈÔ˶¯£¬Ö»ÊÇ×÷ÓõÄÎïÀíÔªËØ²»Í¬¡£ÕâÀïÎÒÃǰѸÅÄî¶¼Ò»Æð½éÉÜÁË£¬ÏÂÒ»½Ú¾Í¿ÉÒÔÖ±½ÓÉϲˡ£
»º¶¯¶¯»ºÍµ¯ÐÔ¶¯»ÕâÁ½ÖÖ¶¯»£¬¶¼ÊÇÈÃÒ»¸öÎïÌå´Óµ±Ç°Î»ÖÃÒÆ¶¯µ½Ò»¸öÎÒÃÇÉ趨µÄÄ¿±êλÖá£ÔÚ»º¶¯¶¯»ÖУ¬ÎïÌåÊÇÓɿ쵽ÂýµÄ»¬Ðе½Ä¿±êλÖã¬È»ºóÍ£Ö¹¡£ÔÚµ¯ÐÔ¶¯»ÖУ¬ÎïÌåÔ˶¯µ½Ä¿±êλÖõÄʱºò£¬²¢²»»áÁ¢¿ÌÍ£Ö¹¶øÊÇÒÔÄ¿±êλÖÃΪÖÐÐĵã×öÒ»¸öÀàËÆµ¯»ÉµÄÍù¸´Ô˶¯£¬×îÖÕ»áÍ£Ö¹ÔÚÄ¿±êλÖá£ÎªÁËÈôó¼ÒÓиö¸üÖ±¹ÛµÄÈÏʶ£¬À´Á½ÕŶ¯Í¼¡£
»º¶¯¶¯»(easing)

µ¯ÐÔ¶¯»(spring)

Á½ÖÖ¶¯»¶¼ÓÐ×ÅÒ»ÑùµÄÁ÷³Ì£º
ÉèÖÃÄ¿±êλÖÃ
¼ÆË㵽Ŀ±êλÖõľàÀë
¸ù¾Ý¾àÀë°Ù·Ö±È¼ÆËãËÙ¶È»ò¼ÓËÙ¶È
ÕâÁ½ÖÖ¶¯»Î¨Ò»µÄ²»Í¬ÊÇ£º»º¶¯¶¯»ÖУ¬¾àÀëµÄ°Ù·Ö±È×÷ÓÃÓÚËÙ¶È£¬ÎïÌå¾àÀëÄ¿±êλÖÃÔ½Ô¶£¬Ô˶¯µÄËٶȾÍÔ½´ó£¬Ëæ×ÅÎïÌå¾àÀëÄ¿±êλÖÃÔ½À´Ô½½ü£¬ËÙ¶ÈÖð½¥½µµÍΪÁ㣬ֹͣÔÚÄ¿±êλÖᣵ¯ÐÔ¶¯»ÖУ¬¾àÀëµÄ°Ù·Ö±È×÷ÓÃÓÚ¼ÓËÙ¶È£¬Í¬ÑùÊǾàÀëÄ¿±êλÖÃÔ½Ô¶£¬¼ÓËÙ¶ÈÔ½´ó£¬Ëæ×žàÀëÔ½À´Ô½½ü£¬¼ÓËÙ¶È×îÖÕΪÁã¡£
2. ¶¨µã»º¶¯¶¯»
ÔÚÉÏͼµÄ»º¶¯¶¯»ÖÐÎÒÃÇ¿ÉÒÔ¿´µ½£¬Ð¡ÇòÔ˶¯µ½Ä¿±êλÖõÄËÙ¶È£¬ÓÐÒ»¸öÓɿ쵽ÂýµÄ¹ý³Ì¡£ÕâÀïÎÒÃÇÊÇÔõÑùʵÏÖµÄÄØ£¿ÆäʵÔÀíºÜ¼òµ¥£º

easing¾ÍÊÇÎÒÃÇÉ趨µÄ»º¶¯²ÎÊý£¬Ã¿Ò»Ö¡¶¼³ËÒÔ¾àÀë£¬Ëæ×žàÀëµÄ²»¶Ï¼õС£¬ËÙ¶ÈÒ²¾Í²»¶Ï¼õС¡£¹â˵²»Á·¼Ù°Ñʽ£¬ÉÏ´úÂ룺
<canvas id="canvas"
width="500" height="500" style="background-color:
#000;">
</canvas>
<script type="text/javascript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/ball.js"></script>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
var ball = new Ball(20, "red"),
easing = 0.05, //ÉèÖûº¶¯²ÎÊý
targetX = canvas.width/2; //É趨Ŀ±êλÖÃ
ball.y = canvas.height/2;
(function drawFrame(){
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
//ËٶȼÆËã
//Ëæ×Åball.xµÄÔö´ó£¬ (targetX - ball.x)µÄÖµ²»¶Ï¼õС£¬ µ¼ÖÂvx²»´ò¶Ï¼õС
var vx = (targetX - ball.x)*easing;
ball.x += vx;
ball.draw(context);
}())
}
</script> |
Ч¹ûͼÕâÀï¾Í²»ÉÏÁË£¬ºÍÉÏÃæÕ¹Ê¾µÄÒ»Ñù¡£ÕâÀïÖ»ÊÇչʾÁËˮƽ·½ÏòµÄÔ˶¯£¬ÄãÒ²¿ÉÒÔ¼ÓÉÏÊúÖ±·½Ïò»òÕßÈÎÒâµÄÄ¿±êλÖãº
var targetX =
ÈÎÒâλÖÃ;
var targetY = ÈÎÒâλÖÃ; |
È»ºóÔÙ¶¯»Ñ»·ÖУº
var vx = (targetX
- ball.x)*easing;
var vy = (targetY - ball.y)*easing; |
ok,ÎÒÃǾͿÉÒԵõ½ÏòÈÎÒâλÖÃÔ˶¯µÄ»º¶¯¶¯»ÁË£¡ÊDz»ÊǺܼòµ¥¡£
µ±È»£¬ÕâÀﻹÓиöÎÊÌ⡣ΪÁËÌáÉý¶¯»µÄÐÔÄÜ£¬ÔÚÕâÀïÎÒÃÇ¿ÉÒÔ×ö¸öÌõ¼þÏÞÖÆ¡£ÔÚ¶¯»Ñ»·À
var stopAni =
window.requestAnimationFrame(drawFrame, canvas);
...
var dx = targetX - ball.x;
if(Math.abs(dx)<1){
ball.x = canvas.width/2;
//Í£Ö¹¶¯»
window.cancelAnimationFrame(stopAni);
}else{
var vx = dx*easing;
ball.x += vx;
}
... |
3.·Ç¶¨µã»º¶¯¶¯»
˵µ½·Ç¶¨µã»º¶¯¶¯»£¬ÄãÓÐûÓÐÏëµ½ÔÚǰ¼¸ÕÂÀï½²µ½µÄ¸úËæÊó±êÔ˶¯µÄ¼ýÍ·°¡£¡ºÃ°É£¬¿ÉÁ¯µÄÊó±êÎÒÃÇÕâ´ÎÓÖÒªÓõ½ÄãÁË¡£ÎÒÃÇÈÃÊó±êµÄλÖÃ×÷ΪÎÒÃǵÄÄ¿±êλÖã¨target£©£¬È»ºóÈÃСÇò×ö»º¶¯¶¯»£¬¿´¿´ÄܳöÏÖʲôÑù¾«²ÊµÄЧ¹û.

¿´Õâ¸ö¶¯»¿´ÉÏÈ¥ÊDZȲ»ÊǸú¼ÒµÄƽ»¬ÓÐÖʸÐÄØ£¿(ÔÁÂÎÒ£¬ÎÒÒ²²»ÖªµÀÖʸÐÊǸöʲô¹í£¡£¡£¡)£¬ÉÏ´úÂ룺
window.onload
= function(){
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
var mouse = utils.captureMouse(canvas); //²¶»ñÊó±êλÖÃ
var ball = new Ball(20, "red");
var vx, vy, easing=0.05; //É趨»º¶¯²ÎÊý
(function drawFrame(){
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
vx = (mouse.x - ball.x)*easing; //Ò»ÑùÑùµÄ
vy = (mouse.y - ball.y)*easing; //Ò»ÑùÑùµÄ
ball.x += vx;
ball.y += vy;
ball.draw(context);
}())
} |
ÊDz»ÊǸϽÅÓеã¹ýÓÚ¼òµ¥ÁËÄØ£¿ÎÒÃÇÀ´¸öÄѵãµÄ£¬ÔÙÀ´Ò»¸öСÇò£¬ÈÃËü¸ú×Åǰһ¸öСÇò×ß¡£Ð§¹ûͼÊÇÕâÑùµÄ£º

´úÂëÄØÎÒÕâÀï¾Í²»Àý³öÀ´ÁË£¬ÒòΪ³´¼¦¼òµ¥£¡£¡£¡Ö»Òª¸Ä¸ÄÉÏÃæµÄ´úÂë¾Í¿ÉÒÔÁË¡£
4. Ö»ÄÜÓÃÔÚÔ˶¯ÖÐÂð
»º¶¯¶¯»Ö»ÄÜÓÃÔÚÔ˶¯ÖÐÂð£¿Õâ¿Ï¶¨ÊDz»¿ÉàÅÄǸöµÄÀ²¡£ÎªÁËÈÃÄã¸üºÃµÄÀí½â£¬ÕâÀïÎÒÃǾټ¸¸ö»º¶¯¶¯»ÓÃÔÚÆäËû·½ÃæµÄÀý×Ó
1.Ðýת£¨Rotation£©
É趨µ±Ç°ÐýתËٶȺÍÄ¿±êÐýתËÙ¶È¡£µ±È»ÕâÀïÎÒÃÇÒªÒýÈëһЩÎïÌ壬±ÈÈçÎÒÃÇÒÔǰÓùýµÄ¼ýÍ·Arrow.
var rotation =
90,
targetRotation = 270;
//then ease it:
rotation += (targetRotation - rotation) * easing;
arrow.rotation = rotation * Math.PI / 180; |
2.ÑÕÉ«£¨Colors£©
É趨³õʼµÄÑÕɫֵ
var red = 255,
green = 0,
blue = 0,
redTarget = 0,
greenTarget = 0,
blueTarget = 255; |
È»ºóÔÚdrawFrameÖУ¬easing it:
red += (redTarget
-red) * easing;
green += (greenTarget -green) * easing;
blue += (blueTarget -blue) * easing; |
È»ºó°ÑÕâÈý¸öֵת»»ÎªÒ»¸ö16½øÖƵÄÖµ£º
var color= red
<< 16 | green << 16 | blue |
3.͸Ã÷¶È£¨Transparency£©
É趨͸Ã÷¶È£ºs
var alpha = 0,
targetAlpha = 1;
//¶¯»Ñ»·ÖÐ B5½Ì³ÌÍø
alpha += (targetAlpha - alpha) * easing;
ball.color = "rgba(255, 0, 0," + alpha
+ "); |
ok,±¾ÕÂÄÚÈݾ͵½ÕâÀïÁË£¬¸ü¶à¸ß¼¶»º¶¯¶¯»¿´ÕâÀï https://github.com/lamberta/html5-animation¡£»º¶¯¶¯»µÄÔÀí¼°Ê¹Ó÷½·¨ÒѾ¸æËßÄãÁË£¬ÄÜ´´Ôì³öʲôÑùamazingµÄ¶¯»¾Í¿´ÄãµÄÏëÏóÁ¦ÁË¡£
|