Wisdom Spectrum 버전 o1: GLM-Zero를 사용하여 이미지에 애니메이션 효과 추가하기

AI 실습 튜토리얼8개월 전 업데이트 AI 공유 서클
8.3K 00

겨울이 왔어요, 집에도 눈이 오나요?

智谱版o1:使用GLM-Zero,为图片加入动画效果

그러지 않았다면 상관없지만, 이제 해야 합니다.여기를 클릭하세요

 

어떻게 이런 일이 일어났나요?

답변:GLM-Zero를 통해스마트 스펙트럼이 이틀 전에 게시한 광고입니다. 스마트 스펙트럼 광고처럼 보이는데... 저도 똑같이 해보고 싶네요. 딥서치 채팅 "깊은 생각".

 

프롬프트를 사용합니다:

### 绘制一个SVG飘雪动画

#### 1. 背景
- 使用给定图片作为底图。
- 通过`<image>`标签引入背景图片。

#### 2. 雪花效果
- **雪花形状**: 白色圆点(`r=1.5`)表示雪花。
- **数量**: 10-15个雪花同时飘落,从左到右散落。
- **动画细节**:
- 雪花从 SVG 外进入(`y=-10~-50`),均匀散落(`x=0~400`)。
- 淡入淡出效果:
- 起始透明度:`opacity: 0`
- 最大透明度:`opacity: 0.8`
- 最终透明度:`opacity: 0`
- 随机的开始时间(`0-2.5s`)。
- 不同的下落速度(`3.5-5.5s`一个周期)。
- 随机的水平偏移(`25-60px`)。
- 使用独立的 `<g>` 元素表示每组雪花,不要使用 `<defs>`。
- **每组示例**:
```html
<g>
<circle cx="50" cy="-10" r="2" fill="white" />
<animateMotion dur="4s" repeatCount="indefinite" path="M50 -10 C55 80,45 150,50 400" />
<animate attributeName="opacity" from="1" to="0" dur="4s" repeatCount="indefinite" />
</g>
```

#### 3. 动画实现要点
- 使用`<animateMotion>`设置运动路径。
- 通过不同的`begin`时间错开雪花出现时机。
- 运动路径从顶部到达底部(400px距离)。

输出<svg>

 

그런 다음 플레이스홀더 이미지 주소가 포함된 SVG 효과를 생성합니다:

智谱版o1:使用GLM-Zero,为图片加入动画效果

 

이미지 주소를 바꾸면 다음과 같습니다: https://aisharenet.com/wp-content/uploads/2025/01/4f7a57875d3d62c.png

 

원칙은 무엇인가요?

 

공개 웹사이트와 웹사이트는 이미지, 효과 등을 함께 패키징할 수 있는 폴더와 같은 SVG라는 놀라운 포맷을 지원합니다. 예를 들어 "빅 모델 원리의 동적 데모"가 있습니다.

智谱版o1:使用GLM-Zero,为图片加入动画效果

 

그리고 다음 것 역시 2개의 레이어로 래핑된 SVG입니다.

智谱版o1:使用GLM-Zero,为图片加入动画效果

전체 코드는 다음과 같습니다:

<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image></image><g><circle cx="50" cy="-10" r="2" fill="white"></circle><animateMotion dur="4s" repeatCount="indefinite" path="M50 -10 C40 60,60 140,50 400"></animateMotion><animate attributeName="opacity" values="0.6;0.8;0.2" dur="4s" repeatCount="indefinite"></animate></g><g><circle cx="100" cy="-20" r="3" fill="white"></circle><animateMotion dur="5s" repeatCount="indefinite" path="M100 -20 C90 80,110 200,100 400"></animateMotion><animate attributeName="opacity" values="0.6;0.8;0.2" dur="5s" repeatCount="indefinite"></animate></g><g><circle cx="150" cy="-30" r="4" fill="white"></circle><animateMotion dur="3.5s" repeatCount="indefinite" path="M150 -30 C140 50,160 200,150 400"></animateMotion><animate attributeName="opacity" values="0.6;0.8;0.2" dur="3.5s" repeatCount="indefinite"></animate></g><g><circle cx="200" cy="-40" r="2" fill="white"></circle><animateMotion dur="4.5s" repeatCount="indefinite" path="M200 -40 C190 70,210 200,200 400"></animateMotion><animate attributeName="opacity" values="0.6;0.8;0.2" dur="4.5s" repeatCount="indefinite"></animate></g><g><circle cx="250" cy="-50" r="3" fill="white"></circle><animateMotion dur="5s" repeatCount="indefinite" path="M250 -50 C240 80,260 210,250 400"></animateMotion><animate attributeName="opacity" values="0.6;0.8;0.2" dur="5s" repeatCount="indefinite"></animate></g><g><circle cx="300" cy="-10" r="4" fill="white"></circle><animateMotion dur="4s" repeatCount="indefinite" path="M300 -10 C290 100,310 220,300 400"></animateMotion><animate attributeName="opacity" values="0.6;0.8;0.2" dur="4s" repeatCount="indefinite"></animate></g><g><circle cx="350" cy="-30" r="3" fill="white"></circle><animateMotion dur="3.8s" repeatCount="indefinite" path="M350 -30 C340 90,360 220,350 400"></animateMotion><animate attributeName="opacity" values="0.6;0.8;0.2" dur="3.8s" repeatCount="indefinite"></animate></g><g><circle cx="60" cy="-15" r="2" fill="white"></circle><animateMotion dur="4.2s" repeatCount="indefinite" path="M60 -15 C50 80,70 210,60 400"></animateMotion><animate attributeName="opacity" values="0.6;0.8;0.2" dur="4.2s" repeatCount="indefinite"></animate></g><g><circle cx="120" cy="-5" r="4" fill="white"></circle><animateMotion dur="4.5s" repeatCount="indefinite" path="M120 -5 C110 120,130 230,120 400"></animateMotion><animate attributeName="opacity" values="0.6;0.8;0.2" dur="4.5s" repeatCount="indefinite"></animate></g><g><circle cx="180" cy="-40" r="3" fill="white"></circle><animateMotion dur="5s" repeatCount="indefinite" path="M180 -40 C170 80,190 250,180 400"></animateMotion><animate attributeName="opacity" values="0.6;0.8;0.2" dur="5s" repeatCount="indefinite"></animate></g><g><circle cx="280" cy="-30" r="2" fill="white"></circle><animateMotion dur="4.3s" repeatCount="indefinite" path="M280 -30 C270 50,290 200,280 400"></animateMotion><animate attributeName="opacity" values="0.6;0.8;0.2" dur="4.3s" repeatCount="indefinite"></animate></g><g><circle cx="330" cy="-50" r="4" fill="white"></circle><animateMotion dur="5.5s" repeatCount="indefinite" path="M330 -50 C320 120,340 220,330 400"></animateMotion><animate attributeName="opacity" values="0.6;0.8;0.2" dur="5.5s" repeatCount="indefinite"></animate></g></svg>

 

