FLIP 動畫優化技術：消除昂貴的 Layout 變化，實現高效能網頁動畫

4044 字

20 分鐘

FLIP 動畫優化技術：消除昂貴的 Layout 變化，實現高效能網頁動畫

2025-09-18

前端

FLIP

/

JavaScript

/

效能優化

/

動畫效果

/

前端開發

在網頁動畫開發中，我們經常遇到一個挑戰：如何實現流暢的 60fps 動畫效果？當我們直接修改元素的 top、left、width 或 height 屬性時，會觸發昂貴的 Layout 變化，導致動畫卡頓。FLIP 技術就是解決這個問題的經典方法。

為什麼需要 FLIP 技術？#

在了解 FLIP 之前，我們先看看傳統動畫的效能問題：

昂貴的 Layout 變化#

當我們直接修改布局屬性時，瀏覽器必須執行以下步驟：

Recalculate Style - 重新計算樣式
Layout (Reflow) - 重新計算元素位置和尺寸
Paint - 重新繪製元素
Composite - 合成圖層

1
// ❌ 昂貴的動畫實現 - 會觸發 Layout
2
element.style.left = '100px';  // 觸發 Layout
3
element.style.top = '50px';    // 觸發 Layout
4
element.style.width = '200px'; // 觸發 Layout

高效的 Transform 動畫#

相對的，transform 屬性能夠在獨立的 Composite Layer 上執行，避免 Layout 和 Paint：

1
// ✅ 高效的動畫實現 - 只有 Composite
2
element.style.transform = 'translate(100px, 50px) scale(1.5)'; // 只觸發 Composite

FLIP 技術就是利用這個原理，將昂貴的 Layout 變化轉換成高效的 Transform 動畫。

FLIP 技術核心原理#

FLIP 是 First, Last, Invert, Play 四個字的縮寫，代表一種高效的動畫優化技術：

1. First - 記錄初始狀態#

在 FLIP 技巧中，我們需要先記錄下動畫元件的初始狀態：

1
const getElementRect = (element) => {
2
  const rect = element.getBoundingClientRect();
3
  return {
4
    left: rect.left,
5
    top: rect.top,
6
    width: rect.width,
7
    height: rect.height
8
  };
9
};
10

11
// F: 記錄初始狀態
12
const firstState = getElementRect(element);

2. Last - 套用最終狀態並記錄#

接著進行一些運算後，套用動畫的最終狀態在動畫元件上，並且將完成動畫後的狀態記錄下來：

1
// 套用最終狀態（例如：添加 CSS class）
2
element.classList.add('target-position');
3
// 或者直接修改屬性
4
element.style.left = '300px';
5
element.style.top = '100px';
6

7
// L: 記錄最終狀態
8
const lastState = getElementRect(element);

3. Invert - 最主要的 Hack#

FLIP 最主要的 hack 就是發生在這個階段。根據前兩個步驟，我們可以知道該動畫物件在動畫期間的位置變化，接著利用 transform 與 scale，將物件從動畫結尾位置移動回初始狀態的地點：

1
// I: 計算位置和尺寸差異
2
const deltaX = firstState.left - lastState.left;
3
const deltaY = firstState.top - lastState.top;
4
const scaleX = firstState.width / lastState.width;
5
const scaleY = firstState.height / lastState.height;
6

7
// 用 transform 將元素拉回初始位置
8
element.style.transformOrigin = 'top left';
9
element.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;

這時候，元素看起來就像是在初始位置，但實際上 DOM 結構已經是最終狀態了！

4. Play - 消除昂貴的 Layout Change#

在最後的步驟時，元件已經被我們 transform 回起始點了，這時只要將 transform 屬性移除，並加上 transition 的效果，我們就能完美的消除原先昂貴的 Layout change，改以能擁有獨自 Layer 的 transform 來處理動畫效果：

