我是一名试图进入编码的动画师,我对基础知识有点困惑。
这是一个简单的角色行走周期,我正试图在身体[ManBody]和脚[foot01]之间用代码[arcTo]绘制腿部。
画线和身体移动 - 但是每一帧都重新绘制线条 - 我如何/在哪里stage.update();所以它只是一条线吸引到舞台上,然后在移动的部分之间移动?
//mouse cursor
stage.canvas.style.cursor = "none";
this.ManBody.mouseEnabled = false;
this.addEventListener("tick", fl_CustomMouseCursor.bind(this));
function fl_CustomMouseCursor() {
this.ManBody.x = (stage.mouseX+350) * 0.5 ;
this.ManBody.y = (stage.mouseY+200) * 0.5;
}
//line
createjs.Ticker.addEventListener("tick",fl_DrawLineCont.bind(this));
createjs.Ticker.setFPS(10);
function fl_DrawLineCont(event) {
var stroke_color = "#ff0000";
var shape = new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color)
.moveTo(this.ManBody.x, this.ManBody.y)
.arcTo(this.foot01.x, this.foot01.y, this.ManBody.x, this.ManBody.y, 50).endStroke());
this.addChild(shape);
stage.update(event);
}
答案 0 :(得分:0)
你在每一帧创建形状,你应该在它之外创建它并重绘它的图形:
var stroke_color = "#ff0000";
var graphics = new createjs.Graphics()
var shape = new createjs.Shape(graphics);
this.addChild(shape);
function fl_DrawLineCont(event)
{
graphics.clear();
graphics.beginStroke(stroke_color);
graphics.moveTo(this.ManBody.x, this.ManBody.y).arcTo(this.foot01.x, this.foot01.y, this.ManBody.x, this.ManBody.y, 50).endStroke();
stage.update(event);
}