插件 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', () => {});

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了