granim.js 是一個開源 JavaScript 庫，專門用于創(chuàng)建流暢和交互式的漸變動畫。這些動畫可以作為網頁的背景，也可以給其他元素添加漸變動畫，如按鈕或滑塊的視覺反饋。還可以為文字加上漸變效果，為用戶帶來視覺上的吸引力。

示例代碼

//?js?var?granimInstance?=?new?Granim({????element:?'#canvas-basic',????direction:?'diagonal',????isPausedWhenNotInView:?true,????states?:?{????????"default-state":?{????????????gradients:?[????????????????['#ff9966',?'#ff5e62'],????????????????['#00F260',?'#0575E6'],????????????????['#e1eec3',?'#f05053']????????????]????????}????}});

復雜漸變動畫

//?js
var?granimInstance?=?new?Granim({
????element:?'#canvas-complex',
????direction:?'left-right',
????isPausedWhenNotInView:?true,
????states?:?{
????????"default-state":?{
????????????gradients:?[
????????????????[
????????????????????{?color:?'#833ab4',?pos:?.2?},
????????????????????{?color:?'#fd1d1d',?pos:?.8?},
????????????????????{?color:?'#38ef7d',?pos:?1?}
????????????????],?[
????????????????????{?color:?'#40e0d0',?pos:?0?},
????????????????????{?color:?'#ff8c00',?pos:?.2?},
????????????????????{?color:?'#ff0080',?pos:?.75?}
????????????????],
????????????]
????????}
????}
});

帶圖像和混合模式的漸變動畫

//?js
var?granimInstance?=?new?Granim({
????element:?'#canvas-image-blending',
????direction:?'top-bottom',
????isPausedWhenNotInView:?true,
????image?:?{
????????source:?'../assets/img/bg-forest.jpg',
????????blendingMode:?'multiply'
????},
????states?:?{
????????"default-state":?{
????????????gradients:?[
????????????????['#29323c',?'#485563'],
????????????????['#FF6B6B',?'#556270'],
????????????????['#80d3fe',?'#7ea0c4'],
????????????????['#f0ab51',?'#eceba3']
????????????],
????????????transitionSpeed:?7000
????????}
????}
}

?API 介紹：

選項 (Options)

• element?(必需): 指定用于漸變動畫的 canvas 元素的 CSS 選擇器或 HTMLCanvasElement。
• name: 用于設置深色/淺色主題的類名前綴。
• elToSetClassOn: 設置深色/淺色類名的元素。
• direction: 漸變的方向，可選項包括 'diagonal'、'left-right'、'top-bottom'、'radial' 或 'custom'。
• customDirection: 自定義漸變方向的對象。
• isPausedWhenNotInView: 當動畫不在視窗內時是否暫停。
• scrollDebounceThreshold: 滾動時的防抖閾值。
• stateTransitionSpeed: 狀態(tài)轉換的動畫時長。
• defaultStateName: 默認狀態(tài)的名稱。
• states?(必需): 包含所有狀態(tài)的對象。

• image: 包含圖像選項的對象。

狀態(tài) (States)

• gradients?(必需): 定義漸變顏色和位置的數組。
• transitionSpeed: 每個漸變之間的過渡時長。
• loop: 動畫到達最后一個漸變后是否循環(huán)。

圖像 (Image)

• source?(必需): 圖像的源地址。
• position: 圖像在 canvas 中的位置。
• stretchMode: 圖像是否拉伸以適應大小。
• blendingMode: 圖像與漸變的混合模式。

回調函數 (Callbacks)

• onStart: 動畫開始時觸發(fā)。
• onGradientChange: 漸變變化時觸發(fā)。
• onEnd: 動畫結束時觸發(fā)。

事件 (Emitted Events)

• 監(jiān)聽關鍵事件，如 'granim:start'、'granim:end'、'granim:loop' 和 'granim:gradientChange'。

方法 (Methods)

• play(): 播放動畫。
• pause(): 暫停動畫。
• clear(): 停止動畫并清除漸變。
• changeState(stateName): 更改狀態(tài)。
• changeDirection(directionName): 更改方向。
• changeBlendingMode(blendingModeName): 更改混合模式。

• destroy(): 銷毀實例并移除事件監(jiān)聽器。

• 
  

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關注數據與安全，洞悉企業(yè)級服務市場：https://www.ijiandao.com/