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(); } }
技术
今日推荐