tinyjs-plugin-effect
v0.1.1
Published
The common Tiny animation effects
Downloads
4
Readme
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