1
// P: 播放高效動畫
2
requestAnimationFrame(() => {
3
  element.style.transition = 'transform 0.3s ease-out';
4
  element.style.transform = 'none'; // 移除 transform，讓元素回到最終位置
5
});

這樣一來，整個動畫過程只有 Transform 屬性在變化，避免了昂貴的 Layout 和 Paint 操作！

FLIP 技術的效能優勢#

渲染效能對比#

讓我們用數據來看看 FLIP 技術的效能優勢：

傳統動畫（修改 Layout 屬性）#

1
// 觸發的流程：
2
// Style → Layout → Paint → Composite
3
element.style.left = '300px';    // 每幀都要重新計算 Layout
4
element.style.width = '200px';   // 每幀都要重新計算 Layout
5

6
// 效能消耗：~16.67ms 中可能有 8-10ms 用於 Layout 計算

FLIP 動畫（使用 Transform）#

1
// 觸發的流程：
2
// Composite 唯
3
// 只觸發 Composite，在 GPU 上執行
4
element.style.transform = 'translate(300px, 0) scale(1.5)';
5

6
// 效能消耗：~16.67ms 中只有 1-2ms 用於 Composite

為什麼 Transform 這麼快？#

獨立的 Composite Layer：transform 會創建新的合成圖層
GPU 加速：在顯示卡上執行，不占用 CPU 資源
無需重新計算：不影響其他元素的位置

實戰範例：元素位置變化動畫#

以下是一個完整的 FLIP 動畫實現，展示如何將元素從一個位置平滑移動到另一個位置：

HTML 結構#

1
<div class="container">
2
  <div class="element" id="moveable-element">
3
    點擊我移動
4
  </div>
5
  <button onclick="moveElement()">移動元素</button>
6
  <button onclick="resetElement()">重設位置</button>
7
</div>
8

9
<div class="performance-demo">
10
  <h3>效能對比：</h3>
11
  <button onclick="badAnimation()">昂貴的動畫 (Layout)</button>
12
  <button onclick="goodAnimation()">高效的動畫 (FLIP)</button>
13
</div>

CSS 樣式#

1
.container {
2
  position: relative;
3
  width: 100%;
4
  height: 400px;
5
  border: 2px solid #ccc;
6
  margin: 20px 0;
7
}
8

