粒子Logo动画教程

boyanx5天前技术教程4

本教程将引导你使用Blender的Geometry Nodes创建一个引人注目的粒子Logo动画。

整个教程实现的基本原理如下:

  1. 导入Logo:首先,将你的Logo(最好是SVG格式)导入Blender,并将其转换为网格。
  2. 分布点:利用Geometry Nodes,在Logo的网格表面均匀或随机地分布大量点。
  3. 增加厚度与随机性:给这些点在Z轴上一定的随机厚度,使粒子云看起来更立体。
  4. 噪点置换:使用一个噪点纹理 (Noise Texture) 来驱动这些点的位置,通过动画化噪点纹理的参数(如W值和强度),使点云产生动态的、有机的运动,从无序状态汇聚成Logo形状。
  5. 实例化几何体:在这些受动画驱动的点上实例化小的几何体,如小球体 (Icosphere) 和小的平面圆片 (Mesh Circle),以形成可见的粒子。平面圆片可以随机旋转以产生闪光效果。
  6. 材质与灯光:为不同类型的粒子赋予不同的材质(例如,红色粒子和金色闪光粒子),并设置合适的灯光和辉光效果,以增强视觉吸引力。
  7. 动画渲染:最后,设置动画参数并渲染出最终的动画序列。

步骤一:准备Logo

  1. 打开Blender。如果你没有SVG格式的Logo,可以先创建一个文字对象:
  • Shift + A,选择 Text
  • Tab 进入编辑模式,修改文字为你想要的单个字母或符号(例如“M”)。
  • Tab 返回对象模式。
  • 右键点击文字对象,选择 Convert To -> Mesh
  • 如果你有SVG格式的Logo:
  • 点击 File -> Import -> Scalable Vector Graphics (.svg)
  • 选择你的SVG文件并导入。
  • Logo导入后通常很小,选中Logo,按 S 键将其放大到合适尺寸。
  • 选中Logo,按 Tab 进入 Edit Mode
  • A 全选所有顶点。
  • G 移动Logo,使其几何中心大致位于橙色的原点。
  • Tab 返回 Object Mode
  • 非常重要:按 Ctrl + A,然后选择 Scale,以应用缩放。这将确保后续Geometry Nodes操作的正确性。

步骤二:设置Geometry Nodes

  1. 将3D视图窗口向上拖动一个小角,分割出一个新的窗口。
  2. 将新窗口的编辑器类型更改为 Geometry Node Editor
  3. 确保你的Logo对象仍被选中,然后在 Geometry Node Editor 窗口中点击 New 按钮,创建一个新的Geometry Nodes修改器。

步骤三:在Logo表面分布点

  1. Geometry Node Editor 中,按 Shift + A 搜索并添加 Distribute Points on Faces节点,将其连接在 Group InputGroup Output 之间。
  2. Distribute Points on Faces 节点中:
  • Distribution MethodRandom 改为 Poisson Disk
  • 设置 Density Max1000.000
  • 设置 Distance Min0.01 m

步骤四:增加粒子在Z轴上的随机厚度

  1. Shift + A 搜索并添加 Set Position 节点,将其放置在 Distribute Points on Faces 节点之后。
  2. Shift + A 搜索并添加 Combine XYZ 节点。
  3. Shift + A 搜索并添加 Random Value 节点。
  4. Random Value 节点的 Value 输出连接到 Combine XYZ 节点的 Z 输入。
  5. Combine XYZ 节点的 Vector 输出连接到 Set Position 节点的 Offset 输入。
  6. Random Value 节点中 (需要根据图形具体尺寸来, 下面参数是我的 Nike Logo 尺寸):
  • 设置 Min-0.220
  • 设置 Max0.280

步骤五:使用噪点纹理置换粒子位置

  1. Shift + D 复制 Set Position 节点,将其放置在第一个 Set Position 节点之后。
  2. Shift + A 搜索并添加 Vector Math 节点,将其模式设置为 Multiply
  3. Shift + A 搜索并添加 Noise Texture 节点。
  4. Noise Texture 节点的 Color 输出连接到 Vector Math (Multiply) 节点的顶部 Vector 输入。
  5. Vector Math (Multiply) 节点的 Vector 输出连接到新复制的 Set Position 节点的 Offset 输入。
  6. Noise Texture 节点中:
  • 将其从 3D 改为 4D
  • Vector Math (Multiply) 节点中,将所有三个轴的数值暂时设置为 0.000 (这些值后续将用于动画)。

