如何实现类Mac Dock的弹性缩放动画

效果概述

实现了以下特性:

  • 鼠标悬停时展开图标
  • 光标移动时图标弹性缩放
  • 相邻图标间距自动适应
  • 平滑过渡动画

注:如果你想先看效果或完整代码可以去codesandbox codesandbox.io/p/sandbox/b...

使用了我自己写的框架 belling js(在npm上找belling就可以了),是一个高性能的极简mvvm框架。如果你是用vue或react,把state转换成createSignal, h函数转换成jsx就可以了。

核心实现原理

1. 布局架构

使用绝对定位的弹性容器:

javascript 复制代码
ForIn("div", apps, (i, v) => {
  // 生成每个dock图标
}).style({
  position: "relative",
  width: () => apps.v.length * (w + gap) + gap + 'px',
  height: w + 'px'
})

2. 动态响应体系

基于响应式状态管理:

javascript 复制代码
const x = state(0); // 鼠标X坐标
const hover = state(false); // 悬停状态

3. 鼠标交互

通过事件监听更新状态:

javascript 复制代码
.on({
  mouseenter() { hover.v = true },
  mouseleave() { hover.v = false },
  mousemove(e) {
    x.v = e.clientX - ele.dom.offsetLeft;
  }
})

灵魂所在:缩放函数解析

核心算法

javascript 复制代码
function scale(x) {
  return x > 0 ?
    scaleRatio * Math.log(x + 1) + x :
    -(scaleRatio * Math.log(-x + 1) - x);
}

实现原理

这个函数实现了非对称弹性缩放效果:

scaleRatio: 缩放强度系数(示例值为2)

函数特点:

分界处理:偶函数沿鼠标两侧对称 对数基底:使用log2实现初始变化率大,即鼠标位置放大 叠加:位移 + 对数缩放分量

  • 中心点附近变化剧烈
  • 边缘区域变化平缓

动态尺寸计算

结合缩放函数实现弹性布局:

javascript

Copy

scss 复制代码
function size() {
  const l = i.v * (w + gap); // 原始左坐标
  const r = l + w;           // 原始右坐标
  
  // 计算缩放后的实际宽度
  return scale(r - x.v) - scale(l - x.v) + "px";
}

效果优化

添加一点CSS过渡动画:

css 复制代码
transition: all 0.1s

扩展建议

调节scaleRatio控制缩放幅度 修改对数基底改变衰减曲线 实现图标内容缩放

相关推荐
zwjapple2 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20204 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术5 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing5 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止5 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall5 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴5 小时前
简单入门Python装饰器
前端·python
袁煦丞6 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作