HarmonyOS NEXT应用开发—使用弹簧曲线实现抖动动画及手机振动效果案例

279 阅读2分钟

介绍

本示例介绍使用vibrator.startVibration方法实现手机振动效果,用animateTo显示动画实现点击后的抖动动画。

效果图预览

img

使用说明

  1. 加载完成后显示登录界面,未勾选协议时点击一键登录按钮会触发手机振动效果和提示文本的抖动动画。

实现思路

  1. 创建一个函数startVibrate()调用vibrator.startVibration方法实现手机振动效果(需要权限:ohos.permission.VIBRATE)。源码参考VibrateEffect.ets
  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}, messege: ${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}`);
    }
  }
  1. 创建一个函数startAnimation()使用animateTo显示动画实现提示文本的抖动动画。源码参考VibrateEffect.ets
  startAnimation() {
    // TODO: 知识点:通过animateTo显示动画指定由于闭包代码导致的状态变化插入过渡动效
    animateTo({
      duration: CONFIGURATION.ANIMATION_TIME,
      // 弹簧曲线:初始速度100,质量1,刚度80,阻尼10
      curve: curves.springCurve(CONFIGURATION.VELOCITY_VALUE, CONFIGURATION.MASS_VALUE,
        CONFIGURATION.STIFFNESS_VALUE, CONFIGURATION.DAMPING_VALUE),
      // 播放2次
      iterations: CONFIGURATION.PLAYBACK_COUNT,
    },
      () => {
        // 抖动动偏移量
        this.translateX = CONFIGURATION.TRANSLATE_OFFSET_X;
      })
    this.translateX = CONFIGURATION.POSITION_ZERO;
  }

高性能知识点

不涉及

工程结构&模块类型

vibrateeffect                                   // har类型
|---components
|   |---constantsData.ets                       // 定义常量数据
|---ProductView.ets                             // 视图层-场景列表页面

模块依赖

本实例依赖common模块来实现日志的打印、资源的调用

参考资料

显式动画

@ohos.vibrator (振动)

访问控制授权申请

详细关注VX公众号:Android老皮

《鸿蒙(HarmonyOS)开发学习指南》

第一章 快速入门

1、开发准备

2、构建第一个ArkTS应用(Stage模型)

3、构建第一个ArkTS应用(FA模型)

4、构建第一个JS应用(FA模型)

5、........

图片

第二章 开发基础知识

1、应用程序包基础知识

2、应用配置文件(Stage模型)

3、应用配置文件概述(FA模型)

4、.......

图片

第三章 资源分类与访问

1、 资源分类与访问

2、 创建资源目录和资源文件

3、 资源访问

4、.......

图片

第四章 学习ArkTs语言

1、初识ArkTS语言

2、基本语法

3、状态管理

4、其他状态管理

5、渲染控制

6、......

图片

第五章 UI开发

1.方舟开发框架(ArkUI)概述

2.基于ArkTS声明式开发范式

3.兼容JS的类Web开发范式

4.......

图片

第六章 Web开发

1.Web组件概述

2.使用Web组件加载页面

3.设置基本属性和事件

4.在应用中使用前端页面JavaScript

5.ArkTS语言基础类库概述

6.并发

7.......

图片

11.网络与连接

12.电话服务

13.数据管理

14.文件管理

15.后台任务管理

16.设备管理

17......

图片

第七章 应用模型

1.应用模型概述

2.Stage模型开发指导

3.FA模型开发指导

4.......