Skip to content

D
Docs

OpenHarmony / Docs
大约 1 年 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 65672398 编写于 作者: E ester.zhou
浏览文件
操作

update docs 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 c5345c22
隐藏空白更改
内联 并排
Showing with 222 addition and 226 deletion
en/application-dev/reference/apis/js-apis-animator.md
浏览文件 @ 65672398
# Animation
# Animator
> **NOTE**<br>
> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>![](../../public_sys-resources/icon-note.gif) **NOTE:**
>The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import
**requestAnimationFrame**: none
```
import animator from '@ohos.animator';
```
## createAnimator
createAnimator(options: AnimatorOptions): AnimatorResult
Creates an **Animator** object.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| options | [AnimatorOptions](#animatoroptions) | Yes| Animator options. For details, see **AnimatorOptions**.|
**Return value**
| Type| Description|
| -------- | -------- |
| [AnimatorResult](#animatorresult) | Animator result.|
**Example**
```
<!-- hml -->
<div class="container">
<div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show">
</div>
</div>
```
```
// js
export default {
data : {
divWidth: 200,
divHeight: 200,
animator: null
},
onInit() {
var options = {
duration: 1500,
easing: 'friction',
fill: 'forwards',
iterations: 2,
begin: 200.0,
end: 400.0
};
this.animator = animator.createAnimator(options);
},
Show() {
var options1 = {
duration: 2000,
easing: 'friction',
fill: 'forwards',
iterations: 1,
begin: 200.0,
end: 400.0
};
this.animator.update(options1);
var _this = this;
this.animator.onframe = function(value) {
_this.divWidth = value;
_this.divHeight = value;
};
this.animator.play();
}
}
```
## AnimatorResult
Defines the animator result.
### update
update(options: AnimatorOptions): void
Updates this animator.
**cancelAnimationFrame**: none
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**createAnimator**:
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| options | [AnimatorOptions](#animatoroptions) | Yes| Animator options.|
**Example**
```
import animator from '@ohos.animator';
animator.update(options);
```
## Required Permissions
### play
None
play(): void
## requestAnimationFrame
Plays this animation.
requestAnimationFrame\(handler\[, \[ ...args\]\]\): number
**System capability**: SystemCapability.ArkUI.ArkUI.Full
Requests an animation frame.
**Example**
```
animator.play();
```
- Parameters
### finish
| Name | Type | Mandatory | Description |
| ------- | ----------- | --------- | ------------------------------------------------------------ |
| handler | Function | Yes | Handler used to request a frame. When **requestAnimationFrame** calls the **handler**, the timestamp is passed to the first parameter to indicate the time when **requestAnimationFrame** starts to execute the callback. |
| ...args | Array\<any> | No | Additional parameter, which is passed to the **handler** as a parameter during function callback. |
finish(): void
- Return values
Ends this animation.
| Type | Description |
| ------ | ----------- |
| number | Request ID. |
- Example
**System capability**: SystemCapability.ArkUI.ArkUI.Full
```
<!-- xxx.hml -->
<div class="container">
<button type="capsule" class="btn" onclick="beginAnimation">beginAnimation</button>
</div>
```
```
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.btn{
width: 300px;
margin-top: 40px;
}
```
```
/* xxx.js */
export default {
data: {
requestId: 0,
startTime: 0,
},
beginAnimation() {
cancelAnimationFrame(this.requestId);
this.requestId = requestAnimationFrame(this.runAnimation);
},
runAnimation(timestamp) {
if (this.startTime == 0) {
this.startTime = timestamp;
}
var elapsed = timestamp - this.startTime;
if (elapsed < 500) {
console.log('callback handler timestamp: ' + timestamp);
this.requestId = requestAnimationFrame(this.runAnimation);
}
}
}
```
**Example**
```
animator.finish();
```
### pause
## cancelAnimationFrame
pause(): void
cancelAnimationFrame\(requestId: number\): void
Pauses this animation.
Cancels the animation frame request.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
- Parameters
**Example**
```
animator.pause();
```
| Name | Type | Mandatory | Description |
| --------- | ------ | --------- | ------------------------ |
| requestId | number | Yes | ID of the frame request. |
- Example
### cancel
```
<!-- xxx.hml -->
<div class="container">
<button type="capsule" class="btn" onclick="beginAnimation">beginAnimation</button>
<button type="capsule" class="btn" onclick="beginAnimation">stopAnimation</button>
</div>
```
```
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.btn{
width: 300px;
margin-top: 40px;
}
```
```
/* xxx.js */
export default {
data: {
requestId: 0,
startTime: 0,
},
beginAnimation() {
cancelAnimationFrame(this.requestId);
this.requestId = requestAnimationFrame(this.runAnimation);
},
runAnimation(timestamp) {
if (this.startTime == 0) {
this.startTime = timestamp;
}
var elapsed = timestamp - this.startTime;
if (elapsed < 500) {
console.log('callback handler timestamp: ' + timestamp);
this.requestId = requestAnimationFrame(this.runAnimation);
}
},
stopAnimation() {
cancelAnimationFrame(this.requestId);
}
}
```
cancel(): void
Cancels this animation.
## createAnimator
**System capability**: SystemCapability.ArkUI.ArkUI.Full
createAnimator\(options\[...\]\): void
Creates an animation object.
- Parameters
| Name | Type | Mandatory | Description |
| ------- | ------ | --------- | ------------------------------------------------------------ |
| options | Object | Yes | Attributes of the **Animator** to be created. For details, see the options table. |
- Description of options
| Name | Type | Mandatory | Description |
| ---------- | ------ | --------- | ------------------------------------------------------------ |
| duration | number | No | Duration for playing an animation, in milliseconds. The default value is **0**. |
| easing | string | No | Animation easing curve. The default value is **ease**. |
| delay | number | No | Animation delay duration, in milliseconds. The default value is **0**, indicating that there is no delay. |
| fill | string | No | Animation start/stop mode. The default value is **none**. |
| direction | string | No | Animation playback mode. The default value is **normal**. |
| iterations | number | No | Number of times that an animation is played. The default value is **1**. If this parameter is set to **0**, the animation is not played. If this parameter is set to **-1**, the animation is played for an unlimited number of times. |
| begin | number | No | Start point of the animation easing. If this parameter is not set, the default value **0** is used. |
| end | number | No | End point of the animation easing. If this parameter is not set, the default value **1** is used. |
- animator interfaces
| Name | Type | Description |
| ------- | ------- | ------------------------------------------------------------ |
| update | options | Updates the animation parameters. The input parameters are the same as those of **createAnimator**. |
| play | - | Starts an animation. |
| finish | - | Ends an animation. |
| pause | - | Pauses an animation. |
| cancel | - | Cancels an animation. |
| reverse | - | Reverses an animation. |
- **animator** supported events:
| Name | Type | Description |
| ------ | ------ | ----------------------------------- |
| frame | number | The frame is requested. |
| cancel | - | The animation is forcibly canceled. |
| finish | - | The animation playback is complete. |
| repeat | - | The animation replays. |
- Example
```
<!-- hml -->
<div class="container">
<div class="Animation" style="height: {{divHeight}}px; width: {{divWidth}}px; background-color: red;" onclick="Show">
</div>
</div>
```
```
// js
export default {
data : {
divWidth: 200,
divHeight: 200,
animator: null
},
onInit() {
var options = {
duration: 1500,
easing: 'friction',
fill: 'forwards',
iterations: 2,
begin: 200.0,
end: 400.0
};
this.animator = animator.createAnimator(options);
},
Show() {
var options1 = {
duration: 2000,
easing: 'friction',
fill: 'forwards',
iterations: 1,
begin: 200.0,
end: 400.0
};
this.animator.update(options1);
var _this = this;
this.animator.onframe = function(value) {
_this.divWidth = value;
_this.divHeight = value;
};
this.animator.play();
}
}
```
\ No newline at end of file
**Example**
```
animator.cancel();
```
### reverse
reverse(): void
Plays this animation in reverse order.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Example**
```
animator.reverse();
```
### onframe
onframe: (progress: number) => void
Called when a frame is received.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| progress | number | Yes| Current progress of the animation.|
**Example**
```
animator.onframe();
```
### onfinish
onfinish: () => void
Called when this animation is finished.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Example**
```
animator.onfinish();
```
### oncancel
oncancel: () => void
Called when this animation is canceled.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Example**
```
animator.oncancel();
```
### onrepeat
onrepeat: () => void
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Example**
```
animator.onrepeat();
```
Called when this animation repeats.
## AnimatorOptions
Defines animator options.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| duration | number | Yes| Duration for playing the animation, in milliseconds. The default value is **0**.|
| easing | string | Yes| Animation interpolation curve. The default value is **ease**.|
| delay | number | Yes| Animation delay duration, in milliseconds. The default value is **0**, indicating that there is no delay.|
| fill | "none" \| "forwards" \| "backwards" \| "both" | Yes| State of the animated target after the animation is executed. The default value is **none**, which means that the target will retain its end state (defined by the last keyframe) after the animation is executed. |
| direction | "normal" \| "reverse" \| "alternate" \| "alternate-reverse" | Yes| Animation playback mode. The default value is **normal**.|
| iterations | number | Yes| Number of times that the animation is played. The default value is **1**. The value **0** means not to play the animation, and **-1** means to play the animation for an unlimited number of times.|
| begin | number | Yes| Start point of the animation interpolation. If this parameter is not set, the default value **0** is used.|
| end | number | Yes| End point of the animation interpolation. If this parameter is not set, the default value **1** is used.|
en/application-dev/reference/arkui-ts/ts-interpolation-calculation.md
浏览文件 @ 65672398
# Interpolation Calculation
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>
> **NOTE**<br>
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -31,7 +31,8 @@ Implements initialization for the interpolation curve, which is used to create a
| -------- | -------- | -------- | -------- | -------- |
| curve | Curve | No | Linear | Curve object. |
- Return value<br>
- Return value
Curve object.
......@@ -47,9 +48,10 @@ Constructs a step curve object.
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| count | number | Yes | - | Number of steps. Must be a positive integer. |
| end | boolean | No | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. |
| end | boolean | Yes | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. |
- Return value<br>
- Return value
Curve object.
......@@ -69,7 +71,8 @@ Constructs a third-order Bezier curve object. The curve value must be between 0
| x2 | number | Yes | Horizontal coordinate of the second point on the Bezier curve. |
| y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. |
- Return value<br>
- Return value
Curve object.
......@@ -89,7 +92,8 @@ Constructs a spring curve object.
| stiffness | number | Yes | Stiffness. |
| damping | number | Yes | Damping. |
- Return value<br>
- Return value
Curve object.
......@@ -105,7 +109,7 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezi
```
Curve objects can be created only by the preceding APIs.
Curve objects can be created only by the preceding APIs.
| API | Description |
| -------- | -------- |
| interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.<br/>**time**: indicates the current normalized time. The value ranges from 0 to 1.<br/>The curve interpolation corresponding to the normalized time point is returned. |
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或