Flowflower · 表情风暴组件

批量让物体自然掉落，每个sprite会被缓存优化

用法

var flowers = {
  assets: {
    great: './images/emoji/great.png',
    heart: './images/emoji/heart.png',
    kiss: './images/emoji/kiss.png',
    smile: './images/emoji/smile.png',
    star: './images/emoji/star.png',
  },
  begin: {
    x: 0,
    y: -160,
    width: 640,
    height: 200
  },
  end: {
    x: 0,
    y: 780,
    width: 640,
    height: 20
  },
};
var w = 800;
var h = 900;
var flyflower = new JC.Flowflower({
  stage: {
    dom: 'flyflower-stage',
    width: w,
    height: h,
  },
  flowers: flowers,
});
flyflower.start();
document.onclick = function() {
  flyflower.fallFlowers({
    flowers: [ 'great', 'heart', 'kiss', 'smile', 'star' ],
    flux: 20,
  });
}

view-demo

完整配置

Flowflower组件配置

| 属性 | 值类型 | 描述 | | -------------------- | --------------------------- | ---------------------------------------- | | stage | required : object类型 | 场景的配置 | | stage.dom | required : string类型 | 传递给canvas标签的样式 | | [stage.width] | optional : number类型 | canvas的画板宽，默认 320px | | [stage.height] | optional : number类型 | canvas的画板高，默认 320px | | [stage.resolution] | optional : number类型 | canvas的分辨率，默认 1 | | flowers | required : object类型 | 掉落物体的资源配置和位置配置 | | flowers.assets | required : number类型 | 掉落物体的资源图片 | | flowers.begin | required : number类型 | 掉落物体的起始位置 | | flowers.end | required : number类型 | 掉落物体的结束位置 |

方法调用

flyflower({
  flowers: [ 'great', 'heart', 'kiss', 'smile', 'star' ],
  flux: 20,
  begin: { x, y, ... }, // 可选配置 起始区域，会覆盖实例化时的该配置
  end: { x, y, ... }, // 可选配置 结束区域，会覆盖实例化时的该配置
});