从游戏角色移动轨迹到UI加载动画：三角函数画圆在Unity/Cocos Creator中的实战应用

三角函数驱动的游戏动画：从圆形路径到UI特效的实战指南

在游戏开发中，平滑自然的动画效果往往能显著提升用户体验。想象一下：一个角色优雅地绕行障碍物，进度条如涟漪般扩散展开，或是雷达扫描线流畅地划过界面——这些看似复杂的动画效果，其实都建立在三角函数的基础之上。本文将带您深入探索如何利用sin/cos函数在Unity和Cocos Creator中实现这些令人惊艳的视觉效果。

1. 三角函数与圆形运动的核心原理

任何圆形运动都可以分解为两个相互垂直的简谐振动。这正是sin(正弦)和cos(余弦)函数的本质——它们分别描述了单位圆在y轴和x轴上的投影变化。

在游戏坐标系中，一个点围绕圆心$(x_0,y_0)$做半径为$r$的圆周运动，其位置随时间$t$变化的数学表达为：

x = x_0 + r \cdot \cos(\omega t + \phi) y = y_0 + r \cdot \sin(\omega t + \phi)

其中：

• $\omega$为角速度，控制运动快慢
• $\phi$为初始相位角，决定起点位置
• $t$通常是游戏时间变量

注意：游戏引擎通常使用弧度而非角度计算三角函数，记得将角度值乘以Mathf.Deg2Rad(Unity)或cc.misc.degreesToRadians(Cocos Creator)进行转换。

2. Unity中的圆形路径实现

2.1 基础角色绕行移动

以下是一个让GameObject沿圆形路径移动的Unity C#脚本：

using UnityEngine; public class CircularMotion : MonoBehaviour { [SerializeField] float radius = 5f; [SerializeField] float speed = 1f; [SerializeField] Transform centerPoint; private float angle; void Update() { angle += speed * Time.deltaTime; float x = centerPoint.position.x + Mathf.Cos(angle) * radius; float y = centerPoint.position.y + Mathf.Sin(angle) * radius; transform.position = new Vector3(x, y, transform.position.z); // 面向移动方向 Vector3 direction = (new Vector3(x, y, 0) - transform.position).normalized; if (direction != Vector3.zero) { transform.rotation = Quaternion.LookRotation(Vector3.forward, direction); } } }

参数优化建议：

2.2 高级应用：螺旋轨迹与阻尼运动

通过动态改变半径参数，可以实现螺旋进出效果：

float currentRadius = 0; float targetRadius = 5f; float shrinkSpeed = 0.5f; void Update() { // 平滑过渡到目标半径 currentRadius = Mathf.Lerp(currentRadius, targetRadius, Time.deltaTime * shrinkSpeed); angle += speed * Time.deltaTime; float x = centerPoint.position.x + Mathf.Cos(angle) * currentRadius; float y = centerPoint.position.y + Mathf.Sin(angle) * currentRadius; transform.position = new Vector3(x, y, transform.position.z); }

3. Cocos Creator中的UI动画实现

3.1 环形进度条特效

在Cocos Creator中，我们可以用三角函数创建动态加载进度条：

const { ccclass, property } = cc._decorator; @ccclass export class RadialProgress extends cc.Component { @property(cc.Node) indicator: cc.Node = null; @property duration: number = 2; private progress: number = 0; update(dt: number) { this.progress += dt / this.duration; if (this.progress > 1) this.progress = 0; const angle = this.progress * Math.PI * 2; const radius = this.node.width / 2; const x = radius * Math.cos(angle); const y = radius * Math.sin(angle); this.indicator.setPosition(x, y); } }

性能优化技巧：

• 对于静态圆形UI，预计算顶点数据比实时计算更高效
• 使用对象池管理大量移动元素
• 复杂场景考虑使用Shader实现

3.2 雷达扫描效果

结合遮罩和动态生成，实现专业级雷达扫描：

// 在properties中添加 @property(cc.Graphics) graphics: cc.Graphics = null; @property scanSpeed: number = 1; private scanAngle: number = 0; update(dt: number) { this.scanAngle += this.scanSpeed * dt; if (this.scanAngle > Math.PI * 2) this.scanAngle -= Math.PI * 2; this.graphics.clear(); // 绘制扇形 this.graphics.fillColor = cc.Color.GREEN; this.graphics.moveTo(0, 0); this.graphics.arc(0, 0, 100, -this.scanAngle/2, this.scanAngle/2, false); this.graphics.fill(); // 添加扫描线 const endX = 100 * Math.cos(this.scanAngle); const endY = 100 * Math.sin(this.scanAngle); this.graphics.strokeColor = cc.Color.RED; this.graphics.moveTo(0, 0); this.graphics.lineTo(endX, endY); this.graphics.stroke(); }

4. 高级技巧与性能优化

4.1 参数化曲线运动

通过修改基础公式，可以创造各种变体效果：

// 椭圆运动 float x = a * Mathf.Cos(angle); float y = b * Mathf.Sin(angle); // 花瓣形轨迹 float r = radius * (1 + 0.5f * Mathf.Sin(5 * angle)); float x = r * Mathf.Cos(angle); float y = r * Mathf.Sin(angle);

4.2 多对象协调运动

让多个对象在圆周上均匀分布：

const count = 8; for (let i = 0; i < count; i++) { const angle = (i / count) * Math.PI * 2; const x = radius * Math.cos(angle); const y = radius * Math.sin(angle); const item = cc.instantiate(this.itemPrefab); item.setPosition(x, y); this.node.addChild(item); }

4.3 性能对比表格

在实际项目中，我通常会先采用最简单的每帧计算方式实现原型，待功能确认后再根据性能分析结果选择优化方案。对于移动端项目，要特别注意避免在Update中进行复杂的三角函数计算。