步骤六:调整点半径和实例化几何体

  1. Shift + A 搜索并添加 Set Point Radius 节点,放置在第二个 Set Position 节点之后。
  • 设置 Radius0.02 m
  • 返回到 Distribute Points on Faces 节点:
  • 设置 Density Max5000.000
  • Shift + A 搜索并添加 Separate Geometry 节点,将其放置在 Set Point Radius 之后。将 Domain 设置为 Point
  • Shift + A 搜索并添加一个 Instance on Points 节点。将 Separate Geometry 节点的 Selection 输出连接到此 Instance on Points 节点的 Points 输入。
  • Shift + A 搜索并添加 Icosphere 节点。将其 Mesh 输出连接到上述 Instance on Points 节点的 Instance 输入。
  • Icosphere > Radius: 0.02 m
  • Icosphere > Subdivisions: 1
  • Shift + D 复制 Instance on Points 节点。将 Separate Geometry 节点的 Inverted 输出连接到这个新的 Instance on Points 节点的 Points 输入。
  • Shift + A 搜索并添加 Mesh Circle 节点。将其 Mesh 输出连接到第二个 Instance on Points 节点的 Instance 输入。
  • Mesh Circle > Fill Type: N-Gon
  • Mesh Circle > Vertices: 6
  • Mesh Circle > Radius: 0.01 m
  • Shift + A 搜索并添加 Join Geometry 节点。将两个 Instance on Points 节点的 Instances 输出都连接到 Join Geometry 节点的 Geometry 输入。将 Join Geometry 节点的 Geometry 输出连接到 Group Output 节点。
  • Separate Geometry 节点的 Selection 输入添加一个 Random Value 节点:
  • 将其类型设置为 Boolean
  • 设置 Probability0.703
  • 为第一个 Instance on Points 节点 (连接到 Icosphere) 的 Scale 输入添加一个新的 Random Value 节点(类型为 Float):
  • Min: 0.230
  • Max: 0.690
  • 为第二个 Instance on Points 节点 (连接到 Mesh Circle) 的 Rotation 输入添加一个新的 Random Value 节点(类型为 Float)。这将自动连接到 Combine XYZ 的 Z 轴,或者你可以手动添加 Combine XYZ 并连接到 Z
  • Min: -50.830 (或一个较大的负数)。
  • Max: 30.490 (或一个较大的正数)。
  • 为第二个 Instance on Points 节点 (连接到 Mesh Circle) 的 Scale 输入添加一个新的 Random Value 节点(类型为 Float):
  • 例如 Min: 0.170, Max: 0.690

