介绍
本示例介绍使用vibrator.startVibration方法实现手机振动效果,用keyframeAnimateTo关键帧动画实现点击后的抖动动画。
效果图预览
使用说明
- 加载完成后显示登录界面,未勾选协议时点击一键登录按钮会触发手机振动效果和提示文本的抖动动画。
实现思路
- 创建一个函数startVibrate()调用vibrator.startVibration方法实现手机振动效果(需要权限:ohos.permission.VIBRATE)。
startVibrate() {
try {
// TODO: 知识点:vibrator.startVibration 根据指定振动效果和振动属性触发马达振动
vibrator.startVibration({
type: 'time',
// 持续触发马达振动时间600ms
duration: CONFIGURATION.VIBRATION_TIME,
}, {
id: 0,
usage: 'alarm',
}, (error: BusinessError) => {
if (error) {
logger.error(`Failed to start vibration. Code: ${error.code}, message: ${error.message}`);
return;
}
logger.info('Succeed in starting vibration');
});
} catch (err) {
let e: BusinessError = err as BusinessError;
logger.error(`An unexpected error occurred. Code: ${e.code}, message: ${e.message}`);
}
}
- 创建一个函数startAnimation()使用keyframeAnimateTo关键帧动画实现提示文本的抖动动画。
startAnimation() {
if (!this.uiContext) {
return;
}
this.translateX = CONFIGURATION.POSITION_ZERO;
// TODO: 知识点:通过keyframeAnimateTo关键帧动画指定状态变化过渡动效
this.uiContext.keyframeAnimateTo({ iterations: CONFIGURATION.PLAYBACK_COUNT }, [
{
// 第一段动画时长为100ms,translateX属性从0到5
duration: CONFIGURATION.ANIMATION_TIME,
event: () => {
this.translateX = CONFIGURATION.TRANSLATE_OFFSET_X;
}
},
{
// 第二段动画时长为100ms,translateX属性从5到0
duration: CONFIGURATION.ANIMATION_TIME,
event: () => {
this.translateX = CONFIGURATION.POSITION_ZERO;
}
}
]);
}
高性能知识点
不涉及
工程结构&模块类型
vibrateeffect // har类型
|---components
| |---constantsData.ets // 定义常量数据
|---ProductView.ets // 视图层-场景列表页面
模块依赖
本实例依赖common模块来实现 日志 的打印、 资源 的调用
写在最后
如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
- 想要获取更多完整鸿蒙最新学习知识点,请看下方小图