feat: antiAlias and transparency

dromara · Jun 4, 2024 · 7702927 · 7702927
1 parent fbbf89a
commit 7702927
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git a/examples/main.ts b/examples/main.ts
@@ -81,18 +81,14 @@ const {
 
 const app = createApp(document.querySelector('#milestone'))
 
-const circle = use(nc.createPolygon([
-  [0, 0],
-  [100, 100],
-  [200, 300]
-], {
+const circle = use(nc.createCircle(300, {
   x: 0,
   y: 0,
 }))
 circle.animate(nc.move(100, 100)(120))
 
 const scene = nc.createScene(
-  use(nc.createArrow([0, 0], [100, 100]))
+  circle
 )
 
 app.checkout(scene)

diff --git a/packages/basic/src/animations/move.ts b/packages/basic/src/animations/move.ts
@@ -2,8 +2,8 @@ import type { Base } from '@newcar/core'
 import { withProcess } from '@newcar/core'
 
 export function move(x: number, y: number) {
-  return withProcess<Base>((ctx, process) => {
-    ctx.widget.x.value = process * x
-    ctx.widget.y.value = process * y
+  return withProcess<Base>((ctx, process, origin) => {
+    ctx.widget.x.value = origin.x.value += process * (x - origin.x.value)
+    ctx.widget.y.value = origin.y.value += process * (y - origin.y.value)
   })
 }
diff --git a/packages/basic/src/widgets/figure.ts b/packages/basic/src/widgets/figure.ts
@@ -65,10 +65,15 @@ export function createFigure(options?: FigureOptions) {
       style.interval.value,
       style.offset.value,
     ))
+    strokePaint.setAntiAlias(style.antiAlias.value)
+    strokePaint.setAlphaf(style.transparency.value * style.borderColor.value.alpha)
+
     fillPaint.setColor(style.fillColor.value.toFloat4())
     if (style.shader.value || style.fillShader.value)
       fillPaint.setShader(style.fillShader.value.toCanvasKitShader(ck))
     fillPaint.setStyle(ck.PaintStyle.Fill)
+    fillPaint.setAntiAlias(style.antiAlias.value)
+    fillPaint.setAlphaf(style.transparency.value * style.fillColor.value.alpha)
 
     changed(style.antiAlias, (v) => {
       strokePaint.setAntiAlias(v.value)
@@ -111,6 +116,14 @@ export function createFigure(options?: FigureOptions) {
         v.value,
       ))
     })
+    changed(style.transparency, (v) => {
+      strokePaint.setAlphaf(v.value * style.borderColor.value.alpha)
+      fillPaint.setAlphaf(v.value * style.fillColor.value.alpha)
+    })
+    changed(style.antiAlias, (v) => {
+      strokePaint.setAntiAlias(v.value)
+      fillPaint.setAntiAlias(v.value)
+    })
 
     return deepMerge(base, { style, strokePaint, fillPaint })
   })

diff --git a/packages/core/src/animation.ts b/packages/core/src/animation.ts
@@ -110,7 +110,7 @@ export function reverse(func: TimingFunction): TimingFunction {
 }
 
 export function withProcess<T extends Widget>(
-  actor: ((ctx: AnimationContext<T>, process: number) => void) | {
+  actor: ((ctx: AnimationContext<T>, process: number, origin: T) => void) | {
     init?: Animate<T>['init']
     animate: (ctx: AnimationContext<T>, process: number) => void
     after?: Animate<T>['after']
@@ -119,10 +119,12 @@ export function withProcess<T extends Widget>(
   const act = typeof actor === 'function' ? actor : actor.animate
   return (duration: number, by?: TimingFunction) => {
     let startAt = 0
+    let origin: T
     by ??= linear
     return defineAnimate<T>({
       init: (context) => {
         startAt = context.elapsed
+        origin = context.widget
         if (typeof actor !== 'function' && actor.init) {
           actor.init(context)
         }
@@ -132,7 +134,7 @@ export function withProcess<T extends Widget>(
           return true
 
         const process = by((context.elapsed - startAt) / duration)
-        act(context, process)
+        act(context, process, origin)
         return false
       },
       after: (ctx) => {