This repository has been archived by the owner on Sep 8, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
106 additions
and
8 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
--- | ||
title: 属性动画 | ||
--- | ||
|
||
# 动画 | ||
|
||
newcar 动画的基本原理是在每一帧中不断改变对象的属性。在快速入门中,您已经掌握了 newcar 动画的基本用法。现在让我们深入研究更多细节。 | ||
|
||
我们都支持哪些动画?我们之前已经了解了内置动画 `create`,除此之外,newcar 还有许多其他内置动画。以下是常用动画的列表: | ||
|
||
- create | ||
- destroy | ||
- rotate | ||
- move | ||
- scale | ||
- zoomIn | ||
- zoomOut | ||
- fadeIn | ||
- fadeOut | ||
- ... | ||
|
||
在接下来的内容中,我将带您深入了解动画系统。 | ||
|
||
## 步进动画 | ||
|
||
当您调用 `Widget.animate` 函数时,它会将您的动画推入一个 `等待数组`,然后逐步运行所创建的动画。 | ||
|
||
最简单的动画是 `延迟`,就像它的名字一样-在某个时间单位内什么都不做。例如,如果您想等待3秒然后运行 `创建` 动画,您可以编写如下代码: | ||
|
||
```ts | ||
new Circle(100) | ||
.animate(delay(3)) | ||
.animate(create().withAttr({ duration: 1 })) | ||
``` | ||
|
||
## 同步动画 | ||
|
||
如果您想在同一时间轴上同时运行两个以上动画,您可以使用 `parallel()` 来实现。该函数允许您输入两个以上动画,并同时运行它们。 | ||
|
||
例如,如果您想让一个圆形运行 `创建` 动画并且变色,您可以: | ||
|
||
```ts | ||
new Circle(100) | ||
.animate( | ||
parallel( | ||
create().withAttr({ duration: 1 }), | ||
discolorate().withAttr({ duration: 1, to: Color.parse('skyblue') }) | ||
) | ||
) | ||
``` | ||
|
||
如果您想插入逐步动画,可以使用 `sequence` 来制作。 | ||
|
||
```ts | ||
new Circle(100) | ||
.animate( | ||
parallel( | ||
sequence( | ||
create().withAttr({ duration: 0.5 }), | ||
fadeIn().withAttr({ duration: 0.5 }) | ||
), | ||
discolorate().withAttr({ duration: 1, to: Color.parse('skyblue') }) | ||
) | ||
) | ||
``` | ||
|
||
## 更改属性 | ||
|
||
尽管newcar提供了各种可以使用的动画,但它仍旧无法涵盖所有属性,因此 `changeProperty` API是您的最佳选择。 | ||
|
||
用法: | ||
|
||
```ts | ||
circle.animate( | ||
changeProperty((w) => w.radius).withAttr({ | ||
duration: 1, | ||
from: 100, | ||
to: 300 | ||
}) | ||
) | ||
``` | ||
|
||
## 缓动函数 | ||
|
||
在Newcar中,一些功能以 `ease` 开头拼写,可以控制您的动画速度,我们称之为 `缓动`。 | ||
|
||
请使用 `by` 参数来接收一个缓动函数。 | ||
|
||
```ts | ||
circle.animate( | ||
create.withAttr({ | ||
duration: 1, | ||
by: easeBounce | ||
}) | ||
) | ||
``` | ||
|
||
缓动函数的曲线图地址: [https://www.desmos.com/calculator/yasltaa9um](https://www.desmos.com/calculator/yasltaa9um) |
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