TweenMax实现svg铅笔画画动画效果代码-html代码-BFW代码库

TweenMax实现svg铅笔画画动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax实现svg铅笔画画动画效果代码，结合了MorphSVGPlugin及ScrubGSAPTimeline和DrawSVGPlugin插件一起实现。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    body {
  background-color:#EAE8E6;
  overflow: hidden;
  text-align:center;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


svg{

  width:800px;
  height:600px;
  visibility:hidden;
overflow: hidden;

 
  
}
</style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
 <defs>
  
 <pattern id="graph" 
           x="28" y="8" width="30" height="30"
           patternUnits="userSpaceOnUse">
  <line x1="0" x2="800" y1="0" y2="0" stroke="#CBCFE9" stroke-width="1"/> 
  <line x1="10" x2="10" y1="0" y2="600" stroke="#CBCFE9" stroke-width="1"/> 
  
  </pattern>
      <filter id="edgeClean" color-interpolation-filters="sRGB">
        <feComponentTransfer>
          <feFuncA type="table" tableValues="0 .5 1 1" />
        </feComponentTransfer>
      </filter>    
  </defs>
 <rect fill="url(#graph)" width="800" height="600"/>
 
  <path class="shadowEnd" opacity="0" d="M329.6,145.3l-23.1-9.1l-24.7-9.7c-2-0.8-5.6-0.9-7.9-0.3L29,193.6L8,212.8l0,0l-8,7.3
    l14.7-0.8l0.3,0l8.3-0.5l0,0l61-3.4l244.9-67.4C331.4,147.3,331.6,146.1,329.6,145.3z"/>
 <path class="shadow" opacity="0" d="M329.6,145.3l-23.1-9.1l-24.7-9.7c-2-0.8-5.6-0.9-7.9-0.3L29,193.6L8,212.8l0,0l-8,7.3
    l14.7-0.8l0.3,0l8.3-0.5l0,0l61-3.4l244.9-67.4C331.4,147.3,331.6,146.1,329.6,145.3z"/> 
<g class="drawing">
  <g class="pencilFills">
    <path fill="#FFC334" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" d="M291.9,361.3
      c-13.6-2.9-19.4-10.3-20.8-23.5l179.7-159.3c1.7-1.5,4.3-1.3,5.8,0.3l18.1,20.4L291.9,361.3z"/>
    <path fill="#FBCA7E" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" d="M291.9,361.3
      c2.3,13.7,9.6,21.2,19.7,22.2l-44.7,10.1L255.6,381l15.4-43.2C272.4,350.9,278.3,358.4,291.9,361.3z"/>
    <path fill="#E2AF38" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" d="M491.2,224.1L311.5,383.4
      c-10.1-1-17.4-8.5-19.7-22.2l182.8-162l16.9,19.1C493,220,492.9,222.6,491.2,224.1z"/>
    <polygon fill="#39434D" stroke="none" stroke-linejoin="round" stroke-miterlimit="10" points="266.8,393.6 249.7,397.4 
      255.6,381     "/>
  </g>
  <g class="pencilOutlines" stroke-width="2">
    <path class="pencilOutline" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" d="M311.5,383.4
      l179.7-159.3c1.7-1.5,1.9-4.1,0.3-5.8l-16.9-19.1l-18.1-20.4c-1.5-1.7-4.1-1.9-5.8-0.3L271,337.8c1.4,13.2,7.3,20.6,20.8,23.5
      C294.1,374.9,301.4,382.4,311.5,383.4z"/>
    <polyline class="ridge" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" points="291.2,361.9 
      291.9,361.3 474.6,199.2     "/>
    
      <line class="tipTop" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" x1="255.6" y1="381" x2="271" y2="337.8"/>
    
      <line class="tipBot" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" x1="311.5" y1="383.4" x2="266.8" y2="393.6"/>
    <polygon class="lead" fill="none" stroke="#39434D" stroke-linejoin="round" stroke-miterlimit="10" points="249.7,397.4 
      266.8,393.6 255.6,381 249.7,397.4     "/>
  </g>
</g>

<g class="pencil">
  
  <g>
    <path fill="#FFC334" d="M42.3,183.8c-13.6-2.9-19.4-10.3-20.8-23.5L201.2,1c1.7-1.5,4.3-1.3,5.8,0.3l18.1,20.4L42.3,183.8z"/>
    <path fill="#FBCA7E" d="M42.3,183.8C44.6,197.5,51.9,205,62,206l-51,11.6l-7.1-8l17.6-49.3.........完整代码请登录后点击上方下载按钮下载查看