步骤七:设置材质

  1. Shift + A 搜索并添加 Set Shade Smooth 节点,将其放置在 Join Geometry 之前,可以先连接第一个 Instance on Points 的输出。
  2. Shift + A 搜索并添加两个 Set Material 节点。
  • 第一个 Set Material 节点:将其放置在 Icosphere 对应的 Instance on Points 节点和 Set Shade Smooth (或 Join Geometry) 之间。
  • 第二个 Set Material 节点:将其放置在 Mesh Circle 对应的 Instance on Points 节点和 Join Geometry 之间。
  • 转到Blender右侧的 Material Properties 选项卡。
  • 点击 New 创建一个新材质,命名为 Material.001 (或你选择的名称)。
  • Base Color: 设置为一个红色 (例如 #E7213FFF)。
  • Roughness: 1.000
  • 再次点击 + 号,然后点击 New 创建第二个材质,命名为 Material.002
  • Base Color: 设置为一个金色 (例如 #E7B140FF)。
  • Metallic: 1.000
  • Roughness: 0.297
  • 返回 Geometry Node Editor
  • 在连接到 Icosphere 实例的 Set Material 节点中,选择 Material.001
  • 在连接到 Mesh Circle 实例的 Set Material 节点中,选择 Material.002
  • 返回 Distribute Points on Faces 节点,将 Density Max 增加到 20000.000
  • Distance Min 调整为 0.005 m

步骤八:灯光和辉光设置

  1. 在Blender顶部的渲染属性中,将 Render Engine 更改为 Cycles
  2. 转到 World Properties
  • Surface -> Color 设置为纯黑色。
  • 展开 Volume,点击 Volume 旁边的点,选择 Principled Volume
  • 设置 Density0.02
  • Shift + A,选择 Light -> Area
  • G 然后 Z 将灯光向上移动。按 R 调整灯光角度,使其照射Logo。
  • Object Data Properties (灯泡图标) 中,对 Area 灯光进行设置:
  • Shape: Disk
  • Size: 1 m
  • Power: 500 W
  • 展开 Beam Shape,将 Spread 调整为约 36.6°
  • 切换到 Rendered 视图模式。
  • 转到 Compositing 工作区。勾选 Use Nodes
  • Shift + A,搜索并添加 Viewer 节点。将 Render Layers 节点的 Image 输出连接到 Viewer 节点的 Image 输入。同时,按住 Shift 并右键从 Render LayersImage 输出拖拽到 Composite 节点的 Image 输入,以保持两条连接。
  • Shift + A,搜索并添加 Glare 节点。将其放置在 Render LayersViewer/Composite 节点之间。
  • Glare 节点中:
  • 将类型从 Streaks 改为 Bloom
  • 展开 Highlights,根据需要调整 Threshold ,直到获得满意的辉光效果。
  • 回到3D视图,在右上角的 Viewport Shading 下拉菜单中,将 Compositor 设置为 Always,这样可以在渲染预览中看到辉光效果。

步骤九:添加动画

  1. 将时间轴的结束帧 End 设置为 230
  2. 回到 Geometry Node Editor
  3. 找到控制噪点强度的 Vector Math (Multiply) 节点。
  • 确保时间轴在第 1 帧。
  • Vector Math (Multiply) 节点的X, Y, Z值均设置为 1.900
  • 鼠标悬停在这些值上,按 I 键插入关键帧。
  • 将时间轴移动到第 200 帧。
  • Vector Math (Multiply) 节点的X, Y, Z值均设置为 0.010
  • 鼠标悬停在这些值上,按 I 键插入关键帧。
  • 找到 Noise Texture 节点。
  • 点击 Edit -> Preferences -> Animation。将 Default InterpolationBezier 改为 Linear。关闭 Preferences 窗口。
  • 确保时间轴在第 1 帧。
  • Noise Texture 节点的 W 值设置为 0.000
  • 鼠标悬停在 W 值上,按 I 键插入关键帧。
  • 将时间轴移动到第 200 帧。
  • Noise Texture 节点的 W 值设置为 1.100
  • 鼠标悬停在 W 值上,按 I 键插入关键帧。
  • 现在播放动画,你应该能看到粒子从分散状态汇聚成Logo的形状,并且在汇聚后有轻微的动态扰动。

步骤十:渲染设置

  1. 转到 Render Properties 选项卡 (相机图标)。
  • Sampling -> Render 下,设置 Max Samples300
  • 勾选 Denoise
  • 转到 Output Properties 选项卡 (打印机图标)。
  • 设置 Frame RangeEnd230
  • Output 部分,点击文件夹图标选择一个输出路径来保存你的动画帧。
  • File Format:
  • 如果你想输出为图像序列 (推荐),选择 PNG
  • 如果你想直接输出为视频文件,选择 FFmpeg video
  • 展开 Encoding
  • Container: MPEG-4
  • 点击 Render -> Render Animation

等待渲染完成,你就拥有了一个炫酷的粒子Logo动画!

标签: svg路径动画

相关文章

用Python+NiceGUI开发端午节倒计时界面:含知识解析与代码实现

一、界面功能:动态龙舟特效:底部龙舟划过水面留下波纹轨迹(SVG+JS动画实现)计算倒计时:自动计算距离端午的天数,当天自动切换祝福语3D旋转标题:"端午安康"文字持续旋转跳动(CSS...

交互设计师做好动画后,提交给开发的文档有哪些?

谢邀!简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有:Gif动画视频动画Web动画,而Web动画又包括:CSS动画、JS动画(Canvas动画、原生JS动画API)、SVG动画等...

解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享

前言当我们访问网站时,如果访问到不存在的路径时,会出现 404 错误。为了避免给访问者带来不良体验,设计网站时通常会在页面上展示“404 页面不存在”的提示,并引导用户进行返回首页等操作。因此在建立网...

手把手教你H5实现工厂游戏的CSS动画效果「实践」

作者:吴冠禧 WecTeam转发连接:https://mp.weixin.qq.com/s/u5GHsA0vHz8A_MmGslRw2g0 契机与背景今年Q1(2020年第一季度)参与了京喜事业部「京...

移动前端重构实战系列:5-7章

(本文系来自腾讯imweb团队 结一大大 关于移动端重构经验以及思想的实战系列,推荐点击左下角的阅读原文。)”本系列教程为实战教程,是自己移动端重构经验及思想的一次总结,也是对sheral UI的一次...

SVG交互图文|推送里的路径动画是怎么做到的?

线条自主移动变化构成画面,这种炫酷的路径动画特效,相信大家都见过。下面从业内首发SVG路径动画交互图文为案例,为大家分析一波。这是由「小编备用」于2019年5月交付于宝马的《你以为这只是一条线》从推文...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。