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