Setup 语法
你有没有觉得使用Newcar来创建动画太麻烦了? 在1.0.0-beta版本之后, 我们添加了Setup语法, 使用户可以更加灵活的创建组件。
生成器函数
首先, 我们需要调用 Widget.setup()
方法并传入一个 生成器函数, 这将是逻辑代码的入口点。第一个参数是 组件
实例.
ts
import * as nc from 'newcar'
new Widget({
x: 100,
y: 100
}).setup(function* (widget) {
console.log(widget.x, widget.y)
// Output: 100 100
})
暂停
当我们想要将动画暂停几秒、 几毫秒或几帧时, 我们可以使用 yield
关键字。
ts
import * as nc from 'newcar'
new Widget({
x: 100,
y: 100
}).setup(function* (widget) {
yield 1 // Wait for 1 second
widget.x = 100
yield 3 // Wait for 3 seconds
widget.x = 200
})
动画
我们如何插入动画? 只需在 yield
关键字后面写上需要的动画。
ts
import * as nc from 'newcar'
new Widget({
x: 100,
y: 100
}).setup(function* (widget) {
yield 1
yield nc.create().withAttr({ duration: 1 })
})
这段代码将在1秒后执行 create
动画。