JavaScript实现图片从窗口中心缩放平移至固定位置的问题求助

我是JavaScript新手，正在制作技术演示网站自学JS。我尝试制作启动屏和导航栏，但启动屏图片无法正确转换为导航栏图标。

需求细节：

• 图片初始位于客户端窗口中心
• 根据用户的scrollY值平滑缩放并平移至窗口左上角
• 动画完成后，图标需始终距离屏幕顶部和左侧固定像素距离，且适配不同窗口尺寸

我尝试了多种方法，目前最接近的实现代码如下：

const icon = document.querySelector(".icon");

// Set position dynamically on page load
window.addEventListener("load", () => {
    icon.style.left = window.innerWidth / 2 - icon.width / 2 + "px";
    icon.style.top = window.innerHeight / 2 - icon.height / 2 + "px";
});

// Scale and translate icon between center and top left
window.addEventListener("scroll", () => {
    let scale = 100 - window.scrollY / 5.75;
    let left = (window.innerWidth - icon.width) / 2 - (window.scrollY * window.innerWidth) / 2000;
    let top = (window.innerHeight - icon.height) / 2 - (window.scrollY * window.innerHeight) / 2000;

    if (window.scrollY <= 500) {
        console.log("transform: \nscale: " + scale + "%\nleft: " + left + "px\ntop: " + top + "px");
        // Scale and translate icon
        icon.style.transform = "scale(" + scale + "%)";
        icon.style.left = left + "px";
        icon.style.top = top + "px";
    }
});

目前图片能从屏幕中心启动并平滑缩放，但在不同窗口尺寸下无法准确到达目标位置。恳请各位提供解决方案！

核心问题在于当前平移计算未考虑缩放后图标的实际尺寸变化，且未基于动画进度做线性过渡。以下是优化后的实现：

关键优化思路 #

1. 用transform: translate()替代直接修改left/top，避免缩放导致的位置偏差，同时提升动画性能
2. 基于滚动进度做线性插值，确保任何窗口尺寸下都能准确过渡到目标位置
3. 监听窗口 resize，动态适配不同屏幕尺寸

优化后代码 #

const icon = document.querySelector(".icon");
// 可自定义的参数
const scrollThreshold = 500;       // 滚动到该值时动画完成
const targetScale = 0.3;           // 图标最终缩放比例
const targetFixedTop = 20;         // 最终距离顶部固定像素
const targetFixedLeft = 20;        // 最终距离左侧固定像素

// 初始化图标到窗口中心
function initIconCenter() {
    const iconRect = icon.getBoundingClientRect();
    const centerX = (window.innerWidth - iconRect.width) / 2;
    const centerY = (window.innerHeight - iconRect.height) / 2;
    icon.style.transform = `translate(${centerX}px, ${centerY}px) scale(1)`;
}

// 处理滚动动画逻辑
function handleScrollAnimation() {
    const scrollY = window.scrollY;

    // 滚动超过阈值，固定图标到目标位置
    if (scrollY >= scrollThreshold) {
        icon.style.transform = `translate(${targetFixedLeft}px, ${targetFixedTop}px) scale(${targetScale})`;
        icon.style.position = 'fixed';
        icon.style.left = 'auto';
        icon.style.top = 'auto';
        return;
    }

    // 计算动画完成进度（0-1）
    const progress = scrollY / scrollThreshold;
    // 计算当前缩放比例
    const currentScale = 1 - (1 - targetScale) * progress;
    // 计算当前位置：从中心平滑过渡到目标点
    const iconRect = icon.getBoundingClientRect();
    const initialCenterX = (window.innerWidth - iconRect.width) / 2;
    const initialCenterY = (window.innerHeight - iconRect.height) / 2;
    const currentX = initialCenterX - (initialCenterX - targetFixedLeft) * progress;
    const currentY = initialCenterY - (initialCenterY - targetFixedTop) * progress;

    // 应用变换
    icon.style.transform = `translate(${currentX}px, ${currentY}px) scale(${currentScale})`;
}

// 绑定事件
window.addEventListener("load", initIconCenter);
window.addEventListener("scroll", handleScrollAnimation);
window.addEventListener("resize", initIconCenter);

配套CSS样式 #

给图标添加基础定位样式，确保动画正常生效：

.icon {
    position: absolute;
    transition: transform 0.1s ease; /* 可选：添加过渡让动画更顺滑 */
    /* 自定义图标尺寸 */
    width: 120px;
    height: 120px;
}

内容的提问来源于stack exchange，提问作者Adam Cockell