Canvas实现贝赛尔曲线轨迹动画

最新推荐文章于 2024-08-16 15:33:06 发布

转载

最新推荐文章于 2024-08-16 15:33:06 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cbebc4b6fb9a032204fd5bd

文章标签：

#前端 #ViewUI

本文分享了如何使用Canvas实现二次贝赛尔曲线轨迹动画，包括添加渐变、头部光晕、文本以及动画完成后在结束位置添加文本和图片的详细步骤。通过代码示例，展示了如何创建和调整动画效果，提供了完整的代码参考。

最近实现的下图的效果,跟大家分享一下

假如我们要画下图曲线的动画

如果每次都画一条短线连接起来,如下图被分成五段

再看十段

要是被分的段数足够多时每次画一段就很像曲线轨迹了

二次贝赛尔曲线

/**
 * 二次贝塞尔曲线动画
 * @param  {Array<number>} start 起点坐标
 * @param  {Array<number>} 曲度点坐标(也就是转弯的点,不是准确的坐标,只是大致的方向)
 * @param  {Array<number>} end 终点坐标
 * @param  {number} percent 绘制百分比(0-100)
 */
 
  function drawCurvePath(start, point, end, percent){
            ctx.beginPath();    //开始画线
            ctx.moveTo(start[0], start[1]);   //画笔移动到起点
            for (var t = 0; t <= percent / 100; t += 0.005) {
                //获取每个时间点的坐标
                var x = quadraticBezier(start[0], point[0], end[0], t);   
                var y = quadraticBezier(start[1], point[1], end[1], t);
                ctx.lineTo(x, y);   //画出上个时间点到当前时间点的直线
            }
             ctx.stroke();   //描边
        }
        
        
/**
 * 二次贝塞尔曲线方程
 * @param  {Array<number>} start 起点
 * @param  {Array<number>} 曲度点
 * @param  {Array<number>} end 终点
 * @param  {number} 绘制进度(0-1)
 */
     function quadraticBezier(p0, p1, p2, t) {
            var k = 1 - t;
            return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2; 
        }
复制代码

更加详细的贝塞尔曲线内容请参考这篇博客

放入完整的代码中

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA

最低0.47元/天解锁文章