头九不见雪,九九如六月。
——《数九歌》,春秋期间
你哪里下雪了吗?
干预冬天,老一辈可爱“数九”:
“一九二九怀中插足,三九四九冻死老狗,五九六九沿河看柳。七九花开,八九燕来。九九耕牛随处走。”
所谓“九”,简短要从冬至算起。以本年为例,从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在线预测,独一过失即是还不成径直预览。但愿智谱快快上线预览功能~
发布于:四川省