tinyjs-plugin-effect v0.1.1

tinyjs-plugin-effect

Tiny 中常用的一些动画效果

查看demo

http://tinyjs.alibaba.net/plugins/tinyjs-plugin-effect.html#demo

引用方法

• 推荐作为依赖使用

  • npm install tinyjs-plugin-effect --save

• 也可以直接引用线上cdn地址，注意要使用最新的版本号，例如：

  • https://gw.alipayobjects.com/os/lib/tinyjs-plugin-effect/0.1.0/index.js
  • https://gw.alipayobjects.com/os/lib/tinyjs-plugin-effect/0.1.0/index.debug.js

起步

引入，推荐NPM方式，当然你也可以使用CDN或下载独立版本

最简单的例子

引用 Tiny.js 源码

<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.5.1/tiny.js"></script>

import * as effect from 'tinyjs-plugin-effect';

// 新建App
const app = new Tiny.Application({
  showFPS: true,
  dpi: 2,
  referWidth: 375,
  renderType: 1,
  renderOptions: {
    backgroundColor: 0x000000
  }
});

// 主场景
class MainLayer extends Tiny.Container {
  constructor() {
    super();
    this.sprite = new Tiny.Sprite(Tiny.TextureCache['bubble']);
    this.sprite.setPosition(Tiny.WIN_SIZE.width / 2, Tiny.WIN_SIZE.height / 2);
    this.sprite.setAnchor(0.5, 0.5);
    this.addChild(this.sprite);

    this.floatingFn = effect.floating({
      floatingObj: this.sprite
    });
    app.onUpdate(this.floatingFn);

    this.bindEvent();
  }
  bindEvent() {
    this.sprite.setEventEnabled(true);
    this.sprite.on('pointertap', () => {
      app.offUpdate(this.floatingFn);
    });
  }
}

const loader = new Tiny.loaders.Loader();
loader.add('bubble', '../images/bubble.png');

loader.load(() => {
  app.run(new MainLayer());
});

依赖

• Tiny.js: Link

API文档

http://tinyjs.alibaba.net/plugins/tinyjs-plugin-effect.html#docs