Vue3 实现一个简单的放大动画

这是之前方位动画的衍生需求。先根据后端返回的数据排列内容,然后当用户点击某块内容后居中放大并根据具体的方位数据显示方位动画。

可以参考下面的效果。

设计思路

定位动画我们在之前已经实现了。那么这里只要考虑如何实现放大动画,最后将两者结合起来就好。从后端拿到的返回值是一个固定长度的数组,所以这里还是用 div 利用 flex 布局将图片平铺展示,利用 CSS transform 进行位置移动和缩放。

接下来就是如何计算出每个 div 的位移。DOM 元素的位移主要关注左上角顶点的位移。针对这个需求可以画出如下草图。外层 div 为 container,内层 div 为 inner。

从上图可以看到,每个 div 的位移即 center.left - inner.left, center.top - inner.top. container 的中心点:

javascript 复制代码
const containerCenterX = containerRect.left + containerRect.width / 2;
const containerCenterY = containerRect.top + containerRect.height / 2;

inner 移动的偏移量:

javascript 复制代码
// 让 inner 移到 container 的正中间
const offsetX = containerCenterX - itemRect.width / 2 - itemRect.left;
const offsetY = containerCenterY - itemRect.height / 2 - itemRect.top;

最后将方位动画的 div 叠在 inner 上面即可。

代码实现和 Demo 演示

梳理清思路之后,就可以实现代码了。Demo 已经放在 CodeSandbox 上了。其中最主要的还是位移计算的逻辑。下面是Demo地址,也可以在我的博客上看到 Demo。 Demo 地址:codesandbox.io/p/devbox/si...

布局部分代码:

HTML 复制代码
  <div class="container" ref="container">
    <div
      v-for="(image, index) in imageList"
      :key="index"
      class="wrapper"
      ref="imageElList"
      :style="{ opacity: image.active ? 1 : 0.6 }"
      @click="toggleActiveImage(index)"
    >
      <img :src="image.src" class="image" />
      <direction
        ref="directionElList"
        class="direction"
        :style="{ display: image.active ? 'block' : 'none' }"
        :pinPosition="selectedDirection"
      />
    </div>
  </div>

数据结构部分:

javascript 复制代码
export const imageDemos = [
  {
    name: "image-1",
    src: "https://images.adsttc.com/media/images/564c/8b23/e58e/ce4d/7300/01c1/newsletter/01.jpg?1447856922",
    active: false,
  },
  {
    name: "image-2",
    src: "https://i.pinimg.com/550x/65/a9/10/65a91018534fc59b675150fc432ccc41.jpg",
    active: false,
  },
  {
    name: "image-3",
    src: "https://1.bp.blogspot.com/-PcYuV8FVZmQ/VXWy7y-QjDI/AAAAAAABewE/La-BpNsCsY0/s1600/mapa-grande1.jpg",
    active: false,
  },
  {
    name: "image-4",
    src: "https://image2.sina.com.cn/gm/zhuanqu/sephiroth/rwjs/fomalhaut_b.gif",
    active: false,
  },
  {
    name: "image-5",
    src: "https://gd-hbimg.huaban.com/f0c7a577ed51f171967cbd3c1b21e90361b6924b1594b7-yrOBDd",
    active: false,
  },
];

偏移量计算部分代码:

javascript 复制代码
const showActiveImage = (imageEl) => {
  const containerEl = container.value;

  const containerRect = containerEl!.getBoundingClientRect();
  const itemRect = imageEl!.getBoundingClientRect();

  const containerCenterX = containerRect.left + containerRect.width / 2;
  const containerCenterY = containerRect.top + containerRect.height / 2;

  const offsetX = containerCenterX - itemRect.width / 2 - itemRect.left;
  const offsetY = containerCenterY - itemRect.height / 2 - itemRect.top;

  imageEl!.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(1.2)`;
  imageEl!.style.zIndex = 100;
};

拓展

这次的需求也可以用于展示动画。比如产品展示或者局部细节的展示。根据不同的需求结合不同的动画,可以让我们的页面变得更加酷炫。

题外话

其实这两次的动画效果,代码都是利用 ChatGPT 生成的,我自己基本没有什么参与。在 4 年前我就从前端转到了后端,因此对于前端方面的知识还停留在很久之前。但有了 ChatGPT 的加持,我也可以用当前的前端技术实现一些需求。

尽管这次的需求比较简单,但通过实践可以发现,利用好 AI 能够拓宽我们的技术面,让我们做到更多事情。但于此同时,作为开发者也应当思考与 AI 之间的关系了,这又是另一个话题了

相关推荐
Penk是个码农几秒前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1012 分钟前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye3 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤8 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子12 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo42 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang44 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil1 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录1 小时前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户8122199367221 小时前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端