如何在Unreal的Widget蓝图/Canvas Panel中编程实现2D动画？

方案一：用OnPaint自定义绘制（类似C# Canvas编程逻辑） #

这是最贴近你之前C#.Net Canvas使用习惯的方式，完全通过代码控制绘制逻辑：

• 创建新的Widget蓝图（比如命名WB_BackgroundBlocks），作为背景容器拖到主菜单Widget的最底层
• 在Widget的Details面板开启Tick Enabled，确保能实时更新方块位置
• 定义结构体FBlockData，封装每个方块的核心属性：
  • Position（Vector2D）：当前坐标
  • Size（Vector2D）：方块尺寸
  • Velocity（Vector2D）：移动速度（含方向）
  • Color（LinearColor）：方块颜色
• 在Event Construct里初始化方块：
  1. 用循环生成10-20个方块（数量按需调整）
  2. 每个方块的Position设为Widget范围内的随机坐标
  3. Size设为固定值（如(50,50)）或随机范围值
  4. Velocity设为随机方向（X/Y轴取-1到1之间的随机数，再乘以速度系数比如50）
  5. Color设为低饱和度的随机浅色调（避免遮挡菜单内容）
  6. 将所有方块存入数组变量BlocksArray
• 在Event Tick里更新方块位置：
  1. 遍历BlocksArray，每个方块的Position += Velocity * Delta Seconds
  2. 判断方块是否超出Widget边界（比如X小于0或大于Widget宽度），超出则反转对应轴的速度（如Velocity.X *= -1）
• 在Event OnPaint里绘制方块：
  1. 拿到Paint Context参数
  2. 遍历BlocksArray，调用Draw Box节点，传入Context、Position、Size、Color等参数完成绘制

方案二：用Canvas Panel动态生成Image控件（新手友好的直观方案） #

如果觉得自定义绘制太抽象，可以用控件实例实现：

• 在主菜单Widget里添加一个Canvas Panel，设为全屏尺寸（锚点(0,0)到(1,1)），放在所有菜单元素底层
• 定义数组变量BlockImages，用来存储生成的Image控件
• 在Event Construct里生成方块：
  1. 循环生成指定数量的Image控件
  2. 设置Image的Brush为纯色（在Brush里选Color模式，设置颜色）
  3. 随机设置Image的Position（Canvas Panel内的坐标）、Size（如(50,50)）
  4. 将Image添加到Canvas Panel，同时存入BlockImages数组
• 在Event Tick里更新位置：
  1. 遍历BlockImages，获取每个Image的当前Position，加上预设的Velocity * Delta Seconds
  2. 判断是否超出Canvas Panel边界，超出则反转速度方向，更新Image的Position

注意事项 #

• 控制方块数量，过多会影响性能，建议10-30个以内
• 速度系数根据屏幕大小调整，避免移动过快或过慢
• 方块颜色尽量用低饱和度的浅色调，确保菜单文字和按钮清晰可见
• 方案一需开启Widget的Tick Enabled，否则不会执行更新逻辑

内容的提问来源于stack exchange，提问作者Filipe Cruz