-
-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Steven Xiang <wgxh-cli@users.noreply.github.com>
- Loading branch information
1 parent
f44c584
commit 0385757
Showing
17 changed files
with
216 additions
and
186 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,56 @@ | ||
| import { defineAnimation } from '@newcar/core' | ||
| import { depend, sequence, withHook } from '@newcar/core' | ||
| import type { Widget } from '@newcar/core' | ||
| import { Color } from '@newcar/utils' | ||
| import { Circle } from '../widgets' | ||
| import { scale } from './scale' | ||
| import { Circle } from '../../widgets' | ||
| import { scale } from '../../' | ||
|
|
||
| /** | ||
| * Create a circle ripple from the center. | ||
| * Input a `origin` to set the most ended radius of the circle. | ||
| */ | ||
| export const rippleOut = defineAnimation({ | ||
| act(_widget, _elapsed, _process, _duration, _ck, _params) {}, | ||
| // eslint-disable-next-line antfu/top-level-function | ||
| export const rippleOut = () => { | ||
| return withHook<Widget, { origin?: number, color?: Color, transparency?: number }>({ | ||
| animate() { }, | ||
|
|
||
| init(widget, startAt, duration, _ck, params) { | ||
| widget.add( | ||
| new Circle(params.origin ?? 1000, { | ||
| before({ widget, duration, origin, color, transparency, by }) { | ||
| new Circle(origin ?? 1000, { | ||
| style: { | ||
| fillColor: params.color ?? Color.WHITE, | ||
| transparency: params.transparency ?? 0.3, | ||
| fillColor: color ?? Color.WHITE, | ||
| transparency: transparency ?? 0.3, | ||
| }, | ||
| }).animate(scale, startAt, duration, { | ||
| from: [0, 0], | ||
| to: [1, 1], | ||
| by: params.by ?? ((x: number) => x), | ||
| }).hide(), | ||
| ) | ||
| }, | ||
| }) | ||
| }).animate(sequence( | ||
| scale.withAttr({ | ||
| from: [1, 1], | ||
| to: [0, 0], | ||
| by: by ?? ((x: number) => x), | ||
| duration, | ||
| }), | ||
| depend(c => () => { | ||
| c.widget.display.value = false | ||
| return true | ||
| }), | ||
| )) | ||
|
|
||
| widget.add( | ||
| new Circle(origin ?? 1000, { | ||
| style: { | ||
| fillColor: color ?? Color.WHITE, | ||
| transparency: transparency ?? 0.3, | ||
| }, | ||
| }).animate(sequence( | ||
| scale.withAttr({ | ||
| from: [0, 0], | ||
| to: [1, 1], | ||
| by: by ?? ((x: number) => x), | ||
| duration, | ||
| }), | ||
| depend(c => () => { | ||
| c.widget.display.value = false | ||
| return true | ||
| }), | ||
| )), | ||
| ) | ||
| }, | ||
| }) | ||
| } |
75 changes: 39 additions & 36 deletions
75
packages/basic/src/animations/indicate/showCreationThenDestructionAround.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,47 @@ | ||
| import { defineAnimation } from '@newcar/core' | ||
| import { withHook } from '@newcar/core' | ||
| import { Color } from '@newcar/utils' | ||
| import type { Figure } from '../widgets' | ||
| import { Rect } from '../widgets' | ||
| import type { Figure } from '../../widgets' | ||
| import { Rect } from '../../widgets' | ||
|
|
||
| /** | ||
| * Create a rectangle that grows and shrinks around the center of the widget | ||
| * and then destroys itself. | ||
| */ | ||
| export const showCreationThenDestructionAround = defineAnimation<Figure>({ | ||
| act(_widget, _elapsed, process, _duration, _ck, _params) { | ||
| this.rect.show() | ||
| if (process < 0.5) { | ||
| this.rect.style.interval = [this.c * process * 2, this.c - this.c * process * 2] | ||
| } | ||
| else if (process > 0.5) { | ||
| this.rect.style.interval = [this.c * (1 - process) * 2, this.c - this.c * (1 - process) * 2] | ||
| } | ||
| }, | ||
| // eslint-disable-next-line antfu/top-level-function | ||
| export const showCreationThenDestructionAround = () => { | ||
| let rect: Rect | ||
| let c: number | ||
|
|
||
| init(widget, _startAt, _duration, _ck, params: { | ||
| color: Color | ||
| width: number | ||
| }) { | ||
| this.rect = new Rect(Math.abs(widget.range[2] - widget.range[0]) + 20, Math.abs(widget.range[3] - widget.range[1]) + 20, { | ||
| x: widget.coordinateParentToChild(widget.range[0], widget.range[1]).x - 10, | ||
| y: widget.coordinateParentToChild(widget.range[0], widget.range[1]).y - 10, | ||
| style: { | ||
| fill: false, | ||
| border: true, | ||
| borderColor: params.color ?? Color.WHITE, | ||
| borderWidth: params.width ?? 2, | ||
| }, | ||
| }) | ||
| this.c = Math.abs(widget.range[2] - widget.range[0] + 10) * 2 | ||
| + Math.abs(widget.range[3] - widget.range[1] + 10) * 2 | ||
| this.rect.hide() | ||
| widget.add(this.rect) | ||
| }, | ||
| return withHook<Figure, { color?: Color, width?: number }>({ | ||
| animate({ process }) { | ||
| rect.show() | ||
| if (process < 0.5) { | ||
| rect.style.interval.value = [c * process * 2, c - c * process * 2] | ||
| } | ||
| else if (process > 0.5) { | ||
| rect.style.interval.value = [c * (1 - process) * 2, c - c * (1 - process) * 2] | ||
| } | ||
| }, | ||
|
|
||
| after(_widget, _elapsed, _ck, _params) { | ||
| this.rect.kill() | ||
| }, | ||
| }) | ||
| before({ widget, color, width }) { | ||
| rect = new Rect(Math.abs(widget.range[2] - widget.range[0]) + 20, Math.abs(widget.range[3] - widget.range[1]) + 20, { | ||
| x: widget.coordinateParentToChild(widget.range[0], widget.range[1]).x - 10, | ||
| y: widget.coordinateParentToChild(widget.range[0], widget.range[1]).y - 10, | ||
| style: { | ||
| fill: false, | ||
| border: true, | ||
| borderColor: color ?? Color.WHITE, | ||
| borderWidth: width ?? 2, | ||
| }, | ||
| }) | ||
| c = Math.abs(widget.range[2] - widget.range[0] + 10) * 2 | ||
| + Math.abs(widget.range[3] - widget.range[1] + 10) * 2 | ||
| rect.hide() | ||
| widget.add(rect) | ||
| }, | ||
|
|
||
| after() { | ||
| rect.remove() | ||
| }, | ||
| }) | ||
| } |
83 changes: 44 additions & 39 deletions
83
packages/basic/src/animations/indicate/showPassingFlashAround.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,47 @@ | ||
| import { defineAnimation } from '@newcar/core' | ||
| import { Color } from '@newcar/utils' | ||
| import { Rect } from '../widgets' | ||
| // import { withHook } from '@newcar/core' | ||
| // import { Color } from '@newcar/utils' | ||
| // import type { Widget } from '@newcar/core' | ||
| // import { Rect } from '../../widgets' | ||
|
|
||
| /** | ||
| * Show a line which pass around the widget. | ||
| */ | ||
| export const showPassingFlashAround = defineAnimation({ | ||
| act(_widget, _elapsed, process, _duration, _ck, params) { | ||
| this.rect.show() | ||
| process = params.by ? params.by(process) : process | ||
| this.rect.style.offset = this.c * process | ||
| if (process < 0.5) | ||
| this.rect.style.interval = [100 * process * 2, this.c - 100 * process * 2] | ||
| else if (process > 0.5) | ||
| this.rect.style.interval = [100 * (1 - process) * 2, this.c - 100 * (1 - process) * 2] | ||
| }, | ||
| // /** | ||
| // * Show a line which pass around the widget. | ||
| // */ | ||
| // export function showPassingFlashAround() { | ||
| // let rect: Rect | ||
| // let c: number | ||
| // return withHook<Widget, {}>({ | ||
| // animate({ by, process }) { | ||
| // rect.show() | ||
| // process = by ? by(process) : process | ||
| // rect.style.offset.value = c * process | ||
| // if (process < 0.5) | ||
| // rect.style.interval = [100 * process * 2, this.c - 100 * process * 2] | ||
| // else if (process > 0.5) | ||
| // this.rect.style.interval = [100 * (1 - process) * 2, this.c - 100 * (1 - process) * 2] | ||
| // }, | ||
|
|
||
| init(widget, _startAt, _duration, _ck, params: { | ||
| color: Color | ||
| width: number | ||
| }) { | ||
| this.rect = new Rect(widget.singleRange[2] - widget.singleRange[0] + 20, widget.singleRange[3] - widget.singleRange[1] + 20, { | ||
| x: -10, | ||
| y: -10, | ||
| style: { | ||
| fill: false, | ||
| border: true, | ||
| borderColor: params.color ?? Color.WHITE, | ||
| borderWidth: params.width ?? 2, | ||
| }, | ||
| }) | ||
| this.c = Math.abs(widget.singleRange[2] - widget.singleRange[0] + 10) * 2 | ||
| + Math.abs(widget.singleRange[3] - widget.singleRange[1] + 10) * 2 | ||
| widget.add(this.rect) | ||
| this.rect.hide() | ||
| }, | ||
| // init(widget, _startAt, _duration, _ck, params: { | ||
| // color: Color | ||
| // width: number | ||
| // }) { | ||
| // this.rect = new Rect(widget.singleRange[2] - widget.singleRange[0] + 20, widget.singleRange[3] - widget.singleRange[1] + 20, { | ||
| // x: -10, | ||
| // y: -10, | ||
| // style: { | ||
| // fill: false, | ||
| // border: true, | ||
| // borderColor: params.color ?? Color.WHITE, | ||
| // borderWidth: params.width ?? 2, | ||
| // }, | ||
| // }) | ||
| // this.c = Math.abs(widget.singleRange[2] - widget.singleRange[0] + 10) * 2 | ||
| // + Math.abs(widget.singleRange[3] - widget.singleRange[1] + 10) * 2 | ||
| // widget.add(this.rect) | ||
| // this.rect.hide() | ||
| // }, | ||
|
|
||
| after(_widget, _elapsed, _ck, _params) { | ||
| this.rect.kill() | ||
| }, | ||
| }) | ||
| // after(_widget, _elapsed, _ck, _params) { | ||
| // this.rect.kill() | ||
| // }, | ||
| // }) | ||
| // } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.