在做鱼游动的动画,希望通过贝塞尔曲线设定起始点,控制点,和结束点.
查看文档,3.8只有一个
bezier (C1 : number, C2 : number, C3 : number, C4 : number, t : number) : number
没有进一步说明,也不太看得懂,查看论坛,好像这个函数以前经历过数个版本的改动.
按照动态曲线移动,应该是游戏中很常见的功能,当前cocos版本是如何对这个功能提供支持的?
除了商店买插件外。
在做鱼游动的动画,希望通过贝塞尔曲线设定起始点,控制点,和结束点.
查看文档,3.8只有一个
bezier (C1 : number, C2 : number, C3 : number, C4 : number, t : number) : number
没有进一步说明,也不太看得懂,查看论坛,好像这个函数以前经历过数个版本的改动.
按照动态曲线移动,应该是游戏中很常见的功能,当前cocos版本是如何对这个功能提供支持的?
除了商店买插件外。
/**
* 二阶贝塞尔曲线运动
* @param target 目标
* @param duration 时间
* @param c1 起始点
* @param c2 控制点
* @param to 终点
* @param opts 自定义选项
* @returns
/
public static bezierTo(target: any, duration: number, c1: Vec3, c2: Vec3, to: Vec3, opts: any) {
opts = opts || Object.create(null);
/*
* @desc 二阶贝塞尔
* @param {number} t 当前百分比
* @param {} p1 起点坐标
* @param {} cp 控制点
* @param {} p2 终点坐标
* @returns {any}
*/
let twoBezier = (t:number, p1: Vec3, cp: Vec3, p2: Vec3) => {
let x = (1 - t) * (1 - t) * p1.x + 2 * t * (1 - t) * cp.x + t * t * p2.x;
let y = (1 - t) * (1 - t) * p1.y + 2 * t * (1 - t) * cp.y + t * t * p2.y;
return v3(x, y, 0);
};
opts.onUpdate = (arg: Vec3, ratio: number) => {
target.position = twoBezier(ratio, c1, c2, to);
};
return tween(target).to(duration, {}, opts);
}
/**
* 3阶贝塞尔曲线
* @param target
* @param t
* @param p1
* @param cp1
* @param cp2
* @param p2
* @param opts
* @returns
*/
public static bezierTo3(target:any,t:number,p1:Vec3,cp1:Vec3,cp2:Vec3,p2:Vec3,opts:any){
opts = opts || Object.create(null);
const threeBezier = (t:number, p1: Vec3, cp1: Vec3, cp2: Vec3, p2: Vec3) =>{
let x =
(1 - t) * (1 - t) * (1 - t) * p1.x +
3 * t * (1 - t) * (1 - t) * cp1.x +
3 * t * t * (1 - t) * cp2.x +
t * t * t * p2.x;
let y =
(1 - t) * (1 - t) * (1 - t) * p1.y +
3 * t * (1 - t) * (1 - t) * cp1.y +
3 * t * t * (1 - t) * cp2.y +
t * t * t * p2.y;
return v3(x, y, 0);
};
opts.onUpdate = (arg: Vec3, ratio: number) => {
target.position = threeBezier(ratio,p1,cp1, cp2, p2);
};
return tween(target).to(t, {}, opts);
}
如果是曲线移动调那个方法就是了 参数自己试试 使用起来问题应该不大,
我以为是要画出运动轨迹呢 然后持续显示 这个倒是很少有人讨论,也想听听怎么实现
1.Animation—clip
2.自定义tween里的opt(自定义属性)
感谢cyuu和倔强的落叶答案,cyuu给了当前版本的调用参考.
倔强的落叶给了更具体的细节.
拿走了感谢大佬