Adobe Animate+CreateJS实现对象按帧数上下往复运动的技术求助

和你实现月球旋转的逻辑一致，核心就是通过createjs.Ticker的tick事件逐帧更新对象位置，用状态变量和帧数计数来控制运动的阶段切换，具体步骤如下：

1. 定义关键参数 #

提前把运动相关的参数单独拎出来，方便后续调整：

• 目标运动对象：比如你做潮汐效果的海水对象，假设是_this.tideObject
• 上升/下降总帧数：比如上升用60帧、下降用60帧，可按需修改
• 位置参数：起始Y值（startY）、上升目标Y值（targetY），下降终点为targetY - 1
• 状态跟踪变量：currentPhase（标记当前是「上升」还是「下降」阶段）、frameCount（记录当前阶段已运行的帧数）

2. 计算每帧位移量 #

根据总帧数和位移区间，算出每帧需要移动的距离：

• 上升阶段每帧位移：(targetY - startY) / upFrames
• 下降阶段每帧位移：((targetY - 1) - targetY) / downFrames = -1 / downFrames

3. 编写tick事件处理函数 #

和月球旋转的revolution_moon函数逻辑类似，逐帧更新对象位置：

// 初始化参数
const upFrames = 60; // 上升总帧数
const downFrames = 60; // 下降总帧数
const startY = _this.tideObject.y; // 初始Y值
const targetY = 100; // 上升到的目标Y值
let currentPhase = "up"; // 当前运动阶段
let frameCount = 0; // 当前阶段已运行帧数

// 绑定tick事件
createjs.Ticker.addEventListener("tick", moveTideObject);

function moveTideObject() {
    frameCount++;
    
    if (currentPhase === "up") {
        // 计算上升每帧位移，更新Y值
        const step = (targetY - startY) / upFrames;
        _this.tideObject.y += step;
        
        // 到达上升帧数，切换到下降阶段，重置计数
        if (frameCount >= upFrames) {
            currentPhase = "down";
            frameCount = 0;
        }
    } else if (currentPhase === "down") {
        // 计算下降每帧位移，更新Y值
        const step = ((targetY - 1) - targetY) / downFrames;
        _this.tideObject.y += step;
        
        // 到达下降帧数，切换回上升阶段，重置计数
        if (frameCount >= downFrames) {
            currentPhase = "up";
            frameCount = 0;
        }
    }
}

额外说明 #

• 如果需要更平滑的运动，可把线性位移换成缓动公式，但你要的是按帧数精准控制，线性位移就足够
• 可以把参数改成Animate舞台上的可配置变量，不用改代码就能调整运动参数

内容的提问来源于stack exchange，提问作者Jean-François CARIOU