이렇게 사용하세요:

  • 먼저 위의 코드를 복사합니다.
  • 공개 편집 페이지를 열고 한 줄 1111을 입력합니다.
  • 브라우저 콘솔을 열고(Windows의 경우 F12, Mac의 경우 Option+Command+I를 누릅니다) 1111 줄을 선택합니다.
  • 코드를 붙여넣은 후 이미지를

 

 

GLM-Zero를 사용하면 클릭 한 번으로 '우리의 태양계'와 같은 역동적인 프레젠테이션을 생성할 수도 있습니다.

智谱版o1:使用GLM-Zero,为图片加入动画效果

 

사용되는 프롬프트는 다음과 같습니다.

请帮我创建一个优雅的太阳系运行的 SVG 动画,要注意以下几点:
1. 画布要使用深邃的太空背景,让行星在正中央运行
2. 轨道和距离的处理:
- 从太阳向外,轨道间距要自然递增,不要太密也不要太疏
- 轨道用细线表示,要低调、优雅
- 最内圈行星离太阳大约 60 单位距离,最外圈约 250 单位
3. 行星的表现形式要生动:
- 太阳、地球、土星用对应的 emoji(☀️🌍🪐),让它们成为点睛之笔
- 其他行星用简单的圆点,颜色要符合行星特征(比如火星用#bc6038)
- 行星大小要符合比例,木星最大,水星最小
4. 动画要精致流畅:
- 运行速度要符合物理规律,离太阳越远转得越慢
- 所有动画必须无限循环且平滑,不能有任何跳跃感
- 从内到外大约是 3 秒到 15 秒的周期

원본 큐 워드 소스:아티팩트/캔바 대신 일반 '코드 패턴'을 사용하여 행성 궤도 맵 생성하기

 

API로 더 많은 것을 활용하세요

현재 GLM-Zero의 웹 버전에서는 최대 1000단어 입력이 가능하고 여러 개의 연속된 깊은 생각을 지원하지 않는 등 아직 약간의 제약이 있습니다.API를 사용하면 훨씬 더 유연해집니다.. 문서가 여기에 있습니다:

https://bigmodel.cn/dev/api/normal-model/glm-zero-preview

智谱版o1:使用GLM-Zero,为图片加入动画效果

 

왜 GLM-Zero인가?

공식적으로 수학 문제에 좋다고 광고하는 GLM과 달리, 저는 이 모델이 정보 시각화에 더 적합하다고 생각합니다.

여기에는 두 가지 주요 포인트가 있습니다:우선 출력 텍스트가 30,000자 이상으로 충분히 길어 더 많은 정보를 전달할 수 있습니다.

智谱版o1:使用GLM-Zero,为图片加入动画效果

 

2:사고 과정에서 전체 코드를 출력한 다음 반복합니다(o1은 그렇지 않습니다).. 예를 들면 다음과 같습니다.

智谱版o1:使用GLM-Zero,为图片加入动画效果

 

(방언) 재혼

또한 위의 SVG 데모는 아직 상당히 엉성하며, 탐색 단계로만 간주할 수 있다는 점을 인정해야 합니다. MidJourney 의 첫 번째 버전입니다.

智谱版o1:使用GLM-Zero,为图片加入动画效果

하지만 모델링 기능이 계속 향상되고 계속 탐구함에 따라 앞으로 더 놀라운 비주얼리제이션이 등장할 것이라고 확신합니다. 이를 위해 저는 계속해서 탐구하고, 문서화하고, 공유할 것입니다.

© 저작권 정책

관련 문서

댓글 없음

댓글에 참여하려면 로그인해야 합니다!
지금 로그인
없음
댓글 없음...