No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
README.md
index.js
package.json

README.md

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     图片对象

License

Licensed under MIT license.