波浪進度指示器

靈感來自開發者頭條介紹的iOS版波浪進度加載指示器，用js仿寫了一個。

動畫演示 網頁演示

使用

• waveLoading.init(options) 初始化
• waveLoading.draw() 繪制動畫
• waveLoading.setProgress(num) 動畫執行過程中控制進度（0 ~ 100）

配置

所有選項在init()參數中配置：

• target 繪制目標，可以是canvas元素或者其選擇器，若不設置，會從文檔中選擇第一個canvas元素作為繪制目標
• speed 波浪運行速度倍率，默認為1
• color 全局主題顏色，默認為rgba(40, 230, 200, 1)
• alpha 全局透明度，默認為1
• lineWidth 圓形容器的邊框寬度，默認為1
• showText 是否顯示進度提示文字（百分比），默認不顯示
• textSize 進度提示文字的大小，默認16px
• textColor 進度提示文字的顏色，默認為主題色
• bgColor 文字被波浪動畫遮蓋時的顏色，默認為白色
• fontFamily 進度提示文字使用的字體，默認為Helvetica, Tahoma, Arial, STXihei, "華文細黑", "Microsoft YaHei", "微軟雅黑", sans-serif
• fontWeight 進度提示文字的字重，默認為lighter
• callback 進度完成后執行的回調函數

計劃中

• 進度改變時平滑移動，帶有緩沖效果，而不是現在的生硬上升
• 波浪平坦程度調節
• 前后波浪相位差調節
• 前后波浪速度差調節

項目地址： https://github.com/newraina/waveLoading.js