GitHub - gafish/svg-expression.js: 以表情变化的趣味方式展示百分比进度

Expression.js

现在开始

Expression.js 是一个轻量级，遵循MIT协议的开源组件，支持包括 IE9+ 的主流浏览器。

获取代码:

bower
```
bower install expression.js
```
从最新版本中获取 dist/expression.js 或 dist/expression.min.js 。

初始化组件

CommonJS

var Expression = require('expression.js')
var line = new Expression.Circle('#container');

AMD

require.config({
    paths: {"expression": "../bower_components/expression.js/dist/expression"}
});

define(['expression'], function(Expression) {
    var line = new Expression.Circle('#container');
});

Global variable

// If you aren't using any module loader, expression.js exposes
// global variable: window.Expression
var line = new Expression.Circle('#container');

API

Circle(container, [options])
- trail
- animate(progress)
Square(container, [options])
- trail
- animate(progress)

Circle(container, [options])

圆形表情，加载SVG到container容器中

代码示例

var expression = new Expression.Circle('#container', {
    strokeWidth: 2
});

将圆的大小设置跟容器一致, 参考下面的 CSS:

#container > svg {
    display: block;
    width: 100%;
}

参数

container 添加SVG的容器，可选值：Query string || element.

示例 "#container" || document.getElementById("#container")

options 路径绘制选项

{
    // 描边颜色
    // Default: "#555"
    color: "#3a3a3a",

    // 描边宽度
    // Default: 1.0
    strokeWidth: 0.1,

    // 进度条颜色，如果为null，进度条不会绘制
    // Default: null
    trailColor: "#f4f4f4",

    // 填充形状的颜色，如果为null则不填充.
    // Default: null
    fill: "rgba(0, 0, 0, 0.5)",

    // 动画持续时间，单位：毫秒
    // Default: 800
    duration: 1200,

    // 缓动函数
    // Default: "linear"
    easing: "easeIn",

}

Circle.svg

引用绘制好的 SVG 元素

Circle.path

引用进度条的 SVG path

Circle.trail

引用进度条轨迹的 SVG path trail未定义则返回null

Circle.animate(progress)

绘制圆形表情的动画

Example

expression.animate(0.3);

Parameters

progress 从 0 到 1 的进度

Square(container, [options])