Walkway用简单的方法为SVG元素添加动画效果


发布者 ourjs  发布时间 1415062444915
关键字 JS开源  开源 
注1* SVG由W3C制定的一个开放式标准,基于XML实现的用于描述二维矢量图形的图形格式。目前几乎所有主流浏览器均己支持。

注2* 这个库的作用是将SVG矢量图中的一些基本元素(目前仅支持路径Path和线Line)以线性动画的方式展示出来。 类似于PS4首页所展示的动画效果

如何使用


创建一个Walkway实例,传入一些参数对象。当你想开始动画的时侯调用 .draw 命令即可。提供一个可选的回调函数,当动画结束时调用。

// 创建一个实例
var svg = new Walkway(options);
// 开始绘制,回调函数可选
svg.draw(callback);

// 传入一个可选的目标SVG对象
var svg = new Walkway({ selector: '#test'});

// 改变默认参数
var svg = new Walkway({
  selector: '#test',
  duration: '2000',
  // can pass in a function or a string like 'easeOutQuint'
  easing: function (t) {
    return t * t;
  }
});

svg.draw();

// 如果你不想改变默认参数,你可以
// 通过一个选择字符串直接构造
var svg = new Walkway('#test');

svg.draw(function () {
  console.log('Animation finished');
});

参数


selector(必填) - 需要动画的父元素,通常是一个特定的svg元素。
duration - 动画运行时间,以毫秒为单位,默认400.
easing - 补间动画函数名。默认为"easeInOutCubic",你也可以提供自己的被音动画函数方程。

Easing


补间动画,目前支持的被音动画效果。


/*
 * Easing Functions - inspired from http://gizma.com/easing/
 * only considering the t value for the range [0, 1] => [0, 1]
 */
EasingFunctions = {
  // no easing, no acceleration
  linear: function (t) { return t },
  // accelerating from zero velocity
  easeInQuad: function (t) { return t*t },
  // decelerating to zero velocity
  easeOutQuad: function (t) { return t*(2-t) },
  // acceleration until halfway, then deceleration
  easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
  // accelerating from zero velocity 
  easeInCubic: function (t) { return t*t*t },
  // decelerating to zero velocity 
  easeOutCubic: function (t) { return (--t)*t*t+1 },
  // acceleration until halfway, then deceleration 
  easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 },
  // accelerating from zero velocity 
  easeInQuart: function (t) { return t*t*t*t },
  // decelerating to zero velocity 
  easeOutQuart: function (t) { return 1-(--t)*t*t*t },
  // acceleration until halfway, then deceleration
  easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t },
  // accelerating from zero velocity
  easeInQuint: function (t) { return t*t*t*t*t },
  // decelerating to zero velocity
  easeOutQuint: function (t) { return 1+(--t)*t*t*t*t },
  // acceleration until halfway, then deceleration 
  easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t }
}

将来计划


目前只支持path和line元素。以后会支持更多。

项目地址: https://github.com/ConnorAtherton/walkway