HTML5 三维贝塞尔曲线的绘制动画

参考阅读该作品详细的技术讲解文章： http://medium.com/@pnowelldesign/mastering-the-bezier-curve-in-sketch-4da8fdf0dbbb

bezier,curve

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3813
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var circle = document.getElementById("t");
var poly = document.querySelector("polyline");
var tangentLine = document.getElementById("tangentLine");
var tangentPoint = document.getElementById("tangentPoint");

function animateTangent() {
  if (poly.animatedPoints.numberOfItems == 0) {
      requestAnimationFrame(animateTangent);
      return;
    }
  
    var t = circle.r.animVal.value;
    var u = 1 - t;
    var p1 = poly.animatedPoints.getItem(0);
    var p2 = poly.animatedPoints.getItem(1);
    var p3 = poly.animatedPoints.getItem(2);
    var x1 = p1.x * u + p2.x * t;
    var y1 = p1.y * u + p2.y * t;
    var x2 = p2.x * u + p3.x * t;
    var y2 = p2.y * u + p3.y * t;
    tangentLine.setAttribute("x1", x1);
    tangentLine.setAttribute("y1", y1);
    tangentLine.setAttribute("x2", x2);
    tangentLine.setAttribute("y2", y2);
    tangentPoint.setAttribute("cx", x1 * u + x2 * t);
    tangentPoint.setAttribute("cy", y1 * u + y2 * t);
    requestAnimationFrame(animateTangent);
}

requestAnimationFrame(animateTangent);

编译

CSS

HTML

<circle id="t" fill="none" stroke="none">
              <animate attributeType="XML" attributeName="r" from="0" to="1" dur="7s" repeatCount="indefinite"/>
          </circle>

<path d="M100,400 C100,153 300,99.9999999 600,192" id="main-curve" stroke="#000000" stroke-width="2" fill-opacity="0.179206295" fill="#D8D8D8" stroke-dasharray="657.7994384765625" stroke-dashoffset="657.7994384765625">
            
            <animate id="introMainCurve" attributeName="stroke-dashoffset" attributeType="XML" from="657.7994384765625" to="0" begin="0s" dur="7s" repeatCount="indefinite" calcMode="spline" keySplines="0.37 0.39 0.56 0.39" keyTimes="0;1" />
            
          </path>
          
           
          <path d="M99,153.474639 L99,276.741808 L99,338.375393 L99,400.008977" id="left-handle" stroke="#5C60EC" stroke-width="2" stroke-linecap="square"></path>
            
          
          <path d="M299.938027,99.7211217 L374.703522,122.790841 L449.469018,145.860561 L599.000008,192" id="right-handle" stroke="#5C60EC" stroke-width="2" stroke-linecap="square"></path>
            
          
          <path d="M100,153.5 L150.124892,140.247525 L200.249783,126.99505 L300.499566,100.4901" id="upper-dotted-line" stroke="#979797" stroke-linecap="square" stroke-dasharray="1,3">
            <animate id="introUpperDottedLine" attributeType="XML" attributeName="stroke-opacity" from="0" to="1" dur="1" begin="1s" />
            
          </path>
            
          
          <path d="M100,400 L600.501002,192.192116" id="lower-dotted-line" stroke="#979797" stroke-linecap="square" stroke-dasharray="1,3"></path>
          
          
          
          <polyline stroke="#95cf29" stroke-width="2" id="triangle">
              <animate attributeType="XML" attributeName="points" from="100,400 100,153 300,100" to="100,153 300,100 600,192" dur="7s" repeatCount="indefinite"/>
          </polyline>
          
          
          <path d="M100,400 L100,153 L300,100" id="cubic-drawing-triangle-50" stroke="#95CF29" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            
            <animate id="special"
             attributeName="d" attributeType="XML"
             from="M100,400 L100,153 L300,100" to="M100,153 L300,100 L600,192"
             begin="0s" dur="7s" repeatCount="indefinite"></animate>
            
          </path>
            
          
          <line stroke="#DE40CD" stroke-width="2" stroke-linecap="round" id="tangentLine"/>
          
          
          <circle r="4" fill="#DE40CD" id="tangentPoint"/>
          
          
          
          <circle id="controlPoint1" cx="99" cy="154" r="4" fill="white" stroke="#5C60EC" stroke-width="2"></circle>
          
          <circle id="controlPoint2" cx="301" cy="100" r="4" fill="white" stroke="#5C60EC" stroke-width="2"></circle>
          
          <circle id="controlPoint0" cx="99" cy="400" r="4" fill="#5C60EC" stroke="#5C60EC" stroke-width="2"></circle>
          
          <circle id="controlPoint0" cx="600" cy="192" r="4" fill="#5C60EC" stroke="#5C60EC" stroke-width="2"></circle>
          
          
      </g>
    </g>
</svg>

参考阅读该作品详细的技术讲解文章： http://medium.com/@pnowelldesign/mastering-the-bezier-curve-in-sketch-4da8fdf0dbbb

bezier,curve

编辑器支持Emmet

快捷键

参考阅读该作品详细的技术讲解文章： http://medium.com/@pnowelldesign/mastering-the-bezier-curve-in-sketch-4da8fdf0dbbb

bezier,curve

HTML5 Canvas使用许多直线绘制曲线动画

P5.js 用动画演示贝塞尔曲线的创建过程

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：