計思路

定位動畫我們在之前已經實現了。那么這里只要考慮如何實現放大動畫，最后將兩者結合起來就好。從后端拿到的返回值是一個固定長度的數組，所以這里還是用 div 利用 flex 布局將圖片平鋪展示，利用 CSS transform 進行位置移動和縮放。

接下來就是如何計算出每個 div 的位移。DOM 元素的位移主要關注左上角頂點的位移。針對這個需求可以畫出如下草圖。外層 div 為 container，內層 div 為 inner。

從上圖可以看到，每個 div 的位移即 center.left - inner.left, center.top - inner.top. container 的中心點:

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

inner 移動的偏移量：

// 讓 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…

布局部分代碼：

  <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>

數據結構部分：

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,
  },
];

偏移量計算部分代碼：

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;
};

拓展

這次的需求也可以用于展示動畫。比如產品展示或者局部細節的展示。根據不同的需求結合不同的動畫，可以讓我們的頁面變得更加酷炫。

.particles-bg

地址：https://github.com/lindelof/particles-bg

效果：

2.particles-bg-vue

地址：https://github.com/lindelof/awesome-web-effect

這是一個基于VUE的粒子動畫組件。

3.jquery.ripples

地址：https://github.com/sirxemic/jquery.ripples

jQuery Ripples 插件向HTML添加一層水元素將波紋光標與WebGL的互動。您可以使用這種效果,讓你的靜態CSS背景圖像更多的互動。

4.MorphingBackgroundShapes

地址：https://github.com/codrops/MorphingBackgroundShapes

這是一個很具裝飾性的網站背景效果，當用戶在滾動到某一頁面后此背景的SVG圖形將隨著變形和移動。

5. SegmentEffect

地址：https://github.com/codrops/SegmentEffect

背景分割裝飾特效。

6.jQuery.BgSwitcher

地址：https://github.com/rewish/jquery-bgswitcher

jQuery.BgSwitcher實現背景圖像切換效果。

7.BackgroundScaleHoverEffect

地址：https://github.com/codrops/BackgroundScaleHoverEffect

使用 CSSclip paths 重現背景縮放懸停特效。

8.ImageGridMotionEffect

地址：https://github.com/codrops/ImageGridMotionEffect

為背景網格的圖像提供運動懸停特效。

9.jquery.adaptive-backgrounds.js

地址：https://github.com/briangonzalez/jquery.adaptive-backgrounds.js

adaptive-background.js是一款jQuery插件，可以根據div，img標簽里圖片的邊框顏色來動態調整父標簽的背景顏色，有點類似iTunes的專輯詳情的效果.

10.fixed-background-effect

地址：https://codyhouse.co/demo/fixed-background-effect/index.html#0

整屏滾動背景懸浮效果。

11.jquery-warpdrive-plugin

地址：https://github.com/NiklasKnaack/jquery-warpdrive-plugin

query-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件。這個星空背景特效可通過配置參數進行靈活的配置，可用鼠標進行互動。

12.RainEffect

使用WebGL在不同場景下的一些實驗性降雨和水滴效應。

人才們的 【三連】 就是小智不斷分享的最大動力，如果本篇博客有任何錯誤和建議，歡迎人才們留言，最后，謝謝大家的觀看。

作者：lindelof 譯者：前端小智 來源:github

原文：https://github.com/lindelof/awesome-web-effect