Setup Syntax

Have you ever felt that using Newcar to create animations is too cumbersome? After version 1.0.0-beta, we added the setup syntax to give users more flexibility.

Generator Function

First, we need to call the Widget.setup() method and pass in a generator function, which will be the entry point for your logical code. The first parameter is the Widget instance.

import * as nc from 'newcar'

new Widget({
  x: 100,
  y: 100
}).setup(function* (widget) {
  console.log(widget.x, widget.y)
  // Output: 100 100
})

Waiting

When we want to pause the animation for a few seconds, milliseconds, or frames, we can use the yield keyword to return a number.

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
})

Animation

How do we insert animations? Just yield what you want to animate

import * as nc from 'newcar'

new Widget({
  x: 100,
  y: 100
}).setup(function* (widget) {
  yield 1
  yield nc.create().withAttr({ duration: 1 })
})

This code will execute the create animation after 1 second.