AnimateCC基础教学:贝塞尔曲线动画

最新推荐文章于 2025-05-18 16:45:19 发布

gCodeTop 格码拓普老师

最新推荐文章于 2025-05-18 16:45:19 发布

阅读量69

点赞数 3

分类专栏： AnimateCC基础教学文章标签： Animate javascript

本文链接：https://blog.csdn.net/vinglemar/article/details/147807621

版权

AnimateCC基础教学专栏收录该内容

17 篇文章

订阅专栏

1.动画:

var curveShape = new createjs.Shape();
stage.addChild(curveShape);
// 定义贝塞尔曲线参数
var startPoint = {x: 100, y: 300}; // 起点
var controlPoint = {x: 400, y: 100}; // 控制点
var endPoint = {x: 700, y: 300}; // 终点
// 绘制贝塞尔曲线
function drawCurve() {
   curveShape.graphics.clear().setStrokeStyle(2)
        .beginStroke("#FF0000")
        .moveTo(startPoint.x, startPoint.y)
        .quadraticCurveTo(
            controlPoint.x, controlPoint.y,
            endPoint.x, endPoint.y
        );
}
// 创建控制点的补间动画
createjs.Tween.get(controlPoint, {loop: true})
    .to({x: 400, y: 500}, 2000, createjs.Ease.quadInOut)
    .to({x: 400, y: 100}, 2000, createjs.Ease.quadInOut);
// 每帧更新舞台
createjs.Ticker.addEventListener("tick", function() {
    drawCurve(); // 重绘曲线
    stage.update();
});

2.曲线循环绘制:

var curveShape = new createjs.Shape();
stage.addChild(curveShape);
// 定义贝塞尔曲线参数
var startPoint = {x: 100, y: 300}; // 起点
var controlPoint = {x: 400, y: 100}; // 控制点
var endPoint = {x: 700, y: 300}; // 终点
// 绘制贝塞尔曲线
function drawCurve() {
   curveShape.graphics.setStrokeStyle(2)
        .beginStroke("#FF0000")
        .moveTo(startPoint.x, startPoint.y)
        .quadraticCurveTo(
            controlPoint.x, controlPoint.y,
            endPoint.x, endPoint.y
        );
}

for(var i=0;i<100;i++)
{
	startPoint.x+=2;
	drawCurve();
}
stage.update();