Vue转盘动画修复：指定索引项无法对齐顶部指示器问题

我在Vue.js项目中实现了转盘滚动方法roll，期望旋转动画结束后，指定索引的列表项能停在顶部中心的指示器位置，但当前方法运行后显示错误的项。以下是我的roll方法代码：

roll(index, list, duration = 4000) {
    // Step 1: Find the item in the list by index and log it
    const item = list[index];
    console.log("Index:", index);
    console.log("Item:", item);

    // Step 2: Calculate the degree of the segment that the item occupies
    const segmentDegree = 360 / list.length; // Degree per segment
    const itemSegmentDegree = segmentDegree * index;
    console.log("Segment Degree of Item:", itemSegmentDegree);

    // Step 3: Calculate the top center segment degree
    const topCenterSegmentDegree = 0; // Top center is assumed to be 0 degrees

    // Step 4: Calculate the rotation needed
    // To have the item at the top center, adjust by subtracting itemSegmentDegree from 360
    const totalDegrees = 360 * 6; // Number of full rotations
    const rotationToAlignItemAtTop = (360 - itemSegmentDegree) % 360;
    const newEndDegree = totalDegrees + rotationToAlignItemAtTop;

    console.log(
        "Rotation to Align Item at Top:",
        rotationToAlignItemAtTop
    );
    console.log("New End Degree:", newEndDegree);

    // Get the wheel element
    const wheel = this.$refs.wheel;
    if (!wheel) {
        console.error("Wheel element is not available.");
        return;
    }

    // Reset previousEndDegree for a new spin
    this.previousEndDegree = this.previousEndDegree % 360;

    // Cancel any previous animation
    if (this.animation) {
        this.animation.cancel();
    }

    // Perform the animation
    this.animation = wheel.animate(
        [
            { transform: `rotate(${this.previousEndDegree}deg)` },
            { transform: `rotate(${newEndDegree}deg)` }
        ],
        {
            duration: duration, // Use the provided duration
            direction: "normal",
            easing: "cubic-bezier(0.440, -0.205, 0.000, 1.130)", // Use a smooth easing function
            fill: "forwards",
            iterations: 1
        }
    );

    // Update the rolling state and handle the reward box
    setTimeout(() => {
        this.rolling = false;
        console.log("done rolling");
        this.rewardBox = true;
    }, duration);

    // Update previousEndDegree to the new end degree
    this.previousEndDegree = newEndDegree;
},

错误原因定位 #

• 项的角度计算偏差：当前代码计算的是每个项的起始角度，但顶部指示器需要的是项的中心位置对准0度，而非起始位置，这会导致停止位置偏移半个分段角度。
• 初始位置重置逻辑错误：this.previousEndDegree = this.previousEndDegree % 360会重置累计旋转角度，破坏了旋转的连贯性，导致每次旋转的起始基准出错。

修复后的代码 #

roll(index, list, duration = 4000) {
    const item = list[index];
    console.log("Index:", index);
    console.log("Item:", item);

    const segmentDegree = 360 / list.length;
    // 计算项的中心角度（关键修复：加上半个分段角度，确保对准指示器）
    const itemCenterDegree = segmentDegree * index + segmentDegree / 2;
    console.log("Item Center Degree:", itemCenterDegree);

    const totalFullRotations = 360 * 6;
    // 基于当前累计角度计算最终旋转角度，保持连贯性
    const rotationToAlign = (360 - itemCenterDegree) % 360;
    const newEndDegree = this.previousEndDegree + totalFullRotations + rotationToAlign;

    console.log("Rotation to Align:", rotationToAlign);
    console.log("New End Degree:", newEndDegree);

    const wheel = this.$refs.wheel;
    if (!wheel) {
        console.error("Wheel element is not available.");
        return;
    }

    if (this.animation) {
        this.animation.cancel();
    }

    this.animation = wheel.animate(
        [
            { transform: `rotate(${this.previousEndDegree}deg)` },
            { transform: `rotate(${newEndDegree}deg)` }
        ],
        {
            duration: duration,
            direction: "normal",
            easing: "cubic-bezier(0.440, -0.205, 0.000, 1.130)",
            fill: "forwards",
            iterations: 1
        }
    );

    setTimeout(() => {
        this.rolling = false;
        console.log("done rolling");
        this.rewardBox = true;
    }, duration);

    this.previousEndDegree = newEndDegree;
}

关键修复说明 #

• 项中心角度计算：将原有的起始角度计算改为中心角度，确保项的中间位置精准对准顶部指示器。
• 保留累计旋转角度：移除previousEndDegree的取模重置，直接基于历史累计角度计算新的终止角度，保证每次旋转的起始状态连贯。
• 对齐逻辑修正：使用项的中心角度计算需要旋转的补偿角度，彻底解决位置偏移问题。

内容的提问来源于stack exchange，提问作者Kaung Myat