设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 爬行的蜗牛 › 其他相关知识 › HTML+CSS › svg发送按钮动画
返回列表 发新帖
查看: 20|回复: 0

svg发送按钮动画

[复制链接]
yycvip

167

主题

48

回帖

1455

积分

管理员

积分
1455
发表于 2025-9-26 11:46:01 | 显示全部楼层 |阅读模式
这是一个交互式的发送按钮动画效果。当用户点击"Send"按钮时，会触发一系列流畅的动画：按钮变形为圆形，纸飞机图标沿着曲线路径飞行，最后变成一个勾号，同时显示"Sent!"文字，整个过程形成一个完整的发送确认动画。

640 (2).gif

复制源代码到空白的html格式文件，在浏览中打开运行即可。
核心实现原理

  • SVG 动画：


    • 使用 SVG 绘制基础图形（按钮、纸飞机、路径等）
    • 通过 GSAP (GreenSock Animation Platform) 控制动画

  • 关键技术：


    • MorphSVGPlugin: 实现 SVG 形状之间的平滑变形
    • MotionPathPlugin: 控制纸飞机沿着特定路径运动
    • DrawSVGPlugin: 实现路径的绘制动画
    • Timeline: 协调多个动画的时序
  1. <!DOCTYPE html>
  2. <html lang="en">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>CodePen - Click to send</title>
  7.     <style>
  8.         @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap");

  10.         body {
  11.             margin: 0;
  12.             height: 100vh;
  13.             display: flex;
  14.             justify-content: center;
  15.             align-items: center;
  16.             font-family: "Roboto", sans-serif;
  17.             font-weight: bold;
  18.             background-color: #291d89;
  19.         }

  21.         svg {
  22.             width: 100%;
  23.             height: 100vh;
  24.         }

  26.         .hidden {
  27.             visibility: hidden;
  28.         }

  30.         #base {
  31.             cursor: pointer;
  32.         }
  33.     </style>
  34. </head>

  36. <body translate="no">
  37.     <svg viewBox="0 0 1400 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
  38.         <path id="paperPlaneRoute"
  39.             d="M563.558,526.618 C638.854,410.19 787.84,243.065 916.53,334.949 1041.712,424.328 858.791,877.927 743.926,856.655 642.241,838.669 699.637,688.664 700,540"
  40.             stroke="white" stroke-width="3" style="stroke-dashoffset: 0.001px; stroke-dasharray: 0px, 999999px;" />
  41.         <g id="rectSent" clip-path="url(#clipPath)">
  42.             <g id="rectSentItems">
  43.                 <rect id="sentBase" x="460" y="468.5" width="480" height="143" rx="23" fill="white" />
  44.                 <text id="txtSent" fill="#4F67ED" xml:space="preserve" style="white-space: pre" font-family="Roboto"
  45.                     font-size="82" font-weight="bold" letter-spacing="0.025em">
  46.                     <tspan x="637.487" y="568.027">Sent!</tspan>
  47.                 </text>
  48.             </g>
  49.         </g>
  50.         <g id="base">
  51.             <g filter="url(#flShadow)">
  52.                 <rect id="btnBase" x="418.117" y="460.55" width="563.765" height="158.899" rx="27" fill="#F1F3FF" />
  53.             </g>
  54.             <text id="txtSend" fill="#291D89" xml:space="preserve" style="white-space: pre" font-family="Roboto"
  55.                 font-size="82" font-weight="bold" letter-spacing="0.06em">
  56.                 <tspan x="679.379" y="568.027">Send</tspan>
  57.             </text>
  58.             <g id="paperPlane" style="transform-origin: 0px 0px 0px;" data-svg-origin="563.55859375 527.734375"
  59.                 transform="matrix(0.8396,0.5432,-0.5432,0.8396,377.09924,-222.6639)">
  60.                 <path id="paperPlanePath"
  61.                     d="M560.611 481.384C562.003 479.263 565.113 479.263 566.505 481.384L607.063 543.177C615.657 556.272 607.507 573.375 592.766 575.676L566.422 557.462V510.018C566.422 508.436 565.14 507.154 563.558 507.154C561.976 507.154 560.693 508.436 560.693 510.018V557.462L534.349 575.676C519.609 573.375 511.459 556.272 520.053 543.177L560.611 481.384Z"
  62.                     fill="#4F67EB" />
  63.             </g>
  64.         </g>
  65.         <circle id="cBottom" cx="700" cy="540" r="97.516" fill="#C23F3F" class="hidden" />
  66.         <circle id="cTop" cx="700" cy="502.365" r="107.898" fill="#C23F3F" class="hidden" />
  67.         <circle id="cCenter" cx="700" cy="540" r="123" fill="#A74C4C" class="hidden" />
  68.         <circle id="cEnd" cx="495" cy="540" r="98" fill="#F1F3FF" class="hidden" />
  69.         <path id="tickMark" fill-rule="evenodd" clip-rule="evenodd"
  70.             d="M597.3 489.026C595.179 487.257 592.026 487.541 590.257 489.662L550.954 536.768L534.647 522.965C532.539 521.181 529.384 521.444 527.6 523.551L519.096 533.598C517.312 535.706 517.575 538.861 519.682 540.645L538.606 556.662C538.893 557.162 539.272 557.621 539.74 558.012L549.847 566.445C551.967 568.214 555.12 567.929 556.889 565.809L608.042 504.501C609.811 502.38 609.527 499.227 607.406 497.458L597.3 489.026Z"
  71.             fill="#4E67E8" class="hidden" />
  72.         <defs>
  73.             <clipPath id="clipPath">
  74.                 <rect id="mask1" x="700" y="450" width="520" height="180" fill="white" id="clipRect" />
  75.             </clipPath>
  76.             <filter id="flShadow" x="0" y="0" width="1000" height="1000" filterUnits="userSpaceOnUse"
  77.                 color-interpolation-filters="sRGB">
  78.                 <feFlood flood-opacity="0" result="BackgroundImageFix" />
  79.                 <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
  80.                 <feOffset dx="4" dy="4" />
  81.                 <feGaussianBlur stdDeviation="3.5" />
  82.                 <feColorMatrix type="matrix" values="0 0 0 0 0.5125 0 0 0 0 0.420677 0 0 0 0 0.420677 0 0 0 0.25 0" />
  83.                 <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
  84.                 <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
  85.             </filter>
  86.         </defs>
  87.     </svg>
  88.     <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
  89.     <script src='https://assets.codepen.io/16327/MorphSVGPlugin3.min.js'></script>
  90.     <script src='https://unpkg.com/gsap@3/dist/MotionPathPlugin.min.js'></script>
  91.     <script src='https://assets.codepen.io/16327/DrawSVGPlugin3.min.js'></script>
  92.     <script id="rendered-js">
  93.         gsap.registerPlugin(MotionPathPlugin);
  94.         MorphSVGPlugin.convertToPath("circle, rect");
  95.         gsap.set("#paperPlaneRoute", { drawSVG: "0% 0%" });
  96.         gsap.set("#rectSentItems", { x: "-=240" });
  97.         const tl = gsap.timeline();

  99.         let ranOnce = false;

  101.         function onBtnUp() {
  102.             if (ranOnce) {
  103.                 tl.restart();
  104.                 return;
  105.             }
  106.             ranOnce = true;
  107.             tl.to("#base", { duration: 0.2, scale: 1, transformOrigin: "50% 50%" });
  108.             tl.to(
  109.                 "#btnBase",
  110.                 { duration: 0.77, morphSVG: "#cBottom", ease: "power1.inOut" },
  111.                 "start");


  114.             tl.to("#btnBase", { duration: 0.23, morphSVG: "#cTop", ease: "power1.inOut" });
  115.             tl.to("#btnBase", {
  116.                 duration: 0.2,
  117.                 morphSVG: "#cCenter",
  118.                 ease: "power1.inOut"
  119.             });

  121.             tl.to(
  122.                 "#btnBase",
  123.                 { duration: 0.5, morphSVG: "#cEnd", ease: "power1.inOut" },
  124.                 "revealStart");

  126.             tl.to("#rectSentItems", { x: "0", duration: 0.5 }, "revealStart");
  127.             tl.to(
  128.                 "#mask1",
  129.                 { x: "-=260", duration: 0.5, ease: "power1.inOut" },
  130.                 "revealStart");

  132.             tl.to(
  133.                 "#paperPlane",
  134.                 { x: "-=205", duration: 0.5, ease: "power1.inOut" },
  135.                 "revealStart");

  137.             tl.to(
  138.                 "#paperPlanePath",
  139.                 { duration: 0.43, morphSVG: "#tickMark" },
  140.                 "start+=0.77");


  143.             tl.to(
  144.                 "#txtSend",
  145.                 { duration: 0.6, scale: 0, transformOrigin: "50% 50%" },
  146.                 "start");

  148.             tl.to(
  149.                 "#paperPlaneRoute",
  150.                 { drawSVG: "80% 100%", duration: 0.7, ease: "power1.inOut" },
  151.                 "start+=0.3");

  153.             tl.to(
  154.                 "#paperPlaneRoute",
  155.                 { drawSVG: "100% 100%", duration: 0.2, ease: "power1.inOut" },
  156.                 "start+=1");


  159.             tl.to(
  160.                 "#paperPlane",
  161.                 {
  162.                     duration: 1,
  163.                     ease: "power1.inOut",
  164.                     immediateRender: true,
  165.                     motionPath: {
  166.                         path: "#paperPlaneRoute",
  167.                         align: "#paperPlaneRoute",
  168.                         alignOrigin: [0.5, 0.5],
  169.                         autoRotate: 90
  170.                     }
  171.                 },


  174.                 "start");


  177.             tl.to(
  178.                 "#paperPlanePath",
  179.                 { duration: 0.15, attr: { fill: "#ffffff" } },
  180.                 "start");

  182.             tl.to(
  183.                 "#paperPlanePath",
  184.                 { duration: 0.15, attr: { fill: "#4E67E8" } },
  185.                 "start+=0.77");

  187.         }

  189.         function onBtnDown() {
  190.             gsap.timeline({ defaults: { clearProps: true } });
  191.             gsap.to("#base", { duration: 0.1, scale: 0.9, transformOrigin: "50% 50%" });
  192.         }

  194.         const btn = document.getElementById("base");
  195.         btn.addEventListener("mousedown", onBtnDown);
  196.         btn.addEventListener("mouseup", onBtnUp);
  197.     </script>
  198. </body>
  199. </html>
复制代码
动画步骤：

  1. // 形状变形
  2. tl.to("#btnBase", { morphSVG: "#cBottom" });

  4. // 路径动画
  5. tl.to("#paperPlane", {
  6.     motionPath: {
  7.         path: "#paperPlaneRoute",
  8.         autoRotate: 90
  9.     }
  10. });

  12. // 颜色变化
  13. tl.to("#paperPlanePath", {
  14.     attr: { fill: "#ffffff" }
  15. });
复制代码
应用场景

  • 用户界面反馈：


    • 邮件发送确认
    • 消息发送状态
    • 表单提交确认

  • 电商平台：


    • 订单提交确认
    • 支付完成提示
    • 商品添加到购物车

  • 社交媒体：


    • 消息发送动画
    • 好友请求发送
    • 内容分享确认

  • 应用程序：


    • 文件上传状态
    • 数据同步提示
    • 设置保存确认

  • 网站交互：


    • 订阅确认
    • 注册成功提示
    • 反馈提交确认

这种动画效果能够有效提升用户体验，使界面更加生动有趣，同时提供清晰的操作反馈。


回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表