Cocos Creator H5 游戏开发之Tween动画的封装
前言
JoeyHuangzx
原创文章 12获赞 5访问量 8242
关注
私信
展开阅读全文
作者：JoeyHuangzx
为了更好更方便快捷高效的开发
正文我们知道在CocosCreator里如果要写一个缓动动画（Tween）还要有动画完成时间回调，需要有三个步骤，例如一个旋转制定角度的动画：
let action:cc.ActionInterval=cc.rotateTo(1,20);
let seq:cc.ActionInterval=cc.sequence(action,cc.callFunc(completeFunction));
this.node.runAction(seq);
每次都这样写，我是感觉到太麻烦了，习惯了Unity开发的我，知道Unity3D的Tween动画一句就可以搞定。于是我就自己封装了一层代码，一句话实现Tween动画，这个类里封装了大部分的Tween动画，代码就不用多说了，很容易看的明白，直接上代码就行
const {ccclass, property} = cc._decorator;
/**
* 缓动函数扩展
*
*/
@ccclass
export default class ActionIntervalTool
{
/**
* 移动到目标位置
* @param _node 目标节点
* @param durtion 时间
* @param v2 目标位置的坐标
* @param completeCB 完成事件回调函数
*/
public static MoveTo(_node:cc.Node,durtion:number,desPos:cc.Vec2,completeCB:any=null)
{
let _to:cc.ActionInterval=cc.moveTo(durtion,desPos);
this.runAction(_node,_to,completeCB);
}
/**
* 移动指定的距离
* @param _node 目标节点
* @param durtion 时间
* @param v2 移动的距离
* @param completeCB 完成事件回调函数
*/
public static MoveBy(_node:cc.Node,durtion:number,deltaPos:cc.Vec2,completeCB:any=null)
{
let _by:cc.ActionInterval=cc.moveBy(durtion,deltaPos);
this.runAction(_node,_by,completeCB);
}
public static MoveByLoop(_node:cc.Node,durtion:number,deltaPos:cc.Vec2)
{
let _by:cc.ActionInterval=cc.moveBy(durtion,deltaPos);
let req=cc.repeatForever(_by);
_node.runAction(req);
}
/**
* 旋转到目标角度
* @param _node 目标节点
* @param durtion 时间
* @param desAngle 目标角度
* @param completeCB 完成事件回调函数
*/
public static RotateTo(_node:cc.Node,durtion:number,desAngle:number,completeCB:any=null):any
{
let _to:cc.ActionInterval=cc.rotateTo(durtion,desAngle);
this.runAction(_node,_to,completeCB);
return _to;
}
/**
* 旋转指定的角度
* @param _node 目标节点
* @param durtion 时间
* @param desAngle 指定的角度
* @param completeCB 完成事件回调函数
*/
public static RotateBy(_node:cc.Node,durtion:number,deltaAngle:number,completeCB:any=null):any
{
let _by:cc.ActionInterval=cc.rotateBy(durtion,deltaAngle);
this.runAction(_node,_by,completeCB);
return _by;
}
/**
* 将节点大小缩放到指定的倍数
* @param _node 目标节点
* @param durtion 时间
* @param scaleNum 指定的倍数
* @param completeCB 完成事件回调函数
*/
public static ScaleTo(_node:cc.Node,durtion:number,scaleMulti:cc.Vec2,completeCB:any=null)
{
let _to:cc.ActionInterval=cc.scaleTo(durtion,scaleMulti.x,scaleMulti.y);
this.runAction(_node,_to,completeCB);
}
/**
* 按指定的倍数缩放节点大小
* @param _node 目标节点
* @param durtion 时间
* @param scaleNum 指定的倍数
* @param completeCB 完成事件回调函数
*/
public static ScaleBy(_node:cc.Node,durtion:number,scaleMulti:cc.Vec2,completeCB:any=null)
{
let _by:cc.ActionInterval=cc.scaleBy(durtion,scaleMulti.x,scaleMulti.y);
this.runAction(_node,_by,completeCB);
}
/**
* 修改透明度到指定值
* @param _node 目标节点
* @param durtion 时间
* @param opacity 0-255的透明值
* @param completeCB 完成事件回调函数
*/
public static FadeTo(_node:cc.Node,durtion:number, opacity: number,completeCB:any=null)
{
let _to:cc.ActionInterval=cc.fadeTo(durtion,opacity);
this.runAction(_node,_to,completeCB);
}
/**
* 从0到255的渐显
* @param _node 目标节点
* @param durtion 时间
* @param completeCB 完成事件回调函数
*/
public static FadeIn(_node:cc.Node,durtion:number,completeCB:any=null)
{
let _in:cc.ActionInterval=cc.fadeIn(durtion);
this.runAction(_node,_in,completeCB);
}
/**
* 从255到0的渐隐
* @param _node 目标节点
* @param durtion 时间
* @param completeCB 完成事件回调函数
*/
public static FadeOut(_node:cc.Node,duration:number,completeCB:any=null)
{
let _out:cc.ActionInterval=cc.fadeOut(duration);
this.runAction(_node,_out,completeCB);
}
/**
* 偏斜到目标角度
* @param _node
* @param _duration
* @param _sx
* @param _sy
* @param completeCB
*/
public static skewTo(_node:cc.Node,_duration:number,_sx:number,_sy:number,completeCB:any=null)
{
let skew:cc.ActionInterval=cc.skewTo(_duration,_sx,_sy);
this.runAction(_node,skew,completeCB);
}
/**
* 偏斜指定角度
* @param _node
* @param _duration
* @param _sx
* @param _sy
* @param completeCB
*/
public static skewBy(_node:cc.Node,_duration:number,_sx:number,_sy:number,completeCB:any=null)
{
let skew:cc.ActionInterval=cc.skewBy(_duration,_sx,_sy);
this.runAction(_node,skew,completeCB);
}
/**
* 用跳跃的方式移动到目标位置
* 将节点对象移动到抛物线位置，通过修改其位置属性来模拟跳跃移动
* @param _node
* @param _duration
* @param _position
* @param _y
* @param _height
* @param _jumps
* @param completeCB
*/
public static jumpTo(_node:cc.Node,_duration: number, _position: cc.Vec2|number, _y?: number, _height?: number, _jumps?: number,completeCB:any=null)
{
let jump:cc.ActionInterval=cc.jumpTo(_duration,_position,_y,_height,_jumps);
this.runAction(_node,jump,completeCB);
}
/**
* 用跳跃的方式移动指定位置
* 将节点对象移动到抛物线位置，通过修改其位置属性来模拟跳跃移动
* @param _node
* @param _duration
* @param _position
* @param _y
* @param _height
* @param _jumps
* @param completeCB
*/
public static jumpBy(_node:cc.Node,_duration: number, _position: cc.Vec2|number, _y?: number, _height?: number, _jumps?: number,completeCB:any=null)
{
let jump:cc.ActionInterval=cc.jumpBy(_duration,_position,_y,_height,_jumps);
this.runAction(_node,jump,completeCB);
}
//按贝赛尔曲线轨迹移动到目标位置
public static bezierTo()
{
}
/**
* 闪烁（基于透明度）
* @param _node 目标节点
* @param _durtion 时间
* @param _blinks 闪烁强度
* @param completeCB 完成回调
*/
public static blink(_node:cc.Node,_duration:number,_blinks:number,completeCB:any=null)
{
let _blink:cc.ActionInterval=cc.blink(_duration,_blinks);
this.runAction(_node,_blink,completeCB);
}
//修改颜色到指定值
public static tintTo()
{
}
public static Sequence()
{
}
public static runAction(_node:cc.Node,tweenAction:cc.ActionInterval,completeCB:any=null)
{
if(completeCB!=null)
{
let seq:cc.ActionInterval=cc.sequence(tweenAction,cc.callFunc(completeCB));
_node.runAction(seq);
}
else
{
_node.runAction(tweenAction);
}
}
调用方法非常简单,不用挂载到节点，只要把代码放到项目目录了就可以随意调用了，一句话搞定
ActionIntervalTool.MoveTo(this.node,1,cc.Vec2.ZERO,()=>{ console.log('tween complete'); });
ActionIntervalTool.RotateTo(this.node,1,20,()=>{ console.log('tween complete'); });
ActionIntervalTool.ScaleTo(this.node,1,cc.v2(1.2,1.2),()=>{ console.log('tween complete'); });
PS：这个类还有一部分Tween没有实现，后续持续更新
JoeyHuangzx
原创文章 12获赞 5访问量 8242
关注
私信
展开阅读全文
作者：JoeyHuangzx
