Äú¿ÉÒÔ¾èÖú£¬Ö§³ÖÎÒÃǵĹ«ÒæÊÂÒµ¡£

1Ôª 10Ôª 50Ôª





ÈÏÖ¤Â룺  ÑéÖ¤Âë,¿´²»Çå³þ?Çëµã»÷Ë¢ÐÂÑéÖ¤Âë ±ØÌî



  ÇóÖª ÎÄÕ ÎÄ¿â Lib ÊÓÆµ iPerson ¿Î³Ì ÈÏÖ¤ ×Éѯ ¹¤¾ß ½²×ù Model Center   Code  
»áÔ±   
   
 
     
   
 ¶©ÔÄ
  ¾èÖú
¡¶html5 canvas¶¯»­¡·¡ª¡ª»º¶¯¶¯»­
 
  8838  次浏览      29
 2018-2-26 
 
±à¼­ÍƼö:
±¾ÎÄÀ´×ÔÓÚ×÷Õß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µÄ¶¯»­¾Í¿´ÄãµÄÏëÏóÁ¦ÁË¡£

   
8838 ´Îä¯ÀÀ       29
Ïà¹ØÎÄÕÂ

Éî¶È½âÎö£ºÇåÀíÀôúÂë
ÈçºÎ±àд³öÓµ±§±ä»¯µÄ´úÂë
ÖØ¹¹-ʹ´úÂë¸ü¼ò½àÓÅÃÀ
ÍŶÓÏîÄ¿¿ª·¢"±àÂë¹æ·¶"ϵÁÐÎÄÕÂ
Ïà¹ØÎĵµ

ÖØ¹¹-¸ÄÉÆ¼ÈÓдúÂëµÄÉè¼Æ
Èí¼þÖØ¹¹v2
´úÂëÕû½àÖ®µÀ
¸ßÖÊÁ¿±à³Ì¹æ·¶
Ïà¹Ø¿Î³Ì

»ùÓÚHTML5¿Í»§¶Ë¡¢Web¶ËµÄÓ¦Óÿª·¢
HTML 5+CSS ¿ª·¢
ǶÈëʽC¸ßÖÊÁ¿±à³Ì
C++¸ß¼¶±à³Ì