The like-heart from fe4han

like-heart's Introduction

Canvas点赞送心组件

特性

配置项多，定制化强
基于canvas效果，性能更强
使用简单方便

示例

使用方法

    let img = new Image();
    img.src = './img/like0'+Math.ceil(Math.random()*3)+'.png';


    let p1 = {
        x: 100 + getRandomDis(),
        y: 300 + getRandomDis()
    };

    let p2 = {
        x: 100 + getRandomDis(),
        y: 200 + getRandomDis()
    };

    new LikeHeart({
        id: heartCount,
        x: 200,
        y: 200,
        endX: 200,
        endY: 200,
        onFadeOut: removeItem,

        width: 66,
        height: 66,
        image: img,
        bezierPoint: {
            p0: {
                x: 200,
                y: 200
            },

            p1: p1,
            p2: p2,
            p3: {
                x: 200,
                y: 200
            }
        }
    });

配置说明

参数	类型	描述	必需	默认值
object.x	number	心起点位置x	是
object.y	number	心起点位置y	是
object.endX	number	心结束位置x	是
object.endY	number	心结束位置x	是
object.height	number	高	是
object.width	number	宽	是
object.angelEnd	number	左右摇摆起始角度	否	-20
object.angelBegin	number	左右摇摆结束角度	否	20
object.noScale	bool	是否使用缩放心动画	否
object.scaleDis	number	缩放心临界值(默认从起始位置到升高50)	否	50
object.noFadeOut	bool	是否使用fadeOut	否
object.opacityDis	number	缩放心临界值(默认从起始位置到升高50)	否	50
object.speed	number	上升速度	否	0.023
object.bezierPoint	number	贝塞尔曲线4个点的值	是
object.onFadeOut	function	每个心fadeOut之后回调	否
object.image	obj	图片对象	是