refactor(core): Fixed errors further

packages/basic/src/animations/color/discolorate.ts

@@ -0,0 +1,12 @@
+import { bind, changeProperty } from '@newcar/core'
+import type { Figure } from '../../widgets/figures/figure'
+
+/**
+ * Change the color.
+ */
+export const discolorate = changeProperty<Figure>(w => [
+  bind(w.style.fillColor, 'red'),
+  bind(w.style.fillColor, 'green'),
+  bind(w.style.fillColor, 'blue'),
+  bind(w.style.fillColor, 'alpha'),
+])

packages/basic/src/animations/create.ts → packages/basic/src/animations/creation/create.ts

@@ -4,4 +4,7 @@ import { changeProperty } from '@newcar/core'
  * Create animation
  * It makes the progress props of widgets from 0 to 1
  */
-export const create = changeProperty('progress', 0, 1)
+
+// TODO
+export const create = changeProperty(w => w.progress)
+  .withAttr({ from: 0, to: 1 })

packages/basic/src/animations/creation/destroy.ts

@@ -0,0 +1,9 @@
+import type { Widget } from '@newcar/core'
+import { changeProperty } from '@newcar/core'
+
+/**
+ * Destroy animation
+ * Which makes the progress from 1 to 0.
+ */
+export const destroy = changeProperty<Widget>(w => w.progress)
+  .withAttr({ from: 1, to: 0 })

packages/basic/src/animations/creation/stroke.ts

@@ -0,0 +1,9 @@
+import { useAnimate } from '@newcar/core'
+import type { Figure } from '../../widgets'
+/**
+ * Stroke animation
+ */
+export const stroke = useAnimate<Figure, { from: number, to: number }>((x) => {
+  x.widget.style.interval[0] = (x.from ?? 1000) * x.process
+  x.widget.style.interval[1] = (x.from ?? 1000) * (1 - x.process)
+})

packages/basic/src/animations/creation/write.ts

@@ -0,0 +1,10 @@
+import { useAnimate } from '@newcar/core'
+import type { Text } from '../../widgets'
+
+/**
+ * Write a Text object on screen.
+ */
+export const write = useAnimate<Text, Record<string, never>>((ctx) => {
+  ctx.widget.progress.value = ctx.process
+  ctx.widget.style.interval = [1000 * ctx.process, 1000 * (1 - ctx.process)]
+})

packages/basic/src/animations/fade/fadeIn.ts

@@ -0,0 +1,8 @@
+import type { Widget } from '@newcar/core'
+import { changeProperty } from '@newcar/core'
+
+/**
+ * Thw widget fades in
+ */
+export const fadeIn = changeProperty<Widget>(w => w.style.transparency)
+  .withAttr({ from: 0, to: 1 })

packages/basic/src/animations/fade/fadeOut.ts

@@ -0,0 +1,8 @@
+import type { Widget } from '@newcar/core'
+import { changeProperty } from '@newcar/core'
+
+/**
+ * The widget fades out
+ */
+export const fadeOut = changeProperty<Widget>(w => w.style.transparency)
+  .withAttr({ from: 1, to: 0 })

packages/basic/src/animations/index.ts

@@ -1,17 +1,11 @@
-export * from './move'
-export * from './create'
-export * from './destroy'
-export * from './fadeIn'
-export * from './fadeOut'
-export * from './roomIn'
-export * from './roomOut'
-export * from './rotate'
-export * from './scale'
-export * from './stroke'
-export * from './write'
-export * from './discolorate'
-export * from './focusOn'
-export * from './rippleOut'
-export * from './showPassingFlashAround'
-export * from './circleIndicate'
-export * from './showCreationThenDestructionAround'
+export * from './fade/fadeIn'
+export * from './fade/fadeOut'
+
+export * from './zoom/zoomIn'
+export * from './zoom/zoomOut'
+
+export * from './color/discolorate'
+
+export * from './movement/move'
+export * from './movement/rotate'
+export * from './movement/scale'

packages/basic/src/animations/indicate/circleIndicate.ts

@@ -0,0 +1,51 @@
+import { timeline, withHook } from '@newcar/core'
+import type { Figure } from '../../widgets'
+import { Circle } from '../../widgets'
+import { fadeIn, fadeOut, scale } from '../'
+
+/**
+ * Show a circle and then it hides
+ * Input a `scale` value, it will scale from around and ripple outward.
+ */
+export function circleIndicate() {
+  let circle: Circle
+  return withHook<Figure, { scale?: number }>({
+    animate() {
+      circle.show()
+    },
+
+    before({ widget, duration, scale: scaleV }) {
+      circle = new Circle(
+        Math.sqrt(((widget.singleRange[2] - widget.singleRange[0]) / 2) ** 2
+        + ((widget.singleRange[3] - widget.singleRange[1]) / 2) ** 2),
+        {
+          style: {
+            fill: false,
+            border: true,
+          },
+          x: (widget.singleRange[2] - widget.singleRange[0]) / 2,
+          y: (widget.singleRange[3] - widget.singleRange[1]) / 2,
+        },
+      )
+      circle.animate(fadeIn.withAttr({ duration: duration / 2 - duration / 6 }))
+      circle.animate(timeline(
+        [0, duration / 2 - duration / 6, fadeIn],
+        [duration / 2 + duration / 3, duration / 2 - duration / 6, fadeOut],
+      ))
+      if (scaleV) {
+        circle.animate(timeline(
+          [0, duration / 2 - duration / 6, scale.withAttr({
+            from: [scaleV, scaleV],
+            to: [1, 1],
+          })],
+          [duration / 2 + duration / 3, duration / 2 - duration / 6, scale.withAttr({
+            to: [scaleV, scaleV],
+            by: p => 1 - p,
+          })],
+        ))
+      }
+      circle.hide()
+      widget.add(circle)
+    },
+  })
+}

packages/basic/src/animations/movement/move.ts

@@ -0,0 +1,7 @@
+import type { Widget } from '@newcar/core'
+import { changeProperty } from '@newcar/core'
+
+/**
+ * Move a widget object, which change its `x` and `y` attribute.
+ */
+export const move = changeProperty<Widget>(w => [w.x, w.y])

packages/basic/src/animations/movement/rotate.ts

@@ -0,0 +1,7 @@
+import type { Widget } from '@newcar/core'
+import { changeProperty } from '@newcar/core'
+
+/**
+ * Rotate the widget
+ */
+export const rotate = changeProperty<Widget>(w => w.style.rotation)

packages/basic/src/animations/movement/scale.ts

@@ -0,0 +1,7 @@
+import type { Widget } from '@newcar/core'
+import { changeProperty } from '@newcar/core'
+
+/**
+ * Scale the widget
+ */
+export const scale = changeProperty<Widget>(w => [w.style.scaleX, w.style.scaleY])