9
.element {
10
  position: absolute;
11
  width: 100px;
12
  height: 100px;
13
  background: linear-gradient(45deg, #3498db, #9b59b6);
14
  border-radius: 8px;
15
  display: flex;
16
  align-items: center;
17
  justify-content: center;
18
  color: white;
19
  font-weight: bold;
20
  cursor: pointer;
21

22
  /* 初始位置 */
23
  left: 50px;
24
  top: 50px;
25
}
26

27
/* 目標位置 */
28
.element.moved {
29
  left: 300px;
30
  top: 200px;
31
  width: 150px;
32
  height: 150px;
33
}
34

35
.performance-demo {
36
  margin: 20px 0;
37
  padding: 20px;
38
  background: #f8f9fa;
39
  border-radius: 8px;
40
}
41

42
.performance-demo button {
43
  margin: 5px;
44
  padding: 10px 15px;
45
  border: none;
46
  border-radius: 4px;
47
  cursor: pointer;
48
}
49

50
.performance-demo button:first-of-type {
51
  background: #e74c3c;
52
  color: white;
53
}
54

55
.performance-demo button:last-of-type {
56
  background: #27ae60;
57
  color: white;
58
}

JavaScript 實現#

1
class FLIPAnimation {
2
  constructor() {
3
    this.isAnimating = false;
4
  }
5

6
  // 獲取元素的邊界資訊
7
  getElementRect(element) {
8
    const rect = element.getBoundingClientRect();
9
    return {
10
      left: rect.left,
11
      top: rect.top,
12
      width: rect.width,
13
      height: rect.height
14
    };
15
  }
16

17
  // FLIP 動畫實現
18
  flip(element, changeCallback, duration = 300) {
19
    if (this.isAnimating) return;
20
    this.isAnimating = true;
21

22
    // F: First - 記錄初始狀態
23
    const firstState = this.getElementRect(element);
24

25
    // L: Last - 套用變化並記錄最終狀態
26
    changeCallback(); // 執行狀態變化
27
    const lastState = this.getElementRect(element);
28

29
    // I: Invert - 計算並應用反轉變換
30
    const deltaX = firstState.left - lastState.left;
31
    const deltaY = firstState.top - lastState.top;
32
    const scaleX = firstState.width / lastState.width;
33
    const scaleY = firstState.height / lastState.height;
34

35
    // 用 transform 將元素拉回初始位置
36
    element.style.transformOrigin = 'top left';
37
    element.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
38

39
    // P: Play - 播放動畫
40
    requestAnimationFrame(() => {
41
      element.style.transition = `transform ${duration}ms cubic-bezier(0.4, 0, 0.2, 1)`;
42
      element.style.transform = 'none';
43

44
      // 清理
45
      setTimeout(() => {
46
        element.style.transition = '';
47
        element.style.transformOrigin = '';
48
        this.isAnimating = false;
49
      }, duration);
50
    });
51
  }
52
}
53

54
// 實例化 FLIP 動畫器
55
const flipAnimator = new FLIPAnimation();
56
let isMoved = false;
57

58
// 高效的 FLIP 動畫
59
function moveElement() {
60
  const element = document.getElementById('moveable-element');
61

62
  flipAnimator.flip(element, () => {
63
    element.classList.toggle('moved');
64
    isMoved = !isMoved;
65
  });
66
}
67

68
function resetElement() {
69
  const element = document.getElementById('moveable-element');
70

71
  if (isMoved) {
72
    flipAnimator.flip(element, () => {
73
      element.classList.remove('moved');
74
      isMoved = false;
75
    });
76
  }
77
}
78

79
// 效能對比範例
80
function badAnimation() {
81
  const element = document.getElementById('moveable-element');
82

83
  // ❌ 昂貴的動畫 - 直接修改 left/top 屬性
84
  console.time('昂貴的動畫');
85

86
  element.style.transition = 'left 300ms, top 300ms, width 300ms, height 300ms';
87

88
  if (isMoved) {
89
    element.style.left = '50px';
90
    element.style.top = '50px';
91
    element.style.width = '100px';
92
    element.style.height = '100px';
93
    isMoved = false;
94
  } else {
95
    element.style.left = '300px';
96
    element.style.top = '200px';
97
    element.style.width = '150px';
98
    element.style.height = '150px';
99
    isMoved = true;
100
  }
101

102
  setTimeout(() => {
103
    element.style.transition = '';
104
    console.timeEnd('昂貴的動畫');
105
  }, 300);
106
}
107

108
function goodAnimation() {
109
  console.time('高效的 FLIP 動畫');
110

111
  moveElement();
112

113
  setTimeout(() => {
114
    console.timeEnd('高效的 FLIP 動畫');
115
  }, 300);
116
}

進階技巧與優化#

1. 強制觸發 Composite Layer#

確保元素能夠在獨立的 GPU 圖層上執行：

1
// 強制創建 Composite Layer
2
element.style.willChange = 'transform';
3
// 或者
4
element.style.transform = 'translateZ(0)';
5
// 或者
6
element.style.backfaceVisibility = 'hidden';
7

8
// 動畫結束後記得移除
9
setTimeout(() => {
10
  element.style.willChange = '';
11
}, animationDuration);

2. 選擇適合的動畫屬性#

只使用不會觸發 Layout 和 Paint 的屬性：

1
// ✅ 只觸發 Composite 的屬性
2
'transform'     // translate, scale, rotate, skew
3
'opacity'       // 透明度
4
'filter'        // 濾鏡效果
5

6
// ❌ 會觸發 Layout 的屬性
7
'left', 'top', 'right', 'bottom'
8
'width', 'height'
9
'margin', 'padding'
10
'border-width'
11
'font-size'
12

13
// ❌ 會觸發 Paint 的屬性
14
'color', 'background-color'
15
'border-color', 'border-style'
16
'box-shadow', 'border-radius'
17
'text-decoration'

3. 效能監控與分析#

使用瀏覽器開發工具監控動畫效能：

1
class PerformanceMonitor {
2
  static measureFLIP(element, changeCallback) {
3
    // 開始效能記錄
4
    performance.mark('flip-start');
5

6
    const firstState = element.getBoundingClientRect();
7

8
    changeCallback();
9

10
    const lastState = element.getBoundingClientRect();
11

12
    const deltaX = firstState.left - lastState.left;
13
    const deltaY = firstState.top - lastState.top;
14

15
    element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
16

17
    requestAnimationFrame(() => {
18
      element.style.transition = 'transform 300ms';
19
      element.style.transform = 'none';
20

21
      // 結束效能記錄
22
      performance.mark('flip-end');
23
      performance.measure('FLIP Animation', 'flip-start', 'flip-end');
24

25
      // 查看結果
26
      const measures = performance.getEntriesByName('FLIP Animation');
27
      console.log(`FLIP 動畫耗時：${measures[0].duration}ms`);
28
    });
29
  }
30
}
31

32
// 使用方式
33
PerformanceMonitor.measureFLIP(element, () => {
34
  element.classList.toggle('moved');
35
});

4. 處理複雜場景#

滾動偏移處理#

1
class AdvancedFLIP {
2
  getElementRect(element) {
3
    const rect = element.getBoundingClientRect();
4
    return {
5
      left: rect.left + window.scrollX,
6
      top: rect.top + window.scrollY,
7
      width: rect.width,
8
      height: rect.height
9
    };
10
  }
11
}

多元素同時動畫#

1
class BatchFLIP {
2
  animateMultiple(elements, changeCallback) {
3
    // 批量記錄初始狀態
4
    const firstStates = elements.map(el => this.getElementRect(el));
5

6
    changeCallback();
7

8
    // 批量記錄最終狀態和應用變換
9
    elements.forEach((element, index) => {
10
      const lastState = this.getElementRect(element);
11
      const firstState = firstStates[index];
12

13
      const deltaX = firstState.left - lastState.left;
14
      const deltaY = firstState.top - lastState.top;
15

16
      element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
17
    });
18

19
    // 批量播放動畫
20
    requestAnimationFrame(() => {
21
      elements.forEach(element => {
22
        element.style.transition = 'transform 300ms ease-out';
23
        element.style.transform = 'none';
24
      });
25
    });
26
  }
27
}

實際應用場景#

FLIP 技術在以下場景中特別有用：

1. 列表重新排序#

1
function reorderList(listElement, newOrder) {
2
  const items = Array.from(listElement.children);
3

4
  // F: 記錄所有項目的初始位置
5
  const firstStates = items.map(item => item.getBoundingClientRect());
6

7
  // L: 重新排序 DOM
8
  newOrder.forEach(index => {
9
    listElement.appendChild(items[index]);
10
  });
11

12
  // I & P: 對每個項目應用 FLIP
13
  items.forEach((item, index) => {
14
    const lastState = item.getBoundingClientRect();
15
    const firstState = firstStates[index];
16

17
    const deltaX = firstState.left - lastState.left;
18
    const deltaY = firstState.top - lastState.top;
19

20
    if (deltaX || deltaY) {
21
      item.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
22

23
      requestAnimationFrame(() => {
24
        item.style.transition = 'transform 300ms ease-out';
25
        item.style.transform = 'none';
26
      });
27
    }
28
  });
29
}

2. 響應式布局變化#

1
function handleResponsiveChange() {
2
  const elements = document.querySelectorAll('.responsive-element');
3

4
  elements.forEach(element => {
5
    flipAnimator.flip(element, () => {
6
      // 將元素從 grid 改為 flexbox 布局
7
      element.parentElement.classList.toggle('flex-layout');
8
    });
9
  });
10
}
11

12
// 監聽視窗大小變化
13
window.addEventListener('resize', debounce(handleResponsiveChange, 300));

3. 模態窗動畫#

1
function showModal(triggerElement, modalElement) {
2
  flipAnimator.flip(modalElement, () => {
3
    modalElement.style.display = 'block';
4
    modalElement.classList.add('active');
5
  });
6
}
7

8
function hideModal(modalElement, targetElement) {
9
  flipAnimator.flip(modalElement, () => {
10
    modalElement.classList.remove('active');
11
    setTimeout(() => {
12
      modalElement.style.display = 'none';
13
    }, 300);
14
  });
15
}

框架整合#

雖然純 JavaScript FLIP 很強大，但現代框架也提供了優異的解決方案：

Vue Transition#

1
<transition-group name="flip-list" tag="ul">
2
  <li v-for="item in items" :key="item.id">
3
    {{ item.name }}
4
  </li>
5
</transition-group>
6

7
<style>
8
.flip-list-move {
9
  transition: transform 0.3s;
10
}
11
</style>

React with Framer Motion#

1
import { motion, AnimatePresence } from 'framer-motion';
2

3
<AnimatePresence>
4
  {items.map(item => (
5
    <motion.div
6
      key={item.id}
7
      layout
8
      initial={{ opacity: 0 }}
9
      animate={{ opacity: 1 }}
10
      exit={{ opacity: 0 }}
11
    >
12
      {item.content}
13
    </motion.div>
14
  ))}
15
</AnimatePresence>

Vue 中的 FLIP 應用#

Vue 框架為 FLIP 動畫提供了原生支援，讓開發者可以更簡單地實現複雜的動畫效果：

Vue 2/3 的 Transition Group#

Vue 的 transition-group 元件內建了 FLIP 技術，特別適合列表動畫：

1
<template>
2
  <div class="list-container">
3
    <button @click="shuffle">打亂順序</button>
4
    <transition-group name="list" tag="div" class="list">
5
      <div
6
        v-for="item in items"
7
        :key="item.id"
8
        class="list-item"
9
      >
10
        {{ item.name }}
11
      </div>
12
    </transition-group>
13
  </div>
14
</template>
15

16
<script>
17
export default {
18
  data() {
19
    return {
20
      items: [
21
        { id: 1, name: '項目 A' },
22
        { id: 2, name: '項目 B' },
23
        { id: 3, name: '項目 C' },
24
        { id: 4, name: '項目 D' }
25
      ]
26
    }
27
  },
28
  methods: {
29
    shuffle() {
30
      this.items = this.items.sort(() => Math.random() - 0.5);
31
    }
32
  }
33
}
34
</script>
35

36
<style>
37
.list {
38
  display: flex;
39
  flex-direction: column;
40
  gap: 10px;
41
}
42

43
.list-item {
44
  padding: 15px;
45
  background: #f0f0f0;
46
  border-radius: 5px;
47
  transition: all 0.3s ease;
48
}
49

50
/* FLIP 動畫 */
51
.list-move {
52
  transition: transform 0.3s ease;
53
}
54

55
.list-enter-active,
56
.list-leave-active {
57
  transition: all 0.3s ease;
58
}
59

60
.list-enter-from {
61
  opacity: 0;
62
  transform: translateX(30px);
63
}
64

65
.list-leave-to {
66
  opacity: 0;
67
  transform: translateX(-30px);
68
}
69

70
.list-leave-active {
71
  position: absolute;
72
}
73
</style>

Vue 3 Composition API 中手動實現 FLIP#

1
<template>
2
  <div class="container">
3
    <button @click="toggleLayout">切換布局</button>
4
    <div :class="['grid', { 'flex-layout': isFlexLayout }]">
5
      <div
6
        v-for="item in items"
7
        :key="item.id"
8
        :ref="el => setItemRef(item.id, el)"
9
        class="item"
10
      >
11
        {{ item.name }}
12
      </div>
13
    </div>
14
  </div>
15
</template>
16

17
<script>
18
import { ref, nextTick } from 'vue';
19

20
export default {
21
  setup() {
22
    const isFlexLayout = ref(false);
23
    const items = ref([
24
      { id: 1, name: 'A' },
25
      { id: 2, name: 'B' },
26
      { id: 3, name: 'C' },
27
      { id: 4, name: 'D' }
28
    ]);
29

30
    const itemRefs = ref(new Map());
31

32
    const setItemRef = (id, el) => {
33
      if (el) {
34
        itemRefs.value.set(id, el);
35
      }
36
    };
37

38
    const performFLIP = async () => {
39
      // F: First - 記錄初始位置
40
      const firstStates = new Map();
41
      itemRefs.value.forEach((el, id) => {
42
        firstStates.set(id, el.getBoundingClientRect());
43
      });
44

45
      // L: Last - 觸發變化
46
      isFlexLayout.value = !isFlexLayout.value;
47
      await nextTick(); // 等待 DOM 更新
48

49
      // 記錄最終位置並執行 FLIP
50
      itemRefs.value.forEach((el, id) => {
51
        const firstState = firstStates.get(id);
52
        const lastState = el.getBoundingClientRect();
53

54
        const deltaX = firstState.left - lastState.left;
55
        const deltaY = firstState.top - lastState.top;
56

57
        // I: Invert
58
        el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
59
        el.style.transition = 'none';
60

61
        // P: Play
62
        requestAnimationFrame(() => {
63
          el.style.transition = 'transform 0.3s ease-out';
64
          el.style.transform = 'none';
65
        });
66
      });
67
    };
68

69
    const toggleLayout = () => {
70
      performFLIP();
71
    };
72

73
    return {
74
      isFlexLayout,
75
      items,
76
      setItemRef,
77
      toggleLayout
78
    };
79
  }
80
}
81
</script>
82

83
<style>
84
.grid {
85
  display: grid;
86
  grid-template-columns: repeat(2, 1fr);
87
  gap: 10px;
88
  transition: all 0.3s ease;
89
}
90

91
.grid.flex-layout {
92
  display: flex;
93
  flex-direction: row;
94
}
95

96
.item {
97
  padding: 20px;
98
  background: linear-gradient(45deg, #42b883, #35495e);
99
  color: white;
100
  border-radius: 8px;
101
  text-align: center;
102
  font-weight: bold;
103
}
104
</style>

Vue Router 中的頁面轉場 FLIP#

1
<template>
2
  <div class="app">
3
    <nav>
4
      <router-link to="/page1" @click="prepareTransition">頁面 1</router-link>
5
      <router-link to="/page2" @click="prepareTransition">頁面 2</router-link>
6
    </nav>
7

8
    <transition
9
      name="page"
10
      mode="out-in"
11
      @before-enter="beforeEnter"
12
      @enter="enter"
13
      @leave="leave"
14
    >
15
      <router-view :key="$route.path" />
16
    </transition>
17
  </div>
18
</template>
19

20
<script>
21
export default {
22
  data() {
23
    return {
24
      transitionStates: new Map()
25
    }
26
  },
27
  methods: {
28
    prepareTransition() {
29
      // 記錄共享元素的位置
30
      const sharedElements = document.querySelectorAll('[data-shared-element]');
31
      sharedElements.forEach(el => {
32
        const id = el.dataset.sharedElement;
33
        this.transitionStates.set(id, el.getBoundingClientRect());
34
      });
35
    },
36

37
    beforeEnter(el) {
38
      // 準備進入動畫
39
      el.style.opacity = '0';
40
    },
41

42
    enter(el, done) {
43
      // 執行進入動畫
44
      el.offsetHeight; // 觸發重繪
45
      el.style.transition = 'opacity 0.3s ease';
46
      el.style.opacity = '1';
47

48
      // 處理共享元素 FLIP
49
      this.handleSharedElementsEnter(el);
50

51
      setTimeout(done, 300);
52
    },
53

54
    leave(el, done) {
55
      // 執行離開動畫
56
      el.style.transition = 'opacity 0.3s ease';
57
      el.style.opacity = '0';
58
      setTimeout(done, 300);
59
    },
60

61
    handleSharedElementsEnter(container) {
62
      const sharedElements = container.querySelectorAll('[data-shared-element]');
63

64
      sharedElements.forEach(el => {
65
        const id = el.dataset.sharedElement;
66
        const firstState = this.transitionStates.get(id);
67

68
        if (firstState) {
69
          const lastState = el.getBoundingClientRect();
70

71
          const deltaX = firstState.left - lastState.left;
72
          const deltaY = firstState.top - lastState.top;
73
          const scaleX = firstState.width / lastState.width;
74
          const scaleY = firstState.height / lastState.height;
75

76
          // FLIP 動畫
77
          el.style.transformOrigin = 'top left';
78
          el.style.transform = `translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`;
79

80
          requestAnimationFrame(() => {
81
            el.style.transition = 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
82
            el.style.transform = 'none';
83
          });
84
        }
85
      });
86
    }
87
  }
88
}
89
</script>
90

91
<style>
92
.page-enter-active,
93
.page-leave-active {
94
  transition: opacity 0.3s ease;
95
}
96

97
.page-enter-from,
98
.page-leave-to {
99
  opacity: 0;
100
}
101
</style>

Vue 自定義 FLIP Directive#

創建一個可重用的 FLIP 指令：

1
const flipDirective = {
2
  mounted(el, binding) {
3
    el._flipInstance = new FLIPAnimation();
4
  },
5

6
  updated(el, binding) {
7
    if (binding.value !== binding.oldValue) {
8
      // 觸發 FLIP 動畫
9
      el._flipInstance.flip(el, () => {
10
        // 變化已經發生，這裡不需要做什麼
11
      });
12
    }
13
  },
14

15
  unmounted(el) {
16
    if (el._flipInstance) {
17
      el._flipInstance = null;
18
    }
19
  }
20
};
21

22
// main.js
23
app.directive('flip', flipDirective);

使用自定義指令：

1
<template>
2
  <div class="container">
3
    <button @click="toggleClass">切換樣式</button>
4
    <div
5
      v-flip="hasSpecialClass"
6
      :class="{ 'special': hasSpecialClass }"
7
      class="box"
8
    >
9
      FLIP 動畫元素
10
    </div>
11
  </div>
12
</template>
13

14
<script>
15
export default {
16
  data() {
17
    return {
18
      hasSpecialClass: false
19
    }
20
  },
21
  methods: {
22
    toggleClass() {
23
      this.hasSpecialClass = !this.hasSpecialClass;
24
    }
25
  }
26
}
27
</script>

這些 Vue 整合範例展示了如何在 Vue 應用中充分利用 FLIP 技術，從簡單的列表動畫到複雜的頁面轉場，都能實現流暢的 60fps 動畫效果。

最佳實踐與注意事項#

1. 效能優化檢查清單#

✅ 使用正確的 CSS 屬性

1
// 好：只觸發 Composite
2
element.style.transform = 'translateX(100px)';
3
element.style.opacity = '0.5';
4

5
// 壞：觸發 Layout/Paint
6
element.style.left = '100px';
7
element.style.backgroundColor = 'red';

✅ 預先提示瀏覽器

1
// 動畫開始前
2
element.style.willChange = 'transform';
3

4
// 動畫結束後（重要！）
5
element.style.willChange = 'auto';

✅ 避免動畫期間修改 DOM

1
// 不要在動畫過程中做這些事
2
requestAnimationFrame(() => {
3
  element.style.transition = 'transform 300ms';
4
  element.style.transform = 'none';
5

6
  // ❌ 避免在這裡修改 DOM
7
  // document.body.appendChild(newElement);
8
});

2. 進階效能技巧#

使用 Web Animation API#

1
class ModernFLIP {
2
  flip(element, changeCallback, options = {}) {
3
    const firstState = element.getBoundingClientRect();
4

5
    changeCallback();
6

7
    const lastState = element.getBoundingClientRect();
8
    const deltaX = firstState.left - lastState.left;
9
    const deltaY = firstState.top - lastState.top;
10

11
    // 使用 Web Animation API 而非 CSS transition
12
    element.animate([
13
      { transform: `translate(${deltaX}px, ${deltaY}px)` },
14
      { transform: 'none' }
15
    ], {
16
      duration: options.duration || 300,
17
      easing: options.easing || 'ease-out',
18
      fill: 'both'
19
    });
20
  }
21
}

動畫中斷與恢復#

1
class InterruptibleFLIP {
2
  constructor() {
3
    this.currentAnimation = null;
4
  }
5

6
  flip(element, changeCallback, duration = 300) {
7
    // 中斷當前動畫
8
    if (this.currentAnimation) {
9
      this.currentAnimation.cancel();
10
    }
11

12
    const firstState = element.getBoundingClientRect();
13
    changeCallback();
14
    const lastState = element.getBoundingClientRect();
15

16
    const deltaX = firstState.left - lastState.left;
17
    const deltaY = firstState.top - lastState.top;
18

19
    this.currentAnimation = element.animate([
20
      { transform: `translate(${deltaX}px, ${deltaY}px)` },
21
      { transform: 'none' }
22
    ], { duration, easing: 'ease-out' });
23

24
    this.currentAnimation.addEventListener('finish', () => {
25
      this.currentAnimation = null;
26
    });
27
  }
28
}

3. 無障礙與用戶體驗#

1
// 尊重用戶的動畫偏好
2
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
3

4
class AccessibleFLIP {
5
  flip(element, changeCallback, duration = 300) {
6
    const actualDuration = prefersReducedMotion ? 0 : duration;
7

8
    if (actualDuration === 0) {
9
      // 直接切換，無動畫
10
      changeCallback();
11
      return;
12
    }
13

14
    // 正常 FLIP 動畫
15
    this.performFLIP(element, changeCallback, actualDuration);
16
  }
17
}
18

19
// 提供螢幕讀取器友好的狀態更新
20
element.setAttribute('aria-live', 'polite');
21
element.setAttribute('aria-label', '內容正在動畫中');

4. 錯誤處理與降級#

1
class RobustFLIP {
2
  flip(element, changeCallback, duration = 300) {
3
    try {
4
      const firstState = element.getBoundingClientRect();
5

6
      // 檢查元素是否可見
7
      if (firstState.width === 0 || firstState.height === 0) {
8
        console.warn('FLIP: 元素不可見，跳過動畫');
9
        changeCallback();
10
        return;
11
      }
12

13
      changeCallback();
14

15
      const lastState = element.getBoundingClientRect();
16
      const deltaX = firstState.left - lastState.left;
17
      const deltaY = firstState.top - lastState.top;
18

19
      // 檢查是否真的有位置變化
20
      if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1) {
21
        return; // 無需動畫
22
      }
23

24
      this.performAnimation(element, deltaX, deltaY, duration);
25

26
    } catch (error) {
27
      console.error('FLIP 動畫遇到錯誤:', error);
28
      // 降級到無動畫版本
29
      changeCallback();
30
    }
31
  }
32

33
  performAnimation(element, deltaX, deltaY, duration) {
34
    element.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
35

36
    requestAnimationFrame(() => {
37
      element.style.transition = `transform ${duration}ms ease-out`;
38
      element.style.transform = 'none';
39

40
      setTimeout(() => {
41
        element.style.transition = '';
42
      }, duration);
43
    });
44
  }
45
}