[模仿]Google Doodles 的春分和秋分
Google Doodles 的春分和秋分
4/22，4/23时模仿的，基本没有什么技术，就是在设计上面比较麻烦
----------
用到的东西
1. canvas 2个，一个画人，一个画景
2. html5 动画
3. PS 这块就完全使用Google的了，反正是学习
4. 实现方法没有去看google代码，因为逻辑不复杂
---------
效果图：
春分
秋分
------------------------
代码：(春分和秋分代码相似，这里只贴出春分代码)
1. html
1 <!DOCTYPE html> 2 <head> 3 <title>CGM002-doodles-20140422[春分]</title> 4 <script src="js/libs/jquery-1.11.0.js"></script> 5 <script src="js/libs/requestNextAnimationFrame.js"></script> 6 <script src="js/libs/sprites.js"></script> 7 <script src="js/data/data.js"></script> 8 <style> 9 body {font-size:13px;} 10 </style> 11 </head> 12 <body> 13 <div style="position:absolute;bottom:0px;left:0px;"> 14 <h1 style="margin-bottom:2px;">春分</h1> 15 <span>资源来自google，2014年4月22日 版权所有©王欣盛</span> 16 </div> 17 </body> 18 <script src="js/action/doodles001_Action.js"></script> 19 </html>
2. requestNextAnimationFrame.js （兼容浏览器的动画工具js）
1 /* 2 * Copyright (C) 2012 David Geary. This code is from the book 3 * Core HTML5 Canvas, published by Prentice-Hall in 2012. 4 * 5 * License: 6 * 7 * Permission is hereby granted, free of charge, to any person 8 * obtaining a copy of this software and associated documentation files 9 * (the "Software"), to deal in the Software without restriction, 10 * including without limitation the rights to use, copy, modify, merge, 11 * publish, distribute, sublicense, and/or sell copies of the Software, 12 * and to permit persons to whom the Software is furnished to do so, 13 * subject to the following conditions: 14 * 15 * The above copyright notice and this permission notice shall be 16 * included in all copies or substantial portions of the Software. 17 * 18 * The Software may not be used to create training material of any sort, 19 * including courses, books, instructional videos, presentations, etc. 20 * without the express written consent of David Geary. 21 * 22 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 23 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 24 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 25 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 26 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 27 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 28 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 29 * OTHER DEALINGS IN THE SOFTWARE. 30 */ 31 32 window.requestNextAnimationFrame = 33 (function () { 34 var originalWebkitRequestAnimationFrame = undefined, 35 wrapper = undefined, 36 callback = undefined, 37 geckoVersion = 0, 38 userAgent = navigator.userAgent, 39 index = 0, 40 self = this; 41 42 // Workaround for Chrome 10 bug where Chrome 43 // does not pass the time to the animation function 44 45 if (window.webkitRequestAnimationFrame) { 46 // Define the wrapper 47 48 wrapper = function (time) { 49 if (time === undefined) { 50 time = +new Date(); 51 } 52 self.callback(time); 53 }; 54 55 // Make the switch 56 57 originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame; 58 59 window.webkitRequestAnimationFrame = function (callback, element) { 60 self.callback = callback; 61 62 // Browser calls the wrapper and wrapper calls the callback 63 64 originalWebkitRequestAnimationFrame(wrapper, element); 65 } 66 } 67 68 // Workaround for Gecko 2.0, which has a bug in 69 // mozRequestAnimationFrame() that restricts animations 70 // to 30-40 fps. 71 72 if (window.mozRequestAnimationFrame) { 73 // Check the Gecko version. Gecko is used by browsers 74 // other than Firefox. Gecko 2.0 corresponds to 75 // Firefox 4.0. 76 77 index = userAgent.indexOf('rv:'); 78 79 if (userAgent.indexOf('Gecko') != -1) { 80 geckoVersion = userAgent.substr(index + 3, 3); 81 82 if (geckoVersion === '2.0') { 83 // Forces the return statement to fall through 84 // to the setTimeout() function. 85 86 window.mozRequestAnimationFrame = undefined; 87 } 88 } 89 } 90 91 return window.requestAnimationFrame || 92 window.webkitRequestAnimationFrame || 93 window.mozRequestAnimationFrame || 94 window.oRequestAnimationFrame || 95 window.msRequestAnimationFrame || 96 97 function (callback, element) { 98 var start, 99 finish; 100 101 window.setTimeout( function () { 102 start = +new Date(); 103 callback(start); 104 finish = +new Date(); 105 106 self.timeout = 1000 / 60 - (finish - start); 107 108 }, self.timeout); 109 }; 110 } 111 ) 112 ();
3. 图片素材
4. 数据js （从google的代码里找到的）
1 // person's position 2 // [targetX,targetY] length:132 3 personPosData = [[141, 56], [141, 57], [139, 57], [140, 58], [141, 57], [141, 58], [139, 57], [138, 56], [135, 55], [127, 54], [116, 56], [109, 58], [99, 60], [94, 60], [94, 59], [94, 59], [94, 59], [94, 59], [94, 60], [94, 60], [101, 58], [110, 56], [117, 56], [134, 54], [146, 54], [156, 54], [169, 54], [182, 53], [185, 54], [180, 58], [177, 62], [175, 61], [171, 58], [172, 58], [171, 58], [171, 58], [180, 56], [193, 58], [208, 57], [217, 58], [222, 57], [234, 57], [238, 58], [238, 58], [238, 58], [238, 58], [234, 57], [244, 55], [260, 52], [261, 51], [262, 51], [251, 52], [254, 56], [255, 59], [256, 59], [256, 58], [256, 58], [256, 59], [251, 57], [253, 57], [254, 56], [254, 56], [254, 57], [250, 55], [248, 54], [248, 54], [250, 55], [256, 56], [256, 56], [255, 56], [255, 56], [255, 56], [255, 56], [252, 54], [250, 52], [249, 46], [246, 38], [245, 21], [245, 21], [246, 21], [244, 20], [244, 19], [245, 19], [244, 20], [244, 19], [246, 38], [249, 46], [250, 52], [252, 54], [256, 56], [256, 56], [255, 56], [255, 56], [255, 56], [255, 56], [255, 56], [255, 56], [255, 56], [256, 56], [255, 57], [256, 56], [256, 56], [255, 56], [255, 56], [255, 56], [255, 56], [255, 56], [255, 56], [255, 56], [256, 56], [255, 57], [256, 56], [256, 56], [255, 56], [255, 56], [255, 56], [255, 56], [255, 56], [255, 56], [255, 56], [256, 56], [255, 57], [256, 56], [256, 56], [255, 56], [255, 56], [255, 56], [255, 56], [255, 56], [255, 56], [255, 56], [256, 56]], 4 // use the data's number 5 // 1~112 length:112 6 goNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112], 7 // after play over's person's work 8 // 113~132 length:20 9 goOverNum = [113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132], 10 // canvas's width and height and the cutting of background's flowers's pics 11 flowersObjData = { 12 width: 480, 13 height: 160, 14 // length:132 15 // [[targetX,targetY,sourceX,sourceY,sourceW,sourceH][,...]] 16 frames: [[[0, 0, 0, 0, 480, 160]], [], [], [], [], [], [], [], [], [], [], [], [], [], [[78, 118, 270, 1218, 26, 23]], [[59, 118, 205, 1139, 45, 38]], [[55, 118, 104, 1066, 49, 41]], [[54, 117, 52, 1099, 50, 43]], [[54, 117, 104, 1109, 49, 43]], [], [[55, 117, 205, 1094, 48, 43]], [[59, 147, 130, 1308, 4, 9], [64, 130, 56, 1352, 14, 26], [79, 120, 117, 1289, 6, 8], [81, 134, 109, 1349, 7, 5], [80, 149, 125, 1352, 4, 8], [87, 147, 130, 1300, 4, 6], [91, 131, 105, 1322, 7, 6]], [[58, 148, 109, 1337, 7, 10]], [[54, 139, 39, 1331, 16, 19]], [[53, 124, 20, 1337, 17, 34]], [[41, 124, 432, 1208, 37, 34]], [[25, 118, 0, 981, 53, 40]], [[19, 111, 252, 1139, 45, 47]], [[4, 97, 64, 927, 58, 61]], [[0, 81, 274, 753, 63, 77]], [[0, 61, 208, 753, 64, 97]], [[3, 39, 0, 860, 62, 119], [154, 115, 110, 1233, 32, 28]], [[8, 23, 0, 723, 69, 135], [124, 115, 403, 844, 62, 44]], [[7, 16, 398, 700, 74, 142], [123, 118, 253, 874, 61, 41]], [[6, 11, 354, 319, 97, 147], [123, 119, 127, 866, 61, 40]], [[6, 3, 354, 162, 109, 155], [123, 119, 190, 866, 61, 40]], [[7, 0, 118, 162, 116, 158], [124, 119, 124, 927, 58, 39]], [[7, 0, 0, 162, 116, 158], [128, 149, 109, 1356, 6, 9], [159, 118, 108, 1286, 7, 7], [141, 131, 210, 1228, 28, 26], [170, 149, 122, 1333, 4, 7]], [[128, 132, 72, 1334, 13, 26], [159, 118, 107, 1303, 7, 7], [141, 131, 211, 1179, 28, 26], [170, 149, 125, 1362, 4, 7]], [[131, 124, 83, 1292, 10, 26]], [[123, 109, 270, 1243, 25, 40]], [[120, 102, 178, 1179, 31, 47], [211, 105, 178, 1228, 30, 33]], [[198, 105, 155, 1066, 48, 50]], [[196, 110, 0, 1099, 50, 48]], [[195, 111, 110, 1016, 52, 48]], [[194, 111, 55, 990, 53, 48]], [[120, 100, 76, 1154, 32, 37], [191, 111, 238, 965, 55, 48]], [[118, 99, 38, 1227, 35, 34], [197, 147, 116, 1307, 5, 9], [205, 131, 117, 1289, 6, 8], [206, 145, 72, 1362, 12, 10], [218, 119, 107, 1312, 7, 8], [220, 132, 109, 1349, 7, 5], [225, 150, 125, 1362, 4, 7]], [[113, 99, 433, 1112, 46, 34], [200, 139, 86, 1362, 12, 19]], [[103, 88, 140, 814, 66, 50], [199, 120, 53, 1263, 13, 37]], [[102, 87, 71, 814, 67, 49], [197, 105, 0, 1315, 18, 53]], [[194, 89, 349, 1226, 23, 69], [380, 85, 423, 1244, 22, 12], [377, 97, 270, 1203, 26, 13], [403, 93, 95, 1313, 9, 5]], [[380, 85, 399, 1219, 22, 12], [377, 97, 270, 1188, 26, 13], [403, 93, 83, 1320, 9, 5], [408, 99, 409, 983, 54, 44]], [[408, 99, 64, 865, 61, 60], [469, 149, 123, 1310, 5, 8]], [[423, 117, 380, 1029, 51, 43]], [[7, 0, 236, 162, 116, 158], [423, 117, 155, 1118, 48, 43]], [[13, 3, 420, 1258, 21, 22], [91, 3, 437, 1293, 18, 15], [96, 48, 374, 1271, 19, 22], [423, 117, 433, 1069, 47, 41]], [[13, 3, 397, 1259, 21, 20], [96, 48, 395, 1281, 19, 22], [418, 117, 164, 1016, 52, 41]], [[407, 119, 274, 832, 63, 40]], [[394, 126, 339, 844, 62, 33]], [[394, 121, 71, 775, 68, 37]], [[396, 109, 71, 723, 68, 50]], [[193, 87, 323, 1226, 24, 43], [191, 135, 241, 1188, 27, 6], [216, 141, 471, 1208, 2, 2], [388, 128, 392, 1148, 42, 31], [430, 96, 0, 1176, 36, 62]], [[176, 87, 303, 918, 57, 41], [388, 88, 163, 668, 79, 70]], [[175, 93, 316, 879, 59, 37], [396, 79, 244, 672, 76, 79]], [[175, 97, 377, 890, 59, 42], [200, 141, 116, 1318, 5, 6], [204, 149, 110, 1263, 6, 6], [397, 106, 68, 1280, 13, 52], [427, 72, 326, 1026, 52, 86]], [[394, 89, 457, 1293, 18, 69]], [[389, 48, 240, 1207, 28, 110]], [[388, 24, 144, 1163, 32, 134]], [[394, 16, 20, 1290, 18, 30], [387, 55, 75, 1207, 34, 24], [387, 90, 38, 1207, 35, 18], [436, 71, 436, 1148, 40, 18], [429, 91, 272, 1015, 52, 47]], [[394, 7, 0, 1275, 18, 38], [386, 45, 0, 1240, 36, 33], [385, 82, 0, 1149, 37, 25], [428, 70, 0, 1023, 53, 74]], [[381, 1, 346, 1118, 44, 106], [428, 70, 218, 1016, 52, 76]], [[283, 140, 477, 1168, 3, 3]], [[283, 140, 477, 1194, 3, 3], [395, 27, 39, 1322, 16, 7], [398, 39, 95, 1304, 10, 7], [386, 60, 39, 1363, 15, 8], [388, 100, 123, 1320, 5, 5], [411, 67, 97, 1331, 8, 11]], [[394, 21, 20, 1275, 18, 13], [385, 55, 38, 1189, 36, 16], [385, 90, 38, 1176, 36, 11]], [], [[303, 43, 38, 1263, 13, 9]], [[293, 39, 374, 1242, 23, 15], [291, 54, 116, 1299, 5, 6]], [[262, 65, 117, 1356, 6, 5], [260, 79, 125, 1288, 6, 3], [271, 39, 433, 1029, 47, 38]], [[260, 39, 184, 908, 58, 43]], [[262, 39, 352, 982, 55, 42], [266, 81, 125, 1293, 5, 5]], [[262, 39, 421, 934, 56, 47]], [[264, 39, 295, 965, 55, 45]], [[264, 58, 68, 1266, 13, 12], [270, 70, 96, 1286, 10, 7], [262, 77, 97, 1266, 11, 9], [281, 41, 392, 1181, 38, 36]], [[264, 65, 117, 1282, 6, 5], [264, 71, 125, 1282, 6, 4], [262, 77, 94, 1320, 9, 9], [273, 51, 443, 1262, 20, 29], [296, 42, 399, 1233, 22, 17]], [[264, 71, 130, 1300, 4, 6], [266, 80, 122, 1327, 4, 4], [275, 56, 83, 1281, 11, 9], [274, 67, 83, 1266, 12, 13], [286, 54, 117, 1282, 6, 5], [288, 67, 130, 1300, 4, 6], [296, 43, 447, 1244, 22, 16]], [[279, 59, 105, 1322, 7, 6], [302, 45, 109, 1349, 7, 5], [310, 47, 117, 1282, 6, 5]], [], [], [], [[306, 53, 123, 1300, 5, 8], [317, 63, 107, 1330, 7, 5]], [[282, 111, 116, 1326, 4, 8], [305, 50, 117, 1363, 6, 11], [317, 62, 95, 1295, 10, 7]], [[282, 111, 125, 1352, 4, 8], [282, 119, 118, 1342, 4, 8], [305, 45, 118, 1263, 6, 17], [312, 56, 20, 1322, 17, 13]], [[282, 119, 125, 1352, 4, 8], [282, 130, 124, 1342, 4, 8], [304, 42, 100, 1344, 7, 20], [312, 54, 416, 1282, 19, 14]], [[282, 130, 125, 1352, 4, 8], [283, 138, 477, 1185, 3, 7], [302, 37, 75, 1233, 33, 31], [319, 68, 107, 1295, 7, 6]], [[283, 138, 477, 1199, 3, 7], [302, 36, 436, 1168, 39, 38]], [[290, 65, 87, 1331, 8, 6], [301, 35, 299, 1114, 45, 38]], [[288, 64, 97, 1277, 11, 7], [300, 31, 380, 1074, 51, 42]], [[284, 63, 39, 1352, 15, 9], [299, 28, 124, 968, 55, 46]], [[281, 28, 322, 700, 74, 46]], [[277, 61, 374, 1259, 21, 10], [298, 28, 244, 917, 57, 46]], [[275, 57, 374, 1226, 23, 14], [299, 28, 181, 968, 55, 46]], [[274, 53, 297, 1243, 24, 18], [298, 28, 362, 934, 57, 46]], [[274, 28, 83, 556, 81, 46]], [[274, 28, 0, 558, 81, 48]], [[274, 27, 165, 615, 80, 51], [283, 140, 477, 1179, 3, 4]], [[275, 26, 247, 615, 80, 55], [283, 140, 477, 1173, 3, 4]], [[274, 26, 332, 585, 81, 56]], [[274, 25, 252, 441, 82, 57]], [[274, 25, 336, 468, 82, 57]], [[274, 25, 168, 381, 82, 57]], [[274, 24, 0, 322, 83, 58]], [[275, 24, 252, 322, 82, 58]], [[274, 28, 83, 500, 81, 54]], [[274, 27, 329, 643, 80, 55]], [[274, 26, 249, 556, 81, 56]], [[274, 26, 0, 500, 81, 56], [283, 140, 477, 1179, 3, 4]], [[274, 25, 252, 382, 82, 57], [283, 140, 477, 1173, 3, 4]], [[275, 25, 166, 500, 81, 57]], [[274, 25, 168, 440, 82, 57]], [[274, 25, 0, 382, 82, 57]], [[274, 28, 249, 500, 81, 54]], [[274, 27, 0, 666, 80, 55]], [[274, 26, 332, 527, 81, 56]], [[275, 26, 83, 604, 80, 56]], [[274, 25, 85, 322, 82, 57]], [[274, 25, 84, 441, 82, 57]], [[274, 25, 84, 382, 82, 57], [283, 140, 477, 1179, 3, 4]], [[274, 25, 0, 441, 82, 57], [283, 140, 477, 1173, 3, 4]], [[274, 28, 166, 559, 81, 54]], [[275, 27, 82, 666, 79, 55]], [[274, 26, 0, 608, 81, 56]]] 17 }, 18 // the cutting of person's pics 19 // length:133 20 // first one is blank 21 // [sourceX,sourceY,sourceWidth,sourceHeight] 22 personObjData = [/*[554, 1084, 600, 1], */[1799, 324, 137, 103], [697, 750, 138, 102], [1525, 786, 139, 103], [345, 574, 138, 101], [1150, 682, 137, 101], [345, 782, 137, 101], [96, 828, 139, 103], [554, 217, 140, 104], [1383, 0, 146, 105], [1301, 1085, 156, 106], [697, 323, 166, 104], [1125, 217, 173, 101], [865, 1088, 176, 99], [450, 108, 176, 100], [1978, 217, 177, 101], [345, 678, 177, 101], [1978, 1095, 175, 101], [1799, 780, 176, 101], [1978, 891, 176, 100], [1799, 430, 176, 100], [1301, 872, 178, 102], [345, 991, 173, 104], [554, 1088, 171, 104], [1978, 321, 156, 106], [1799, 1096, 148, 106], [96, 361, 138, 106], [554, 538, 119, 106], [831, 0, 112, 107], [946, 107, 119, 106], [96, 581, 141, 102], [1978, 994, 169, 98], [1525, 892, 167, 98], [1525, 993, 167, 101], [1301, 768, 166, 101], [876, 791, 167, 101], [1383, 108, 167, 102], [557, 0, 164, 104], [876, 324, 148, 102], [697, 217, 122, 103], [1799, 675, 117, 102], [1301, 431, 115, 102], [1872, 0, 106, 102], [724, 0, 104, 102], [1525, 1097, 104, 102], [554, 647, 103, 102], [1068, 0, 104, 102], [345, 886, 106, 102], [0, 0, 93, 105], [1301, 536, 78, 108], [96, 249, 83, 109], [240, 748, 83, 109], [96, 470, 131, 108], [1799, 884, 160, 104], [1872, 105, 177, 101], [697, 855, 176, 101], [1525, 217, 176, 102], [1799, 991, 175, 102], [1978, 680, 175, 101], [1553, 107, 170, 103], [697, 537, 159, 103], [1301, 324, 160, 104], [1125, 321, 160, 104], [1978, 430, 159, 103], [1301, 977, 158, 105], [1157, 1070, 130, 106], [96, 934, 103, 106], [450, 0, 104, 105], [240, 213, 101, 104], [554, 324, 101, 104], [554, 431, 102, 104], [697, 959, 101, 104], [240, 0, 102, 104], [1010, 959, 102, 104], [876, 682, 118, 106], [1157, 959, 129, 108], [1125, 428, 134, 114], [1382, 536, 140, 122], [96, 107, 141, 139], [96, 686, 141, 139], [1799, 533, 140, 139], [1726, 0, 143, 140], [980, 538, 142, 141], [1978, 536, 141, 141], [1525, 429, 143, 140], [345, 217, 142, 141], [554, 959, 140, 122], [728, 1088, 134, 114], [554, 752, 129, 108], [980, 429, 118, 106], [2052, 0, 101, 104], [1525, 322, 101, 104], [801, 959, 102, 104], [1279, 0, 101, 104], [240, 641, 102, 104], [345, 361, 102, 104], [697, 643, 102, 104], [1044, 1088, 101, 104], [450, 361, 101, 103], [906, 959, 101, 104], [1301, 661, 101, 103], [240, 534, 101, 104], [96, 0, 101, 104], [1301, 217, 102, 104], [876, 217, 101, 104], [1978, 784, 102, 104], [345, 107, 102, 104], [96, 1043, 102, 104], [345, 0, 101, 104], [240, 860, 101, 103], [1525, 572, 101, 104], [1695, 322, 101, 103], [450, 467, 101, 104], [1046, 789, 101, 104], [697, 430, 102, 104], [980, 217, 101, 104], [1553, 0, 102, 104], [240, 320, 102, 104], [1632, 1097, 102, 104], [1150, 789, 101, 104], [240, 107, 101, 103], [1046, 682, 101, 104], [1695, 428, 101, 103], [1405, 661, 101, 104], [1175, 0, 101, 104], [240, 427, 102, 104], [1799, 217, 101, 104], [946, 0, 102, 104], [1525, 679, 102, 104], [831, 110, 102, 104], [345, 1098, 101, 104], [876, 429, 101, 103], [876, 538, 101, 104]], 23 personPicUrl = "imgs/sprite-springframes.png", 24 flowerPicUrl = "imgs/sprite-springcrush.png", 25 bgUrl = "imgs/bg.png";
5. 动画代码
1 $(function(){ 2 // wait to load Image 3 var bgDiv = document.createElement("div"); 4 bgDiv.style.position = "absolute"; 5 bgDiv.style.left = 0 + "px"; 6 bgDiv.style.top = 0 + "px"; 7 bgDiv.style.width = flowersObjData.width + "px"; 8 bgDiv.style.height = flowersObjData.height + "px"; 9 bgDiv.style.background = "url(" + bgUrl + ") no-repeat"; 10 document.body.appendChild(bgDiv); 11 12 // load img 13 var loadAll = 2, 14 loadCur = 0; 15 personImg = new Image(), 16 flowerImg = new Image(); 17 personImg.src = personPicUrl; 18 flowerImg.src = flowerPicUrl; 19 personImg.onload = function(){if((++loadCur) == loadAll)startAnimation();}; 20 flowerImg.onload = function(){if((++loadCur) == loadAll)startAnimation();}; 21 22 // casnvas 23 var personCanvas = document.createElement("canvas"), 24 flowerCanvas = document.createElement("canvas"), 25 personContext = personCanvas.getContext("2d"), 26 flowerContext = flowerCanvas.getContext("2d"); 27 personCanvas.style.position = "absolute"; 28 personCanvas.style.left = 0 + "px"; 29 personCanvas.style.top = 0 + "px"; 30 personCanvas.width = flowersObjData.width; 31 personCanvas.height = flowersObjData.height; 32 flowerCanvas.style.position = "absolute"; 33 flowerCanvas.style.left = 0 + "px"; 34 flowerCanvas.style.top = 0 + "px"; 35 flowerCanvas.width = flowersObjData.width; 36 flowerCanvas.height = flowersObjData.height; 37 38 // animate control 39 var lastFpsUpdateTime = (+new Date), 40 currIndex = 0, 41 animateComplete = false; 42 43 // doAnimation 44 function startAnimation(){ 45 doAnimateInit(); 46 } 47 48 function doAnimateInit(){ 49 // initCanvas 50 document.body.appendChild(flowerCanvas); 51 document.body.appendChild(personCanvas); 52 // hide bgDiv 53 bgDiv.style.visibility = "hidden"; 54 animate(); 55 } 56 57 function animate(time){ 58 var now = (+new Date); 59 if (now - lastFpsUpdateTime > 100) { 60 lastFpsUpdateTime = now; 61 // doAnimate 62 63 //calc currIndex 64 if(!animateComplete && currIndex >= goNum.length ){animateComplete = true;} 65 var curr; 66 if(animateComplete){ 67 if(currIndex >= goOverNum.length + goNum.length - 2){currIndex = goOverNum[0];} 68 curr = goOverNum[currIndex - goOverNum[0] + 1] - 1; 69 }else{ 70 curr = goNum[currIndex]-1; 71 } 72 73 // draw pics 74 // flowers 75 for(fi = 0;fi<flowersObjData.frames[curr].length;fi++){ 76 flowerContext.drawImage(flowerImg, flowersObjData.frames[curr][fi][2], flowersObjData.frames[curr][fi][3], flowersObjData.frames[curr][fi][4], flowersObjData.frames[curr][fi][5], flowersObjData.frames[curr][fi][0], flowersObjData.frames[curr][fi][1], flowersObjData.frames[curr][fi][4], flowersObjData.frames[curr][fi][5]); 77 } 78 // person 79 personContext.clearRect(0, 0, flowersObjData.width, flowersObjData.height); 80 personContext.drawImage(personImg, personObjData[curr][0],personObjData[curr][1], personObjData[curr][2], personObjData[curr][3], personPosData[curr][0], personPosData[curr][1], personObjData[curr][2], personObjData[curr][3]); 81 82 currIndex++; 83 } 84 85 window.requestNextAnimationFrame(animate); 86 } 87 });
--------
CSDN下载地址：（可单机运行）
http://download.csdn.net/detail/wangxsh42/7533323
