阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Lazy Line Painter 中文API文档

      插件 jQuery.Lazy Line Painter 中文API文档

      源码 & 下载

      Lazy Line Painter - 用于SVG路径动画的现代JS库

      组态

      配置初始化

      在初始化时,您可以将lazylinepainter传递给配置对象,作为包含您希望在整个svg中更改的attritubes的参数。

      所有配置属性都是可选的。

      配置中设置的样式属性将覆盖css样式。

      let config = {
      
      	// style properties
      	'strokeWidth'     // Adjust width of stroke
      	'strokeColor'     // Adjust stroke color
      	'strokeCap'       // Adjust stroke cap  - butt  | round | square
      	'strokeJoin'      // Adjust stroke join - miter | round | bevel
      	'strokeOpacity'   // Adjust stroke opacity 0 - 1
      	'strokeDash'      // Adjust stroke dash - '5, 5'
      
      	// animation properties
      	'delay'           // Delay before animation starts
      	'reverse'         // reverse playback
      	'ease'            // penner easing - easeExpoOut / easeExpoInOut / easeExpoIn etc
      	'repeat'          // number of additional plays, -1 for loop
      }
      
      let svg = document.querySelector('#my-svg') 
      let myAnimation = new LazyLinePainter(svg, config)
      

      配置各个路径

      数据属性可用于在SVG中的各个路径上配置样式和动画属性。 数据属性将覆盖css样式和初始化配置样式属性。

      <path
      	// style attribues
      	data-llp-stroke-width
      	data-llp-stroke-color
      	data-llp-stroke-opacity
      	data-llp-stroke-cap
      	data-llp-stroke-join 
      	data-llp-stroke-dash
      
      	// animation attribues
      	data-llp-duration (ms)
      	data-llp-delay (ms) // delay offset from start of timeline
      	data-llp-reverse (default = false)
      	data-llp-ease (default = 'easeLinear')
      />
      

      API参考

      方法

      Paint - 接受可选的播放参数 - 反向,缓动,延迟

      myAnimation.paint( { 
      	reverse : true, 
      	ease : 'easeExpoOut' 
      });
      

      擦除 - 在擦除后仍可在元素上调用paint;

      myAnimation.erase();
      

      暂停

      myAnimation.pause();
      

      恢复

      myAnimation.resume();
      

      设置 - 初始化后设置选项

      // progress - sets path position, second param accepts a number between 0 - 1
      myAnimation.set('progress', value);
      

      获取 - 返回所有lazylinepainter数据;

      
      myAnimation.get();
      
      

      **毁灭 **- 破坏svg&lazyline实例

      myAnimation.destroy();
      

      Events

      Handle events across entire animation

      myAnimation.on('start', () => {});
      myAnimation.on('update', () => {});
      myAnimation.on('complete', () => {});
      

      Handle all events

      Called for each shape animated within the svg. event argument contains shape properties.

      myAnimation.on('start:all', (event) => {});
      myAnimation.on('update:all', (event) => { console.log(event.progress); // [0-1] });
      myAnimation.on('complete:all', (event) => {});
      

      Handle targeted events.

      Listen to events on specific shapes by adding the shape-id after the colon. event argument contains shape properties.

      myAnimation.on('start:id', (event) => {});
      myAnimation.on('update:id', (event) => {});
      myAnimation.on('complete:id', (event) => {});
      

      Timeline playback events

      myAnimation.on('pause', () => {});
      myAnimation.on('resume', () => {});
      myAnimation.on('erase', () => {});
      
      目录
      目录