| /ohos5.0/docs/zh-cn/application-dev/performance/ |
| H A D | animation_practice.md | 9 - 动画参数相同时使用同一个animateTo
10 - 多次animateTo时统一更新状态变量
17 - 使用组件动画（animateTo），并在在动画结束回调中增加逻辑处理。
177 ### 动画参数相同时使用同一个animateTo
178 每次animateTo都需要进行动画前后的对比，因此，减少animateTo的使用次数（例如使用同一个animateTo设置组件属性），可以减少该组件更新的次数，从而获得更好的性能。
253 ### 多次animateTo时统一更新状态变量
254 animateTo会将执行动画闭包前后的状态进行对比，对差异部分进行动画。为了对比，会在执行animateTo的动画闭包之前，将所有变更的状态变量和脏节点都刷新。
255 如果多个animateTo之间存在状态更新，会导致执行下一个animateTo之前又存在需要更新的脏节点，可能造成冗余更新。
257 反例：多个animateTo之间更新状态变量。
261 以下代码在两个animateTo之间更新组件的其他状态。
[all …]
|
| /ohos5.0/docs/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ |
| H A D | ts-explicit-animation.md | 1 # 显式动画 (animateTo)
18 animateTo(value: AnimateParam, event: () => void): void
86 …animateTo可能导致实例不明确的问题，建议使用[getUIContext](../js-apis-arkui-UIContext.md#uicontext)获取UIContext实例，并使用…
108 // 建议使用this.getUIContext()?.animateTo()
109 animateTo({
123 animateTo({}, () => {
135 // 建议使用this.getUIContext()?.animateTo()
136 animateTo({
152 // 建议使用this.getUIContext()?.animateTo()
153 animateTo({ duration: 0 }, () => {
[all …]
|
| H A D | ts-explicit-animatetoimmediately.md | 5 与[animateTo](../js-apis-arkui-UIContext.md#animateto)相比，animateToImmediately能即时将生成的动画指令发送至渲染层执行，无需等…
9 通常情况下，不建议开发者采用animateToImmediately接口，而应选择[animateTo](../js-apis-arkui-UIContext.md#animateto)，以防止干扰…
66 animateTo({
81 animateTo({
|
| H A D | ts-transition-animation-component.md | 66 …序为：本TransitionEffect指定的animation参数 > 前面的TransitionEffect指定的animation参数 > 触发该组件出现消失的animateTo中的动画参数。
67 > 3. 如果未使用animateTo触发转场动画且TransitionEffect中也无animation参数，则该组件直接出现或者消失。
70 > 6. 如果在动画范围([animateTo](ts-explicit-animation.md)、[animation](ts-animatorproperty.md))内触发组件的上下树或可…
109 … 当使用TransitionOptions类型的入参指定转场效果时，**必须**配合[animateTo](ts-explicit-animation.md)使用才有动画效果，动效时长、曲线、延时…
174 animateTo({ duration: 2000 }, () => {
176 // 第二张图的TransitionEffect不包含animation，transition的动画参数由animateTo指定
194 // 出现时做从x方向和y方向scale都为0变为默认的x方向和y方向scale都为1的动画，该动画时长为animateTo中指定的2000ms
|
| H A D | ts-transition-animation-geometrytransition-sys.md | 9 …sition-animation-geometrytransition.md)必须配合[animateTo](ts-explicit-animation.md)使用才有动画效果，动效时长、曲线跟随…
80 animateTo({ duration: 1000 }, () => {
|
| H A D | ts-transition-animation-geometrytransition.md | 9 …sition-animation-geometrytransition.md)必须配合[animateTo](ts-explicit-animation.md)使用才有动画效果，动效时长、曲线跟随…
97 animateTo({ duration: 1000 }, () => {
|
| /ohos5.0/docs/en/application-dev/performance/ |
| H A D | animation_practice.md | 10 - Updating state variables for multiple **animateTo** calls at once
52 animateTo({ duration: 1000, onFinish: () => {
130 animateTo({ duration: 1000 }, () => {
170 animateTo({ duration: 1000 }, () => {
180 ### Using Same animateTo for Properties with Same Animation Settings
194 animateTo({ curve: Curve.Sharp, duration: 1000 }, () => {
200 animateTo({ curve: Curve.Sharp, duration: 1000 }, () => {
233 animateTo({ curve: Curve.Sharp, duration: 1000 }, () => {
256 ### Updating State Variables for Multiple animateTo Calls At Once
260 Avoid: Re-render state variables between **animateTo** calls.
[all …]
|
| /ohos5.0/docs/zh-cn/release-notes/changelogs/OpenHarmony_5.0.0.52/ |
| H A D | changelogs-arkui.md | 235 变更前：在调用无限循环动画接口（例如：无限循环的animateTo）时，首次布局过程中触发的同步回调里所做的修改，会被纳入无限循环动画中，从而产生多余的动画。
241 API 7（animateTo）
247 API 11（UIContext.animateTo）
257 1、animateTo；
263 4、UIContext.animateTo；
269 为了创建无限循环的动画，必须明确地将修改操作置于动画接口（例如：无限循环的animateTo）的闭包函数内。
271 animateTo适配前：
291 // animateTo前修改wid时的布局同步的触发了onSizeChange事件，也会被带入无限循环动画中
301 animateTo({
313 animateTo适配后：
[all …]
|
| /ohos5.0/docs/zh-cn/application-dev/ui/ |
| H A D | arkts-attribute-animation-apis.md | 4 通过可动画属性改变引起UI上产生的连续视觉效果，即为属性动画。属性动画是最基础易懂的动画，ArkUI提供两种属性动画接口[animateTo](../reference/apis-arkui/ark…
9 | animateTo | 闭包内改变属性引起的界面变化。<br/>作用于出现消失转场。 | 通用函数，对闭包前界面和闭包中的状态变量引起的界面之间的差异做动画。<br/>支持多次调用，支持嵌套。 …
12 ## 使用animateTo产生属性动画
16 animateTo(value: AnimateParam, event: () => void): void
19 [animateTo](../reference/apis-arkui/arkui-ts/ts-explicit-animation.md)接口参数中，value指定[AnimateParam对象]…
23 …animateTo可能导致实例不明确的问题，建议使用[getUIContext](../reference/apis-arkui/js-apis-window.md#getuicontext10)…
50 this.getUIContext()?.animateTo({ curve: curves.springMotion() }, () => {
87 …animateTo接口需要把要执行动画的属性的修改放在闭包中，[animation](../reference/apis-arkui/arkui-ts/ts-animatorproperty.md…
|
| H A D | arkts-enter-exit-transition.md | 20 | animation | 定义转场效果的动画参数：<br/>- 如果不定义会跟随animateTo的动画参数。<br/>- 不支持通过控件的animation接口配置动画参数。…
29 TransitionEffect.OPACITY // 创建了透明度转场效果，这里没有调用animation接口，会跟随animateTo的动画参数
60 // 方式一：将控制变量放到animateTo闭包内，未通过animation接口定义动画参数的TransitionEffect将跟随animateTo的动画参数
61 this.getUIContext()?.animateTo({ curve: curves.springMotion() }, () => {
70 完整的示例代码和效果如下，示例中采用直接删除或新增组件的方式触发转场，也可以替换为在animateTo闭包内改变控制变量触发转场。
193 this.getUIContext()?.animateTo({
|
| H A D | arkts-animation-smoothing.md | 6 假设对于某一可动画属性，存在正在运行的动画。当UI侧行为改变该属性终点值时，开发者仅需在[animateTo](../reference/apis-arkui/arkui-ts/ts-explici…
95 this.getUIContext()?.animateTo({ curve: curves.responsiveSpringMotion() }, () => {
99 console.info(`move, animateTo x:${this.positionX}, y:${this.positionY}`);
103 this.getUIContext()?.animateTo({ curve: curves.springMotion() }, () => {
106 console.info(`touchUp, animateTo x:100, y:100`);
|
| /ohos5.0/docs/zh-cn/third-party-cases/ |
| H A D | how-to-control-the-pause-of-playback-of-looping-animations.md | 3 由于循环动画无限播放的效果是通过配置animateTo接口中的iterations属性值为-1实现的。为了控制循环动画的播放，开发者通过添加定时器和通过递归函数方法实现播放停止。本文即为大家介绍该方…
11 创建一个播放一次的animateTo()并通过onFinish()回调，然后通过setInterval重复调用animateTo()，以达到循环动画的播放，最后通过clearInterval清除定时…
29 animateTo({ duration: 400, iterations: 1, onFinish: () => {
30 animateTo({ duration: 400, onFinish: () => {
39 animateTo({ duration: 400, iterations: 1, onFinish: () => {
40 animateTo({duration:400, onFinish:()=>{
67 doAnimate函数去一直调用animateTo函数,从而实现动画无限循环；
83 animateTo({ duration: 400, iterations: 1, onFinish: () => {
|
| H A D | how-to-develop-spring-animation.md | 64 animateTo({
102 animateTo({
107 animateTo({ duration: 500,
142 animateTo({
153 animateTo({
201 animateTo({
218 animateTo({
223 animateTo({ duration: 500,
248 animateTo({
258 // 触摸过程中触发跟手动画，同样通过animateTo实现动画效果
[all …]
|
| H A D | water-wave-animation.md | 24 * 当按钮按下时，使用显式动画（animateTo）加载动画：插入按下时的Row组件，同时加载水波的聚拢效果。
93 animateTo({ duration: 400 }, () => {
100 animateTo({ duration: 400 }, () => {
136 animateTo({ duration: 300,
238 animateTo({ duration: 300,
278 animateTo({ duration: 400 }, () => {
285 animateTo({ duration: 400 }, () => {
|
| H A D | book-flip-animation.md | 5 翻页动效是应用开发中常见的动效场景，常见的如书籍翻页、日历翻页等。本文就为大家举例讲解如何通过ArkUI提供的显示动画接口[animateTo](../application-dev/referen…
111 - 自定义book_animate函数，在其中使用animateTo方法添加动画效果，同时控制动画的时长，以及动画过程中各元素状态的改变。
139 // 通过animateTo方法为组件添加动效，动效时长要小于setInterval函数调用周期
140 animateTo({ duration:700,onFinish:()=>{
238 animateTo({ duration:700,onFinish:()=>{
|
| /ohos5.0/foundation/arkui/advanced_ui_component/source/Filter/ |
| H A D | Filter.ets | 132 animateTo({
260 animateTo({
274 animateTo({
282 animateTo({
294 animateTo({
300 animateTo({
311 animateTo({
316 animateTo({
812 animateTo({
825 animateTo({
[all …]
|
| /ohos5.0/docs/zh-cn/application-dev/faqs/ |
| H A D | faqs-arkui-animation-interactive-event.md | 197 …用来设置组件变化场景，包括新增和删除；参数translate用来设置转场时的平移效果。注意transition需要配合animateTo才能生效，动效时长、曲线、延时跟随animateTo中的配置。
231 animateTo({ duration: 1000 }, () => {
249 animateTo({ duration: 1000 }, () => {
311 6.挤位动效通过animateTo来改变datasource里的index，触发list的排序动效；
328 animateTo({
343 animateTo({
|
| /ohos5.0/foundation/arkui/ace_engine/advanced_ui_component/filter/source/ |
| H A D | filter.ets | 374 animateTo({
388 animateTo({
396 animateTo({
408 animateTo({
414 animateTo({
425 animateTo({
430 animateTo({
1034 animateTo({
1047 animateTo({
1149 animateTo({
[all …]
|
| /ohos5.0/docs/en/application-dev/ui/ |
| H A D | arkts-attribute-animation-apis.md | 4 ArkUI provides two types of APIs, namely, [animateTo](../reference/apis-arkui/arkui-ts/ts-explicit-…
9 | animateTo | UI changes caused by property changes in closures.<br>Transition for appearance and d…
12 ## animateTo section
16 animateTo(value: AnimateParam, event: () => void): void
19 Among the parameters of [animateTo](../reference/apis-arkui/arkui-ts/ts-explicit-animation.md), **v…
23 …animateTo** instances, it is recommended that you obtain a **UIContext** instance using the [getUI…
50 this.getUIContext()?.animateTo({ curve: curves.springMotion() }, () => {
87 Unlike the **animateTo** API, the [animation](../reference/apis-arkui/arkui-ts/ts-animatorproperty.…
|
| /ohos5.0/docs/zh-cn/application-dev/reference/apis-arkui/ |
| H A D | _ark_u_i___native_animate_a_p_i__1.md | 20 | int32_t(\* [animateTo](#animateto) )([ArkUI_ContextHandle](_ark_u_i___native_module.md#arkui_cont…
29 ### animateTo subsection
32 int32_t(* ArkUI_NativeAnimateAPI_1::animateTo) (ArkUI_ContextHandle context, ArkUI_AnimateOption *o…
|
| H A D | js-apis-curve.md | 140 构造弹簧曲线对象，曲线形状由弹簧参数决定，动画时长受animation、animateTo中的duration参数控制。
186 …时，按默认值0处理。<br>弹性动画曲线为物理曲线，[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-exp…
193 …>**说明:** <br>弹性动画曲线为物理曲线，[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-exp…
222 …动画，推荐使用默认参数的弹性跟手动画曲线。<br/>[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-exp…
228 …画，推荐使用默认参数的弹性跟手动画曲线。<br>2、[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-exp…
242 构造插值器弹簧曲线对象，生成一条从0到1的动画曲线，实际动画值根据曲线进行插值计算。动画时间由曲线参数决定，不受animation、animateTo中的duration参数控制。
260 …象。<br>**说明:** 弹性动画曲线为物理曲线，[animation](arkui-ts/ts-animatorproperty.md)、[animateTo](arkui-ts/ts-exp…
|
| H A D | js-apis-arkui-UIContext-sys.md | 53 animateTo({duration:5000 },()=>{
111 this.uiContext?.animateTo({
126 this.uiContext?.animateTo({
|
| /ohos5.0/foundation/arkui/advanced_ui_component/interface/filter/ |
| H A D | filter.js | 465 Context.animateTo({ curve: FRICTION_CUBIC_BEZIER, duration: 250 }, (() => {
496 Context.animateTo({ curve: INTER_POLATING_SPRING }, (() => {
505 Context.animateTo({ curve: INTER_POLATING_SPRING }, (() => {
787 })) : o.type === TouchType.Up && Context.animateTo({
1648 })) : o.type === TouchType.Up && Context.animateTo({
1766 Context.animateTo({ curve: INTER_POLATING_SPRING, onFinish: () => {
1774 Context.animateTo({ curve: INTER_POLATING_SPRING }, (() => {
2019 Context.animateTo({ duration: 150, curve: SHARP_CUBIC_BEZIER }, (() => {
2025 Context.animateTo({ curve: INTER_POLATING_SPRING }, (() => {
2087 Context.animateTo({ duration: 150, curve: SHARP_CUBIC_BEZIER }, (() => {
[all …]
|
| /ohos5.0/foundation/arkui/ace_engine/advanced_ui_component/filter/interfaces/ |
| H A D | filter.js | 780 Context.animateTo({
800 Context.animateTo({
814 Context.animateTo({
826 Context.animateTo({
831 Context.animateTo({
841 Context.animateTo({
846 Context.animateTo({
2360 Context.animateTo({
2373 Context.animateTo({
2529 Context.animateTo({
[all …]
|
| /ohos5.0/docs/zh-cn/application-dev/quick-start/ |
| H A D | arkts-rendering-control-ifelse.md | 281 animateTo({}, ()=>{
282 // 在animateTo中修改if条件，在动画当中，会给if下的第一层组件默认转场
345 animateTo({}, ()=>{
346 // 在animateTo中修改if条件，在动画当中，会给if下的第一层组件默认转场
394 animateTo({}, ()=>{
395 // 在animateTo中修改if条件，在动画当中，会给if下的第一层组件默认转场
|