我正在做个数学学习的项目，数学动画唯一的选择是manie，现在多了一个。

希望不停发展。

Description

The LaTex function for @newcar/mod-math

API

Example:

new Tex('latex content...', {
  style: {
    h1Size: 100,
    ...
  }
})

way: use texsvg packages, and use other packages transform it into path, and extends from Path and run AddPathFromSVGtring.

Gain

50CNY

As you can see, in ./packages/core/src/config.ts, we have reserved a optional argument named unit, user can set it to 'frame' | 's' | 'ms', please implement the s and ms unit.

note

Don't touch Widget, just let the elapsed's unit changed

Features

// The call of `tree` creates a builder instance for animation chaining
tree(create, { duration: 1 })
  // `and` means play in `async` mode
  .and(move, { start: 1, duration: 1, to: [400, 400] })
  // `then` means play in 'sync' mode
  .then(scale, { duration: 2, to: [2, 2] })
  .and(fadeOut, { duration: 2 })
  .build(widget)

Can this be added?

In most of case, you can use changeProperty API to custom your attributes animation, but in recent using, i find many bug and unexpected points.

Bugs

If you use move animation and only provide a parameter to (like following codes, and the origin of move are also changeProperty without from and to), the animation will be loaded no longer correct, the time will get into wrong.

circle.animate(move, 0, 30, {
  to: [400, 400] // The animation will loaded wrong duration but it will not throw any error
})

Features

Usage

changeProperty('style.xxx', 0, 100)
changeProperty(['from[0]', 'to[0]'], [111, 222], [222, 333])
changeProperty(['style.attr1', 'attr2'], [0, 0], [100, 100])

Usage On Widget

circle.animate(changeProperty<Circle>(['x', 'style.x']), 0, 30, {
  to: [100, 200] // You can doesn't provide the parameter `from`, but if you want, that is allowed ^_^
})

And if changeProperty support like style.xxx grammar, changeStyle is no longer needed.

Who can implement this issue? Please comment under this issue and I'll assign to you to finish this work.

export const scene3 = new nc.Scene(
  new nc.Arrow([50, 350], [350, 50])
    .animate(nc.create, 0, 30)
    .on(nc.click, (w, x, y) => {
      console.log(w, x, y)
    })
)

No matter what browser I use, it will get stucked always, and it just happed in the Widget.on was be called

Gain

50CNY

Hey there!
Imagine the such a situation: You want to make a video about math or something else, with a progress bar, a sidebar, a navbar, and, for example, something always visible while playing video.

Imagine another similar situation: You want to animate your website, but, of course, there will be complex hierarchy in your document. To do so, you need travel through them with your head hurt badly to solve this.

I'd prefer this:

// just for example here
// let's suppose we have a string decorator `skeleton` which create a template from a HTML-ish string.
// Context are nothing special but a obtainable object around, it may be, for example, stored in some widget.
skeleton`
  <div class="root">
    <ProgressBar value=${ctx.progress} />
    <style>
      ProgressBar { position: bottom; /* just a example */ width: 100%; height: 40px;  }
    </style>
    <div class="content">${/* Maybe filled in with parameters or context */}</div>
  </div>
`

Animation could be also implemented this way but need further discussion.

The example above threw the following problems immediately:

1. The performance of this so-called skeleton function. That's what we actually cares in most situations. I'd like this function to perform at compile time, but this implies more complex works
2. The features of this functions. We'd like this function to help us animate and construct our document's structure, but can this be simple to code? that is, what does this function actually do for us to simplify our programming?
3. The difficulty of maintaining this feature.

Maybe we shall have further discussion on this issue. And BTW, I'm glad to help you develop, no matter we made the agreement on this issue!

Unit system cannot hold without a precise definition of fps, otherwise, one shall be confused with how many frames to advance within a so-called "unit".

We define many interfaces in ./mods/mod-svg, please write a function, which can parse svg string to a svg tree (SVGItem[])

The entry type is defined in https://github.com/dromara/newcar/blob/main/mods/mod-svg/src/elements/index.ts, please recognize the type and tag attribute of a SVGItem

please write it in mods\mod-svg\src\transform.ts, the function name is transform

If you are interested in this issue and have ability to implement it, please comment under the issue.

Example

const tree = transform('<circle cx="50" cy="50" r="50" />')
console.log(tree) // { tag: 'Circle', type: 'Graphics', props: { cx: 50, cy: 50, r: 50 }, children: [] }

Note: The tag name's first word is a upper format

Warn: Don't use DOMParser or another only-browser API!

Can we support for web to animate native HTML element? This means rich styles and integrate with other frameworks simplify developing.

Describe the bug
Before playing the animation (called app.play()), you can freely change the visible of a widget, but after playing, you can only show and cannot hide, and the widget.display.value is always keeps true.

To Reproduce
Steps to reproduce the behavior:

1. Go to directory ./examples/scene1.ts
2. To reproduce, please type following codes:

import {Circle, createScene, move, Rect, Widget} from 'newcar'
// import TextEditor from "@newcar/mod-text-editor";
import * as nc from "newcar";

await nc.useFont('./default.ttf')

export default createScene(
  new Circle(100, {
    x: 100,
    y: 100
  })
    .setup(function *(widget) {
      yield 1
      widget.hide()
      console.log(widget.display.value)
    })
)

According to the image and output, you can easily discover that only a nick of time you can see the false was put into outputs, either was true.

If you are interested in this bug, please comment under the issue.

Playground needs a great maintainer to keep!

The new page of playground that I have 50% done:

It's in branch playground, if you are interested in this, please comment under the issue.

Tech Stacks

• Vue3
• Vite
• ShadcnUI for Vue
• TailwindCSS

Description

Since the local mode was taken into effect, we had discovered some problem of ncli(@newcar/cli), and after 2.0, it runs with a wrong way, so it needs some fixes and refactor

Bugs you need to face

• If you try to create a long video (under the common condition, it's greater that 200frames), it will throw a wired error.
• Now it has a dangerous bug: no matter what js file you input, it always output a video that duration is 0, so it cannot be used now.

We need a person to refactor it.

If you are interested in it, please comment under this issue.

It's like the title