头九不见雪，九九如六月。
——《数九歌》，春秋期间
你哪里下雪了吗？
干预冬天，老一辈可爱“数九”：
“一九二九怀中插足，三九四九冻死老狗，五九六九沿河看柳。七九花开，八九燕来。九九耕牛随处走。”
所谓“九”，简短要从冬至算起。以本年为例，从2024年12月21日初始，到今天第16天，干预“二九”。按兴味，应该冷得让东说念主手揣兜。
但本年，大家巨额嗅觉不何如冷（1961年来最暖的冬天），也没见到什么雪。
本年，你哪里下雪了吗？
张开剩余93%没下，咱们在手机里下。
还不错跨图一皆下。
制作旨趣详解
2.1 何如作念的？
答：用SVG动画作念的。
SVG，浮浅来说即是一种征服XML说话的矢量图步调，不错无损缩放图像。在公众号和网站上，多用于一些融媒体格式的动画交互和殊效展示。
前边下雪的图，它其实是包了两层，一层是原图（上传后赢得图片网址），一层是SVG殊效。
原图+SVG动画，就得到了这么的殊效动图。
2.2 SVG代码何如写？
答：交给LLM。
原则上，通盘推理模子都不错写SVG代码，比如：
Kimi的视觉想考板（K1模子）
DeepSeek的深度想考（R1模子）
通义的代码模式
智谱的Zero推理模子
天工的o1模子
以及海外的o1、Artifacts、canva等
Kimi的视觉想考板（K1模子）
DeepSeek的深度想考（R1模子）
通义的代码模式
智谱的Zero推理模子
天工的o1模子
以及海外的o1、Artifacts、canva等
今天，咱们用的是智谱的推理模子——GLM-Zero预览版。
上周，给大家先容了。其时只体验了他们家的数理计较和推理能力，还莫得体验代码能力。
今天，咱们就用这个Case来体验下智谱的代码能力。这是生成SVG动画代码的提醒词，作家@赛博禅心。
1. 布景- 使用给定图片看成底图- 通过image标签引入
2. 雪花后果- 白色圆点(r=1.5)暗示雪花- 10-15个雪花同期飘落，从左到右洒落- 每个雪花需要有: * 从 SVG 外干预(y=-10~-50)，均匀洒落（x=0~400） * 淡入淡出后果(opacity: 0 -> 0.8 -> 0) * 立地的初始本事(0-2.5s不等) * 不同的下减慢度(3.5-5.5s一个周期) * 立地的水平偏移(25-60px) * 使用孤苦<g>，不要使用 <defs>每组示例：<g><circlecx="50"cy="-10"r="2"fill="white"/><animateMotiondur="4s"repeatCount="indefinite"path="M50 -10 C55 80,45 150,50 400"/><animateattributeName="opacity"from="1"to="0"dur="4s"repeatCount="indefinite"/></g>
3. 动画杀青重点- 使用animateMotion配置畅通旅途- 通过不同的begin本事错开雪花出当前机- 畅通旅途从顶部到底部(400px距离)输出<svg>
将提醒词发给智谱Zero推理模子后，恭候1-2分钟的深度想考，就会得到一段SVG代码。其中"background.png"，即你的底图。
Ps.通过著述预览版，不错赢得微信图片网址。
微信图片全段网址很长，只需要复制“appmsg”前的衔接就行。
然后，替换掉"background.png"，就得到了好意思满的SVG动画代码（有经过微调）。
<svgviewBox="0 0 400 400"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink">
<imagehref="https://mmbiz.qpic.cn/mmbiz_jpg/NX4HOlP6ibCicFia0wg3CAUd5iaI97MNZZCWMWF3EORuD2n51xfB9ka0Tgs24YZSVcPT3eUtFu5V95gN8vaYUnPrzQ/640?wx_fmt=jpeg&from=appmsg"width="400"height="400"></image>
<g><circlecx="50"cy="-10"r="2"fill="white"></circle><animateMotiondur="4s"repeatCount="indefinite"path="M50 -10 C40 60,60 140,50 400"></animateMotion><animateattributeName="opacity"values="0.6;0.8;0.2"dur="4s"repeatCount="indefinite"></animate></g>
<g><circlecx="100"cy="-20"r="3"fill="white"></circle><animateMotiondur="5s"repeatCount="indefinite"path="M100 -20 C90 80,110 200,100 400"></animateMotion><animateattributeName="opacity"values="0.6;0.8;0.2"dur="5s"repeatCount="indefinite"></animate></g>
<g><circlecx="150"cy="-30"r="4"fill="white"></circle><animateMotiondur="3.5s"repeatCount="indefinite"path="M150 -30 C140 50,160 200,150 400"></animateMotion><animateattributeName="opacity"values="0.6;0.8;0.2"dur="3.5s"repeatCount="indefinite"></animate></g>
<g><circlecx="200"cy="-40"r="2"fill="white"></circle><animateMotiondur="4.5s"repeatCount="indefinite"path="M200 -40 C190 70,210 200,200 400"></animateMotion><animateattributeName="opacity"values="0.6;0.8;0.2"dur="4.5s"repeatCount="indefinite"></animate></g>
<g><circlecx="250"cy="-50"r="3"fill="white"></circle><animateMotiondur="5s"repeatCount="indefinite"path="M250 -50 C240 80,260 210,250 400"></animateMotion><animateattributeName="opacity"values="0.6;0.8;0.2"dur="5s"repeatCount="indefinite"></animate></g>
<g><circlecx="300"cy="-10"r="4"fill="white"></circle><animateMotiondur="4s"repeatCount="indefinite"path="M300 -10 C290 100,310 220,300 400"></animateMotion><animateattributeName="opacity"values="0.6;0.8;0.2"dur="4s"repeatCount="indefinite"></animate></g>
<g><circlecx="350"cy="-30"r="3"fill="white"></circle><animateMotiondur="3.8s"repeatCount="indefinite"path="M350 -30 C340 90,360 220,350 400"></animateMotion><animateattributeName="opacity"values="0.6;0.8;0.2"dur="3.8s"repeatCount="indefinite"></animate></g>
<g><circlecx="60"cy="-15"r="2"fill="white"></circle><animateMotiondur="4.2s"repeatCount="indefinite"path="M60 -15 C50 80,70 210,60 400"></animateMotion><animateattributeName="opacity"values="0.6;0.8;0.2"dur="4.2s"repeatCount="indefinite"></animate></g>
<g><circlecx="120"cy="-5"r="4"fill="white"></circle><animateMotiondur="4.5s"repeatCount="indefinite"path="M120 -5 C110 120,130 230,120 400"></animateMotion><animateattributeName="opacity"values="0.6;0.8;0.2"dur="4.5s"repeatCount="indefinite"></animate></g>
<g><circlecx="180"cy="-40"r="3"fill="white"></circle><animateMotiondur="5s"repeatCount="indefinite"path="M180 -40 C170 80,190 250,180 400"></animateMotion><animateattributeName="opacity"values="0.6;0.8;0.2"dur="5s"repeatCount="indefinite"></animate></g>
<g><circlecx="280"cy="-30"r="2"fill="white"></circle><animateMotiondur="4.3s"repeatCount="indefinite"path="M280 -30 C270 50,290 200,280 400"></animateMotion><animateattributeName="opacity"values="0.6;0.8;0.2"dur="4.3s"repeatCount="indefinite"></animate></g>
<g><circlecx="330"cy="-50"r="4"fill="white"></circle><animateMotiondur="5.5s"repeatCount="indefinite"path="M330 -50 C320 120,340 220,330 400"></animateMotion><animateattributeName="opacity"values="0.6;0.8;0.2"dur="5.5s"repeatCount="indefinite"></animate></g>
搁以前，年终大战哪有他们的份儿，现在倒好，妥妥的联盟强队，和骑士、雷霆、绿凯、灰熊这几个大佬掰手腕。
当时杰曼拿球时，范子铭的挡拆还没起作用，他就自己往篮下跑去了。这导致整个战术得重新安排。而且杰曼也没注意到范子铭往篮下跑，这样就白白浪费了大约12秒。这时，陈盈骏摊开双手，表示很无奈。
</svg>
<br></section>
2.3 何如放进公众号著述里？
答：复制粘贴。
因为公众号的裁剪器不救助svg插入，是以咱们是手动粘贴。
复制前边好意思满的SVG代码
在裁剪器里空一瞥
掀开浏览器的约束台（console），Windows按F12（Mac按Option+Command+I），选中这一瞥
右键“Edit as HTML”，将原代码全部替换成SVG代码
复制前边好意思满的SVG代码
在裁剪器里空一瞥
掀开浏览器的约束台（console），Windows按F12（Mac按Option+Command+I），选中这一瞥
右键“Edit as HTML”，将原代码全部替换成SVG代码
这是演示视频：
2.4 跨图下雪何如作念的？
hh，其实它是假跨图。只需要让SVG动画的刷新本事略长于页面内刷屏的畅通本事，它看起来即是在跨图下雪了。
使用上头代码，将多张图放在一皆，当然就能杀青雪花在多图上的一致性。
本色上，除了不错下雪，也不错下雨、放烟花（从下往上畅通）和下红包……
写在临了
推理模子不错用来作念什么？
除了计较、推理外，关于写代码亦然很有裨益。2023年，GitHub曾作念过统计，92%的拓荒者都用过AI写代码。
来到当今，这个数字注定有增无减。Claude的Artifacts功能让好多东说念主如获至宝，ChatGPT 4o进击推出canva功能，包括通义也有了我方的「代码模式」，以及如今智谱的GLM-Zero推理模子。
诈欺拓荒可视化，真就通宵之间干预了“东说念主东说念主”系列。
咱们来望望智谱Zero模子的推理经过，我以为不错用“三想此后行”这个词来评价。
生成后的SVG代码，不错径直使用，无需再改。
诚然加拿大pc28在线预测，独一过失即是还不成径直预览。但愿智谱快快上线预览功能~
发布于：四川省