【OneAPM】极客编程挑战#025：发挥想象生成漂亮炫酷的SVG动画效果

时间：2015-07-01 20:22:08 阅读：128 评论：0 收藏：0 [点我收藏+]

标签：

本期挑战

提供如下的SVG图形，请使用任何技术生成基于如下SVG图形的动画效果，看看谁设计的动画效果最酷 ~~

<svg
width="720px"
height="486px">
<g id="layer1">
<path
style="fill:#888888"
d="m 434.02002,338.64102 -0.68182,-5.87459 -5.67285,1.91721 c -9.03348,3.05298 -22.82877,4.2941 -33.19121,2.98612 -20.17977,-2.54715 -28.97646,-11.37646 -31.02073,-31.13573 -0.52142,-5.03995 -1.60298,-10.73102 -2.40345,-12.64682 -1.21852,-2.91633 -1.96031,-3.48328 -4.55746,-3.48328 -2.59715,0 -3.33894,0.56695 -4.55746,3.48328 -0.80047,1.9158 -1.88203,7.60687 -2.40345,12.64682 -1.51982,14.69006 -6.97619,23.30045 -17.79926,28.08801 -6.92249,3.06215 -20.42297,4.36692 -31.4105,3.03571 -16.61117,-2.01254 -24.52763,-5.71328 -30.82865,-14.41158 -3.7577,-5.18736 -5.05187,-9.86976 -5.95221,-21.53557 -0.80666,-10.45197 -2.96479,-15.12718 -4.2421,-9.18978 -1.54366,7.17548 -3.71207,24.90181 -4.45062,36.38311 -0.54817,8.52163 -0.96331,10.98548 -1.4322,8.5 l -0.66027,-3.5 -0.20525,3.5 c -0.20031,3.4155 -1.10703,0.76959 -4.74349,-13.84195 -0.42037,-1.68908 -0.80721,-1.97893 -1.38765,-1.03976 -1.32901,2.15038 -4.43515,-1.5046 -6.80709,-8.00987 -2.51182,-6.88892 -4.42963,-8.84047 -9.1198,-9.28024 -3.09166,-0.28989 -3.65491,-0.79486 -4.82775,-4.32818 -0.73027,-2.2 -1.77839,-8.05 -2.32917,-13 -0.55078,-4.95 -1.86705,-10.8 -2.92503,-13 -2.50417,-5.20725 -2.4281,-5.83066 0.63998,-5.24416 2.05553,0.39294 2.43163,0.17029 1.91456,-1.13342 -4.86002,-12.25373 -5.85758,-32.17967 -2.44121,-48.76234 1.11726,-5.42304 2.30156,-13.04291 2.63177,-16.93304 l 0.60039,-7.07295 5.61823,-1.15044 c 3.09003,-0.63273 6.48885,-1.27541 7.55294,-1.42816 1.45999,-0.20959 2.53814,-2.17903 4.39406,-8.02661 1.78275,-5.61704 2.92187,-7.74888 4.1405,-7.74888 0.92463,0 4.3473,-2.0745 7.60594,-4.61 8.21435,-6.39149 24.81762,-16.0138 52.42479,-30.38244 12.925,-6.72704 27.25766,-14.4882 31.85035,-17.24701 l 8.35036,-5.01603 3.94164,2.21533 c 4.30133,2.41748 6.85765,1.64126 6.85765,-2.0823 0,-1.03265 0.52002,-1.87755 1.15561,-1.87755 2.14056,0 7.38765,4.73641 9.37366,8.46136 1.44602,2.71216 3.43511,4.37977 7.47073,6.26334 6.11871,2.85582 11.29773,6.76063 21.10108,15.90952 8.91357,8.31851 12.25681,9.99975 16.69428,8.39514 3.34742,-1.21044 3.46971,-1.15354 8.44868,3.93111 2.77865,2.83763 9.37296,8.2342 14.65403,11.99236 10.55064,7.50817 20.10193,16.56025 20.10193,19.05129 0,0.87773 -0.50171,2.09759 -1.1149,2.71078 -0.81987,0.81987 -0.3375,1.51691 1.82283,2.63406 3.90189,2.01775 4.98428,3.46155 5.77737,7.70645 0.58972,3.1564 0.37532,3.68707 -1.91051,4.72856 -3.76082,1.71355 -3.15631,3.76729 1.67521,5.69133 5.72661,2.28049 7.75,4.28552 7.75,7.67969 0,3.87581 -1.85106,3.58618 -5.78376,-0.90495 l -3.28376,-3.75004 2.03376,3.98519 c 1.76996,3.46827 2.03376,5.87748 2.03376,18.57378 0,8.82017 -0.63529,18.31579 -1.60667,24.01481 -2.62544,15.40327 -11.39449,42.45464 -17.96712,55.42622 -1.39341,2.75 -3.3193,9.05 -4.27977,14 -1.49311,7.69511 -2.05011,9.04434 -3.8417,9.30583 -1.86252,0.27185 -2.17118,-0.34706 -2.77722,-5.56874 z m 9.4155,-19.50534 c 1.77225,-3.97746 3.62649,-8.13175 4.12053,-9.23175 4.68312,-10.4271 12.05508,-35.69561 13.8579,-47.5 0.54599,-3.575 1.0929,-12.8 1.21536,-20.5 0.20281,-12.75185 0.025,-14.38196 -1.9949,-18.2843 -1.21965,-2.35636 -1.96293,-4.69628 -1.65172,-5.19982 0.3112,-0.50354 -0.34678,-1.40394 -1.46218,-2.00089 -2.78497,-1.49047 -2.62203,-5.57967 0.29859,-7.49333 3.50104,-2.29397 2.5232,-6.74599 -1.95023,-8.87922 -3.93473,-1.87634 -5.13233,-4.02664 -3.40309,-6.11025 2.26259,-2.72624 -1.94839,-6.91445 -21.47328,-21.35721 -4.4,-3.25472 -9.74419,-7.74009 -11.87597,-9.96749 -3.44093,-3.59528 -4.14209,-3.92857 -6.24705,-2.96949 -4.4405,2.02323 -9.29061,-0.53326 -20.45538,-10.78204 -7.19404,-6.60382 -12.67713,-10.68555 -17.70458,-13.17965 -5.46549,-2.71141 -7.66314,-4.41419 -8.80634,-6.8233 -0.83785,-1.76563 -2.6167,-4.23738 -3.953,-5.49277 l -2.42965,-2.28253 -2.46626,2.66114 c -2.9491,3.18213 -3.09471,3.19534 -7.74533,0.70275 l -3.65394,-1.95839 -8.83125,5.30293 c -4.85719,2.91662 -19.40625,10.81352 -32.33125,17.54868 -26.72922,13.92848 -40.83918,22.09988 -49.5,28.66657 -3.3,2.50209 -6.94563,4.92879 -8.10139,5.39268 -1.55175,0.62282 -2.70499,2.93233 -4.40904,8.82962 -2.18264,7.55357 -2.44477,7.96132 -4.83897,7.52717 -1.39222,-0.25245 -4.64678,0.0485 -7.23235,0.66875 l -4.70104,1.12776 -0.69907,6.67632 c -0.3845,3.67197 -1.61524,10.95131 -2.73499,16.17631 -2.88841,13.47797 -2.82544,27.96607 0.1695,39 3.50646,12.91848 3.51623,13 1.55694,13 -1.24815,0 -1.52566,0.48271 -1.0061,1.75 0.39461,0.9625 1.07837,5.125 1.51946,9.25 0.83694,7.82702 1.49031,11.30743 3.14441,16.75 0.80636,2.65319 1.49964,3.25 3.77533,3.25 4.41385,0 7.64355,3.37477 10.57735,11.05246 2.41697,6.32513 2.82599,6.85872 4.02013,5.24455 1.22467,-1.65544 1.44736,-1.51692 2.82672,1.75836 0.82352,1.95546 1.80165,4.76796 2.17362,6.25 1.16739,4.65127 2.45949,2.9417 2.45949,-3.25415 0,-6.71391 2.55778,-27.60774 4.07667,-33.30122 0.56867,-2.13163 1.62118,-3.75 2.43882,-3.75 2.97998,0 4.83676,4.99097 5.52645,14.85496 0.84511,12.08686 3.49709,18.68907 9.70032,24.14937 14.10602,12.41661 49.62165,13.39517 62.90392,1.73318 5.52682,-4.85261 8.2177,-11.3326 9.85223,-23.72545 0.79408,-6.02065 2.01929,-11.87807 2.72269,-13.01648 1.47066,-2.3802 4.7752,-3.46723 8.0289,-2.64112 3.50882,0.89089 4.6962,3.86477 6.25159,15.6576 2.2647,17.17068 7.07467,24.43988 19.16645,28.96579 11.56207,4.32765 31.73409,3.67745 44.54604,-1.43584 3.14275,-1.25428 5.95525,-2.03935 6.25,-1.74459 0.29476,0.29475 0.53592,2.44911 0.53592,4.78746 0,8.39446 1.34581,8.23944 3.06574,-0.35313 0.91025,-4.54753 3.10503,-11.52253 4.87728,-15.5 z m -150.94302,7.71101 c -7.28992,-2.02065 -12.53338,-5.7924 -15.81007,-11.37258 -2.38945,-4.06921 -2.72268,-5.78694 -3.03994,-15.67033 -0.55667,-17.34108 1.48068,-19.63462 19.20046,-21.61475 7.72807,-0.86359 13.52564,-0.87169 22.99464,-0.0321 18.7547,1.66289 23.12859,4.80497 24.31072,17.46411 1.25006,13.38654 -3.48248,24.16388 -12.88856,29.35094 -4.88606,2.69446 -6.1357,2.92257 -17.26725,3.15196 -8.35697,0.17221 -13.66972,-0.21553 -17.5,-1.27723 z m 28.5,-1.61714 c 10.5322,-2.56646 16.41747,-10.85923 17.28349,-24.35368 0.59719,-9.30547 -1.79704,-15.30142 -7.11826,-17.82651 -5.26784,-2.49975 -19.57409,-3.97209 -32.16523,-3.31031 -12.80084,0.6728 -17.83931,1.91328 -21.12773,5.2017 -2.17674,2.17674 -2.37227,3.18794 -2.37227,12.2685 0,10.72315 0.98648,14.95627 4.6298,19.86707 6.10711,8.23174 25.04455,12.00959 40.8702,8.15323 z m 70.32637,2.19534 c -12.98161,-3.91901 -19.9641,-15.93437 -18.48218,-31.80387 1.13801,-12.18672 5.56669,-15.62982 22.30502,-17.34114 12.57321,-1.28549 27.64741,-0.57097 35.18627,1.66783 6.42494,1.90801 9.15516,5.6475 9.16078,12.54722 0.007,8.31653 -2.17105,21.34519 -4.09866,24.51998 -2.64854,4.36215 -8.37325,8.03119 -15.3577,9.84296 -6.33061,1.64217 -23.99654,1.99102 -28.71353,0.56702 z m 26.79877,-2.14075 c 6.22804,-1.17894 13.74719,-5.76107 15.70935,-9.57321 1.77036,-3.43949 3.66551,-15.22451 3.66551,-22.79401 0,-9.66476 -4.48242,-12.17833 -23.5,-13.17787 -12.51144,-0.65759 -26.88999,0.80704 -32.07432,3.26717 -4.45917,2.11602 -6.5589,6.18823 -7.17991,13.92475 -0.56293,7.01291 1.43046,15.21296 4.97775,20.4765 5.62564,8.34746 20.16274,11.3292 38.40162,7.87667 z M 348.4925,275.90278 c -0.825,-0.21741 -8.25,-1.59884 -16.5,-3.06985 -13.91782,-2.4816 -16.33469,-2.63123 -33.5,-2.07394 -10.175,0.33034 -22.1,1.23699 -26.5,2.01477 -4.4,0.77779 -8.40414,1.03612 -8.8981,0.57407 -1.72402,-1.61267 7.96774,-25.56492 10.68875,-26.41624 0.66514,-0.2081 3.29937,-0.65741 5.85384,-0.99846 3.98185,-0.53163 4.57157,-0.89897 4.13337,-2.57465 -0.36295,-1.38792 -0.005,-1.95455 1.23378,-1.95455 0.9597,0 4.27468,-1.4625 7.36663,-3.25 5.3756,-3.10771 6.05955,-3.2449 15.62173,-3.13341 5.5,0.0641 15.625,1.07653 22.5,2.2498 17.80203,3.03805 24.09385,2.85564 33.05664,-0.95837 l 7.26606,-3.09199 9.51374,1.12202 c 6.74592,0.79559 14.62682,2.83905 27.08865,7.0239 9.6662,3.24604 19.49716,6.19872 21.84658,6.56152 3.27445,0.50565 4.59795,1.29061 5.66933,3.36243 1.91728,3.70761 4.559,14.20841 4.559,18.12194 0,3.09259 -0.12778,3.19474 -3.25,2.59815 -1.7875,-0.34155 -11.575,-0.89905 -21.75,-1.23888 -17.36262,-0.57988 -19.39146,-0.45067 -33,2.10172 -13.36609,2.50691 -29.39879,3.97901 -33,3.03002 z m 27.11639,-4.19461 c 11.78348,-2.37347 15.77479,-2.70225 33.38361,-2.75 11,-0.0298 21.9724,0.29816 24.3831,0.72886 l 4.3831,0.7831 -0.66131,-4.2831 c -1.01319,-6.56214 -3.6527,-14.14245 -5.40873,-15.5331 -0.86813,-0.6875 -2.8864,-1.25 -4.48504,-1.25 -1.59865,0 -10.92819,-2.71552 -20.73232,-6.03449 -10.80068,-3.65633 -21.10714,-6.47077 -26.15224,-7.14153 -8.20287,-1.0906 -8.44281,-1.06038 -16.15212,2.03449 -9.80937,3.93792 -15.4764,4.03705 -36.67444,0.64153 -21.63233,-3.46509 -25.1462,-3.34792 -33.84874,1.1287 -3.8798,1.99578 -7.19231,4.34594 -7.36113,5.22256 -0.21154,1.09842 -2.16765,1.91324 -6.29291,2.6213 -6.77065,1.16213 -7.01596,1.48612 -12.56364,16.59363 l -2.7784,7.56619 8.17241,-1.45721 c 5.51877,-0.98404 15.31596,-1.45772 30.17241,-1.45877 19.69621,-0.001 23.25661,0.26293 34,2.52422 15.72381,3.30958 22.44624,3.32065 38.61639,0.0636 z m 89.93401,-51.58202 -2.3385,-2.22222 1.89405,2.65206 c 1.04173,1.45863 2.09405,2.45863 2.33849,2.22222 0.24445,-0.23641 -0.60787,-1.42984 -1.89404,-2.65206 z"
id="path2996"
inkscape:connector-curvature="0" />
</g>
</svg>

如果对于SVG动画控制不太熟悉的朋友，请参考如下相关课程：

常用的三种生成SVG图形动画方式

提交方式：

录制代码编写过程或最终代码：点击开始
跟帖发布代码预览地址（使用GB按钮可以直接嵌入发帖回复中）：演示地址
【强烈提醒】加入QQ群：157757552，获奖用户及递交快递联系方式
【强烈提醒】请在个人信息中添加QQ号，方便我们联系人获得快递地址

赞助商OneAPM

OneAPM是中国基础软件领域的新兴领军企业，专注于提供下一代应用性能管理软件和服务，帮助企业用户和开发者轻松实现：缓慢的程序代码和SQL语句的实时抓取。帮助用户降低IT成本，提高业务生产力。产品适用于复杂的现代应用程序生产环境，提供端到端应用性能管理、移动端和浏览器真实用户体验分析、业务交易实时分析。OneAPM也是全球率先实现同时从系统服务层、应用层、用户体验层、业务交易层提供性能管理产品的公司。

网址：http://www.oneapm.com