前语

最近体验了一下最新的模型 gpt-4，确实名不虚传，gpt-4 比 gpt-3.5 更智能。咱们今日就让 gpt-4 来完成一个 svg 描边动画，看看它的才干如何。如果有同学想用 RMB 购买 plus 可以参阅我的文章：使用支付宝开通 ChatGPT plus。

实操

1. 咱们一步一步来，先不加动画，直接要求画个西瓜，看看是否契合咱们的预期；

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

看着好像画的不错，比 gpt-3.5 要好很多，下面是 gpt-3.5 画的：

用 ChatGPT 实现 svg 描边动画

  1. 西瓜瓤应该是红色的，咱们纠正一下。下面我就不张贴 chatgpt 回答的内容了，直接贴代码的效果图。

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

  1. 画一个完好的西瓜

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

这个西瓜勉强可以承受吧，我真实不知道该怎么描述西瓜的样子了。

  1. 开端加描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

用 ChatGPT 实现 svg 描边动画

功能完成的很不错，下面是完好代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>带动画的西瓜</title>
    <style>
        .melon-path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 0;
            transition: stroke-dashoffset 2s;
        }
        .melon-svg:hover .melon-path {
            animation: drawMelon 2s forwards;
        }
        @keyframes drawMelon {
            0%, 1% {
                stroke-dashoffset: 0;
            }
            2% {
                stroke-dashoffset: 1000;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }
    </style>
</head>
<body>
    <svg class="melon-svg" width="200px" height="100px" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <clipPath id="melon-clip">
                <ellipse cx="100" cy="50" rx="93" ry="43"/>
            </clipPath>
        </defs>
        <!-- 西瓜主体部分 -->
        <ellipse class="melon-path" cx="100" cy="50" rx="95" ry="45" fill="#56C05D" stroke="black" stroke-width="2"/>
        <!-- 西瓜条纹部分 -->
        <g clip-path="url(#melon-clip)">
            <path class="melon-path" d="M 0,20 Q 50,10 100,20 T 200,20" stroke="#399D4A" stroke-width="2" fill="none"/>
            <path class="melon-path" d="M 0,35 Q 50,25 100,35 T 200,35" stroke="#399D4A" stroke-width="2" fill="none"/>
            <path class="melon-path" d="M 0,50 Q 50,40 100,50 T 200,50" stroke="#399D4A" stroke-width="2" fill="none"/>
            <path class="melon-path" d="M 0,65 Q 50,55 100,65 T 200,65" stroke="#399D4A" stroke-width="2" fill="none"/>
            <path class="melon-path" d="M 0,80 Q 50,70 100,80 T 200,80" stroke="#399D4A" stroke-width="2" fill="none"/>
        </g>
    </svg>
</body>
</html>

  1. 本来想去掉绿色布景的，但是触发用量约束了

用 ChatGPT 实现 svg 描边动画

总结

在给 chatgpt 提需求的时分描述要尽或许精确，并且要提供足够的上下文，只要这样 chatgpt 才干理解你的意图；

咱们的测验实际上包括绘画+编码，要描述画成什么样其实很困难，chatgpt 把西瓜画到这个程度现已很厉害了。