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.........完整代码请登录后点击上方下载按钮下载查看