HarmonyOS应用开发文档更新修改说明:组件方法补充示例代码和示例效果图,方便开发者掌握组件方法的使用方式

当组件通过id属性标识后,可以使用该id获取组件对象并调用相关组件方法。

名称

参数

必填

默认值

描述

focus

Object

格式为:{ focus: true | false }



{ focus: true }

组件请求或者取消焦点。focus为true时,表示请求焦点,focus为false时,表示取消焦点,该方法参数可缺省,缺省时默认请求焦点。

说明

支持focusable属性的组件支持该方法。

rotation

Object

格式为:{ focus: true | false }



{ focus: true }

组件请求或者取消旋转表冠焦点。focus设置为true时,表示请求表冠事件焦点,focus设置为false时,表示取消表冠事件焦点,该方法参数可缺省,缺省时默认请求旋转表冠焦点。

说明

仅有组件picker-view、list、slider、swiper支持该方法。

animate

* Object: keyframes,用于描述动画关键帧参数
* Object: options,用于描述动画参数


-

在组件上创建和运行动画的快捷方式。输入动画所需的keyframes和options,返回animation对象实例。

this.$element('id').focus(Object)

<>

支持focusable属性的组件均支持focus方法。

* 示例 this.$element('id').focus();
this.$element('id').rotation(Object)

<>

仅有组件picker-view、list、slider、swiper支持rotation方法。

* 示例 this.$element('id').rotation();
this.$element('id').animate(Object, Object)

<>

通过animate(keyframes,
options)方法获得animation对象。该对象支持动画属性,动画方法和动画事件。重复多次调用animate方法时,采用replace策略,最后一次调用时传入的参数生效

* keyframes

参数

类型

说明

frames

Array<Style>

用于设置动画样式属性的对象列表。Style类型说明请见表1 Style类型说明。
<> <> 表1 Style类型说明

参数

类型

默认值

说明

width

number

-

动画执行过程中设置到组件上的宽度值。

height

number

-

动画执行过程中设置到组件上的高度值。

backgroundColor

<color>

none

动画执行过程中设置到组件上的背景颜色。

opacity

number

1

设置到组件上的透明度(介于0到1之间)。

backgroundPosition

string

-

格式为"x y",单位为百分号或者px。

第一个值是水平位置,第二个值是垂直位置。

如果仅规定了一个值,另一个值为 50%。

transformOrigin

string

'center center'

变换对象的中心点。

第一个参数表示x轴的值,可以设置为left、center、right、长度值或百分比值。

第二个参数表示y轴的值,可以设置为top、center、bottom、长度值或百分比值。

transform

Transform

-

设置到变换对象上的类型。

offset

number

-

* offset值(如果提供)必须在0.0到1.0(含)之间,并以升序排列。
* 若只有两帧,可以不填offset。
* 若超过两帧,offset必填。 <> <> 表2 Transform

参数

类型

说明

translate/translateX/translateY

<length> | <percent>

平移元素。

示例:

translate: "250" X轴平移250px

translate: "100px 80%" X轴平移100px,Y轴平移80%组件高度

translateX: "-200px" X轴平移-200px

translateY: "50%" Y轴平移50%组件高度

scale/scaleX/scaleY

number

按比例放大或缩小元素。

示例:

scale: "0.5" X轴和Y轴缩小到原来的0.5倍

scale: "1.5 1.2" X轴放大1.5倍,Y轴放大1.2倍

scaleX: "2.0" X轴放大至原来的2倍

scaleY: "0" Y轴长度缩小至0

rotate/rotateX/rotateY

<deg> | <rad>

指定元素将被旋转的角度。

示例:

rotate: "180deg" 绕Z轴旋转180度

rotateX: "3.14rad" 绕X轴旋转3.14弧度

rotateY: "-100" 绕Y轴旋转-100度

* options

参数

类型

默认值

说明

duration

number

0

指定当前动画的运行时长(单位毫秒)。

easing

string

linear

描述动画的时间曲线,支持类型见表3 easing有效值说明。

delay

number

0

设置动画执行的延迟时间(默认值表示无延迟)。

iterations

number | string

1

设置动画执行的次数。number表示固定次数,Infinity枚举表示无限次数播放。

fill

none | forwards

none

指定动画执行结束后的状态。

* none:恢复初始状态。
* forwards:保持动画结束时的状态(在最后一个关键帧中定义)。 <> <> 表3 easing有效值说明



描述

linear

动画线性变化。

ease-in

动画速度先慢后快,cubic-bezier(0.42, 0.0, 1.0, 1.0)。

ease-out

动画速度先快后慢,cubic-bezier(0.0, 0.0, 0.58, 1.0)。

ease-in-out

动画先加速后减速,cubic-bezier(0.42, 0.0, 0.58, 1.0)。

friction

阻尼曲线,cubic-bezier(0.2, 0.0, 0.2, 1.0)。

extreme-deceleration

急缓曲线,cubic-bezier(0.0, 0.0, 0.0, 1.0)。

sharp

锐利曲线,cubic-bezier(0.33, 0.0, 0.67, 1.0)。

rhythm

节奏曲线,cubic-bezier(0.7, 0.0, 0.2, 1.0)。

smooth

平滑曲线,cubic-bezier(0.4, 0.0, 0.4, 1.0)。

cubic-bezier(x1, y1, x2, y2)

在三次贝塞尔函数中定义动画变化过程,入参的x和y值必须处于0-1之间。

steps(number, step-position)

Step曲线。

number必须设置,支持的类型为int。

step-position参数可选,支持设置start或end,默认值为end。

* 返回值
<>animation对象支持的属性:

属性

类型

说明

finished

boolean

只读,用于表示当前动画是否已播放完成。

pending

boolean

只读,用于表示当前动画是否处于等待其他异步操作完成的等待状态(例如启动一个延时播放的动画)。

playState

string

可读可写,动画的执行状态:

* idle:未执行状态,包括已结束或未开始。
* running:动画正在运行。
* paused:动画暂停。
* finished:动画播放完成。

startTime

number

可读可写,动画播放开始的预定时间,用途类似于options参数中的delay。

animation对象支持的方法:

方法

参数

说明

play

-

组件播放动画。

finish

-

组件完成动画。

pause

-

组件暂停动画。

cancel

-

组件取消动画。

reverse

-

组件倒播动画。

animation对象支持的事件:

事件

说明

cancel

动画被强制取消。

finish

动画播放完成。

* 示例代码: // xxx.js import prompt from '@system.prompt'; export default { data
: { animation:'', }, onInit() { }, onShow() { var options = { duration: 3000,
easing: 'friction', delay: 500, fill: 'forwards', iterations: 1, }; var frames
= [ {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0},
{transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0} ];
this.animation = this.$element('idName').animate(frames, options); // handle
finish event this.animation.onfinish = function() { prompt.showToast({ message:
"The animation is finished." }); }; // handle cancel event
this.animation.oncancel = function() { prompt.showToast({ message: "The
animation is canceled." }); }; }, start() { this.animation.play(); }, cancel()
{ this.animation.cancel(); } }

 

 

技术
©2019-2020 Toolsou All rights reserved,
Android移动应用基础学习——第一章基础入门IDEA实现远程调试步骤详解通俗理解-梯度下降法(一)- 数学基础Java复习题-----稳了!!!如何防止Mac进入睡眠状态?告诉你4种有效的方法Arduino智能小车设计(一)自定义注解的方式的使用场景:解决业务分发vue 路由跳转四种方式 (带参数)二进制模2除法(CRC循环冗余检验)数组去重主要的5种方法,