網頁設計時常會遇到動畫展示的工程，一般CSS可以做到基礎動畫，但是如果需要多種動畫模式，或是連續型動畫，大部份網頁設計師還是會使用JAVASCRIPT套件。
前端網頁設計動畫套件anime easing介紹與範例 網頁動畫的順暢度與自然感受很大程度取決於 easing 函數的選擇。本文將深入介紹 Anime.js 中的 easing 函數，並透過實際範例展示各種效果。 Easing 函數基本概念 Easing 函數定義了動畫在執行過程中的加速和減速方式。它將線性的時間輸入轉換為非線性的位置輸出，使動畫更符合自然運動規律。Anime.js 提供了豐富的內建 easing 函數，大致可分為以下幾類： 1. 基礎曲線類型 linear: 線性變化，無加速度easeInOutSine: 正弦曲線，適合一般用途easeInOutQuad: 平方曲線，較為平滑的加減速easeInOutCubic: 立方曲線，明顯的加減速效果easeInOutQuart: 四次方曲線，更強烈的加減速easeInOutQuint: 五次方曲線，極強的加減速 2. 特殊效果曲線 easeInOutElastic: 彈性效果，帶有回彈easeInOutBack: 超出終點後回彈easeInOutBounce: 碰撞反彈效果 實際網頁設計應用範例 以下展示幾個常見場景的 easing 函數設計應用： 基本位移動畫 javascript anime({
targets: '.box',
translateX: 250,
duration: 1000,
easing: 'easeInOutQuad'
});
彈性選單展開 javascript anime({
targets: '.menu',
height: ['0px', '200px'],
duration: 800,
easing: 'easeOutElastic(1, .8)'
});
漸顯效果 javascript anime({
targets: '.fade-in',
opacity: [0, 1],
duration: 1200,
easing: 'easeInOutSine'
});
進階使用技巧 1. 自定義 Easing 函數 Anime.js 允許使用貝茲曲線定義自訂 easing： javascript anime({
targets: '.custom',
translateX: 250,
duration: 1000,
easing: 'cubicBezier(.5, .05, .1, .3)'
});
2. 串連多個動畫 可以為動畫序列中的每個階段設定不同的 easing： javascript anime.timeline()
.add({
targets: '.sequence',
translateX: 250,
duration: 1000,
easing: 'easeInQuad'
})
.add({
targets: '.sequence',
translateY: 50,
duration: 800,
easing: 'easeOutElastic(1, .8)'
});
效能考量與網頁設計最佳實踐 - 動畫性能優化
- 優先使用
transform 和 opacity 屬性 - 避免過於複雜的 easing 函數在低效能裝置上使用
- 為較短的動畫選擇簡單的 easing 函數
- 選擇適當的 Easing
- 介面元素移動：使用
easeInOutQuad 或 easeInOutCubic - 彈出效果：使用
easeOutElastic 或 easeOutBack - 自然下落：使用
easeInQuad 或 easeInCubic 網頁設計範例：各種動作展示 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anime.js Easing Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/2.2.2/mithril.min.js"></script>
<style>
* { box-sizing: border-box; }
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #333;
border-radius: 8px;
}
.boxes {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
width: 45%;
margin: .3em;
border-bottom: 1px dashed #fefefe;
padding-bottom: .5em;
}
.box {
width: 20px;
height: 20px;
background-color: #2f9e44;
border-radius: 3px;
display: inline-block;
margin: .3em;
opacity: 0;
}
.title {
color: #fefefe;
font-size: .875rem;
font-family: monospace;
margin: 0;
padding: 5px 0;
}
</style>
</head>
<body>
<div class="container" id="app"></div>
<script>
const INTERVAL = 300;
const TRANSLATE_X = 20;
function Boxes(vnode) {
const arr = [1, 2, 3, 4, 5];
const oncreate = _ => anime({
targets: vnode.dom.querySelectorAll('.box'),
translateX: arr.length * TRANSLATE_X,
opacity: 1,
loop: true,
easing: vnode.attrs.easing,
duration: (el, i) => i * INTERVAL + INTERVAL
});
const view = _ => m('.boxes',
m('h1.title', vnode.attrs.easing),
arr.map(_ => m('.box'))
);
return { view, oncreate };
}
function App() {
const eases = [
'easeInQuad',
'easeInCubic',
'easeInQuart',
'easeInQuint',
'easeInSine',
'easeInExpo',
'easeInCirc',
'easeInBack',
'easeInElastic',
'easeOutQuad',
'easeOutCubic',
'easeOutQuart',
'easeOutQuint',
'easeOutSine',
'easeOutExpo',
'easeOutCirc',
'easeOutBack',
'easeOutElastic',
'easeInOutQuad',
'easeInOutCubic',
'easeInOutQuart',
'easeInOutQuint',
'easeInOutSine',
'easeInOutExpo',
'easeInOutCirc',
'easeInOutBack',
'easeInOutElastic'
];
const view = _ => m('.easing-container',
eases.map(easing => m(Boxes, { easing }))
);
return { view };
}
m.mount(document.getElementById('app'), App);
</script>
</body>
</html>
選擇合適的 easing 函數對於創造自然、流暢的網頁動畫體驗至關重要。透過理解不同 easing 函數的特性，並在適當的網頁設計場景中運用，可以大幅提升使用者介面的互動品質。建議在開發過程中多加嘗試不同的 easing 函數，觀察效果並選擇最適合的方案。
|
