DrawSVG实现书法写字动画效果-BFW代码库

代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Calligraphy animation with GreenSock&#39;s DrawSVG plugin and SVG&#39;s mask</title>
<style>
      html{
  height:100%;
  width:100%;
  margin:0;
  overflow:hidden;
  background:url('http://repo.bfw.wiki/bfwrepo/image/bg_paper.jpg');
  background-size:cover;
}
svg{
  max-height:100%;
  max-width:100%;
  position: fixed;
  left:0;
  top:0;
  opacity:0;
}
path{
  fill:#000000;
}
#twitterbtn{
  position:fixed;
  bottom:80px;
  right:10px;
  width:10%;
  max-width:50px;
  min-width:50px;
  opacity:0;
  cursor:pointer;
}
#replaybtn{
  position:fixed;
  bottom:10px;
  right:10px;
  width:10%;
  max-width:50px;
  min-width:50px;
  opacity:0;
  cursor:pointer;
}
    </style>
</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1462.84 1540.42">
<defs>
<mask id="mask1">
<path id="pathmask1" d="M206.47,316.52C230.69,329.31,309,370,335,378.47c30.86,10.1,27.06-1.63,46.79,24.16" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:120px" />
</mask>
<mask id="mask2">
<path id="pathmask2" d="M60,708.2C84.22,721,171.78,744.3,197.82,752.81c30.86,10.1,27.06-1.63,46.79,24.17" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:120px" />
</mask>
<mask id="mask3">
<path id="pathmask3" d="M219.63,1450.42c13.34-22.8,57.07-188.89,67.86-213,8.38-18.75,19.68-36.05,28.4-54.64,9.93-21.16,16.4-43.74,22.82-66.2l36.89-129c7.84-27.37,15.72-55.1,16.5-83.57" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:180px" />
</mask>
<mask id="mask4">
<path id="pathmask4" d="M520.8,586.42C585.47,542.88,747,469.84,817,435.51c16.18-7.94,73.6-53.32,89.72-61.39,72-36,82.39-42.53,162.57-49.7,12.65-1.13,58.52,30.34,67,39.83,5.62,6.3-37.13,100.22-36.21,108.62,1.65,15-114.23,53.28-119.39,67.47" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:180px" />
</mask>
<mask id="mask5">
<path id="pathmask5" d="M611.26,418.56c-8.19,43.35,11.14,224,9.73,268.05-1,30-19.93,61.69-27,90.86L539.15,1003c-9.32,38.36-18.68,76.84-32.75,113.73-10.1,26.49-22.57,52-35,77.47-13.76,28.15-37.09,87.58-50.85,115.72" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:135px" />
</mask>
<mask id="mask6">
<path id="pathmask6" d="M721.22,75c47,54.31,106.6,65.89,122.14,116.45s-8.86,103.17-15.13,155.69c-17,142.39-34.22,285.63-75.54,423-9,30-19.44,60.12-38,85.33S668.21,900.57,637,902.54c-14.84.93-30.84-2.77-40.88-13.73-14-15.28-12-40.27-1-57.85s74.64-25.83,92-37.18C788.53,727.42,840.79,633.7,957,599.31c32.44-9.6,71.2,6.18,101.64-8.58s58.3-38.84,68.35-71.15c6.45-20.74,3.77-46.16-12.92-60.07-9.41-7.85-22-11-34.31-11-36.27.14-68.25,26.71-85.41,58.66S972.09,576,967.22,611.92q-13.82,101.87-27.61,203.73c-5.91,43.65-12,87.9-29.3,128.4-23.3,54.55-65.88,99.14-114.17,133.6-83,59.19-182.52,90.56-282.13,112.06" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:150px" />
</mask>
<mask id="mask7">
<path id="pathmask7" d="M577.69,809.81c31,24,151.28,48,186.9,64.41,28.95,13.33,22.14,16.21,45.8,37.57,74.3,67.09,143.72,139.48,219,205.47,30.65,26.87,74.57,59.3,110.42,78.69,80.93,43.78,151.88,25.71,233,69.09" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:180px" />
</mask>
</defs>
<path id="path4" mask="url(#mask4)" d="M1155,421.75c-.32-14.31-7.25-24.32-12.93-32.52-9-13-21.25-20.61-45.69-35.77-4.6-2.86-10-6-17.68-7.78-13.93-3.17-26.77.3-26.89,2.42,0,.56.86.92,1.75,3a8.18,8.18,0,0,1,.79,2.73c-.44,3-24.15.1-43.65,2.32-10.4,1.18-20.68,5-41.23,12.58-23.72,8.77-35.58,13.16-40.59,16a44.57,44.57,0,0,1-14.55,5.59c-4.94.93-6,.2-10,.89-8.92,1.53-8.45,6-18.91,10.24-3.53,1.43-2.74.58-22.57,6l-3.51,1a649.65,649.65,0,0,0-98.91,36.44h0l-.73.41-.42.24c-20.09,11.18-47.3,21.31-47.3,21.31-49.44,18.4-67.65,45.65-94.56,48.45-1,.1-3.5.33-4.93,2.17C605.14,527,631.3,572.85,662,573.82c13.11.41,26-7.5,27.61-8.35,9-4.81,10.26-9,22.16-16.65,20.82-13.44,21.89-9.09,30.51-18.34,10.35-11.1,18.78-26.16,24.53-27a36.11,36.11,0,0,0,5.45-1.12c1.59-.44,2.74-.88,2.89-.94,6.85-2.53,69.85,1.14,97.14-19.23l.32-.24c13.54-10.07,27.52-11.67,33.49-12.72,5.7-1,4.09-1.51,36-16.73,34.53-16.47,51.8-24.71,53.51-22.33,3.26,4.52-29.5,33.71-44.53,47.09-25.27,22.52-55.83,46.77-55.12,47.69.3.4,6.27-3.84,7.16-2.82,1.14,1.31-8.13,8.76-6.37,12.88,1.29,3,7.8,2.66,14.23,2.71,10.93.09,18.6,1.39,33.95,4,20.62,3.49,23.17,8.24,34.41,6,8-1.61,17-6.1,16.83-6.73-.08-.26-1.6.37-2-.12-1.34-1.8,14.75-17,33.42-29.69,22.85-15.58,29.84-14.11,32.21-13.41,4.64,1.39,7.64,4.61,14.36,4.57,4.52,0,8.36-1.52,12.89-4,10.51-5.8,16.92-12.68,20.65-16.35,16-15.77,21-10.33,32.18-22.8C1142.54,456.22,1155.46,441.82,1155,421.75ZM662.19,498q3.15-6.1,9.17-6.12C671.56,498.2,667.3,498.86,662.19,498ZM688,490q-2.79-5.82,3.07-7.82Q693.59,492.19,688,490Zm226.59-95.71c2.18-3.06,10-4.2,9.78.83Z" />
<path id="path3" mask="url(#mask3)" d="M377.16,861.38c6.29-3,4.58-11.18,7.49-16.4,12.57,23.14,30.44,48.26,27.16,75.44-3,24.73-4.26,48.7-10.56,72.43-7.89,29.69-23.76,62.37-22.55,93.76.27,7,4,12.14,5.15,18.84,1,5.71.63,12.94.44,18.83-.46,14.9-6.19,29.2-9.6,43.63-5.75,24.37-16.65,49-26.76,72.3-6.12,14-10.15,24.39-7.61,40,2.3,14.16,1.64,26.3,0,40.6-1.4,12.37,2.78,23.42,1,35.06-2.25,14.52-10.57,25.65-21.43,35.16-17.86,15.66-44.31,2.15-62.23-8.68-12.05-7.29-22.32-19.44-29.9-31.79-3.85-6.25-6.33-13.63-11.11-19.28-4.56-5.4-10.47-5.26-15.44-8.92-8.25-6.07-6.27-17.52-6.46-26.21-.05-2.21-10.28-43.29,1.11-36.18-2.85-14.49,25,.5,32.27-5,5.9-4.44,9.9-17.58,13.44-24.12,5.06-9.34,9.83-18.84,14.71-28.28,9.41-18.23,20.49-35.72,29.09-54.34,8.26-17.9,13.85-36.76,20.42-55.31,13.27-37.44,27-73.94,37-112.43C353.15,940.48,365.08,900.9,377.16,861.38Z" />
<path id="path1" mask="url(#mask1)" d="M376.18,437.28c-8.85-1.25-16.26,2.58-20,5a1.09,1.09,0,0,1-1,.1l-84-32a1.13,1.13,0,0,1-.68-.79,38.39,38.39,0,0,0-3.55-9.54c-4-7.43-8.91-8.5-15.41-19.13-6.28-10.27-7.72-12-2.11-21.51C256.13,348,276.18,341.9,287.89,336c14.14-7.14,26.07-14,41.79-10.74,25.67,5.28,45.55,20.37,65.92,35.75a1.1,1.1,0,0,1-.81,2h0A1.09,1.09,0,0,0,393.5,364c0,7,5.36,7.9,6.41,13.69a1.09,1.09,0,0,0,1.3.88l.87-.17a1.11,1.11,0,0,0,.86-1.3c-2.5-12.4,6.29-.37,9.6,4.73,7.42,11.38,10.88,28.77,11.48,42.07.42,9.14-1,14.44-5,18.27-7.21,6.92-22.56,5.45-38.63-3.92a.94.94,0,0,0-.23-.1A24.7,24.7,0,0,0,376.18,437.28Z" />
<path id="path2" mask="url(#mask2)" d="M155.61,791.53c-6.13-13.95-16.31-22.9-28-32.17-5.61-4.44-12.32-9.79-17-15-2.59-2.89-3.94-3-3.53-7,.24-2.39,7.11-8.06,2.65-10.17,4.39-2,5.87-.95,2.71-5.86,7.91-1.63,14.4-7,22.2-8.84,8.78-2,13.4-5.15,21.55-9.34,14-7.22,26.47-4.23,40.91-.67,17.75,4.37,34.83,9.39,51.48,17.17,7.36,3.44,11.61,6.24,16.89,12.11,4.84,5.39,11.36,8.56,14.13,15.5,2.19,5.48,2,12,3.24,17.72,1.63,7.5,3.24,11.58-.55,18.68-6.41,12-16.23,19.19-29.32,22.4-13.79,3.38-28.35,5.65-42,1.67Z" />
<g id="group6" mask="url(#mask6)">
<path d="M945.57,985.58a40,40,0,0,0-6,10c-12.93,30.57-23.13,40-32.67,57.85-7.69,14.35-15.62,27.93-30.36,40.44-9.54,8.1-11.85,7.2-27,17.66-25.75,17.74-46.22,39-45.26,40.18.8,1,17.91-10.7,16.7-13.13-1-1.91-12.65,3.23-35.82,9.06-22.28,5.59-35.09,6.77-35.34,5.76-.2-.8,7.43-2.43,7.4-5.27,0-2.21-4.68-4.32-5.63-3.44-.7.65,1,2.52,0,4.06a3.16,3.16,0,0,1-3.9,1c-.32-.22-.62-.64-.52-.89.18-.43,1.44,0,1.8-.58,0,0,.24-.38-.15-1.13-1.81-3.49-54.66,15.38-54.66,15.38-27.11,9.68-40.66,14.52-45.58,15.54-46.76,9.65-95.51-18.2-93.83-26.94,1.39-7.21,36.1,4,87.72-13.58,25.67-8.77,46.57-21.61,57.78-28.5A360.94,360.94,0,0,0,745,1076.55c29.28-24.55,20.3-23.91,54.8-55.69,11.48-10.57,26.64-23.69,29.86-44.63.29-1.87.29-2.6.49-4.44,3-28.37,21.68-47.17,37.19-.........完整代码请登录后点击上方下载按钮下载查看
DrawSVG实现书法写字动画效果

网友评论0
