动画效果

动画

静态动画

静态动画主要使用transform样式,实现三种变换


  • translate:水平或竖直方向的移动
  • scale:横向或纵向将指定组件缩小或放大到所需比例
  • rotate:将指定组件沿横轴或纵轴或中心点旋转指定的角度

连续动画

  • 静态动画只有开始状态和结束状态,没有中间状态,如果需要设置中间的过渡状态和转 换效果,需要使用连续动画实现。
  • 连续动画的核心是animation样式,它定义了动画的开始状态、结束状态以及时间和速度 的变化曲线。通过animation样式可以实现的效果有:
    • animation-name:设置动画执行后应用到组件上的背景颜色、透明度、宽高和变换类型;
    • animation-delay和animation-duration:分别设置动画执行后元素延迟和持续的时间;
    • animation-timing-function:描述动画执行的速度曲线,使动画更加平滑;
    • animation-iteration-count:定义动画播放的次数;
    • animation-fill-mode:指定动画执行结束后是否恢复初始状态。

用户交互

事件

手势事件

手势表示由单个或多个事件识别的语义动作(例如:点击、拖动和长按)。

一个完整的 手势也可能由多个事件组成,对应手势的生命周期。JS UI框架支持的手势事件有:

  • 触摸
  • 点击
  • 长按
触摸
  1. touchstart:手指触摸动作开始。
  2. touchmove:手指触摸后移动。
  3. touchcancel:手指触摸动作被打断,如来电提醒、弹窗。
  4. touchend:手指触摸动作结束。
  5. 点击-click:用户快速轻敲屏幕。
  6. 长按-longpress:用户在相同位置长时间保持与屏幕接触。

按键事件

按键事件是智慧屏上特有的手势事件,当用户操作遥控器按键时触发。用户点击一个遥 控器按键,通常会触发两次key事件:先触发action为0,再触发action为1,即先触发按 下事件,再触发抬起事件。action为2的场景比较少见,一般为用户按下按键且不松开, 此时repeatCount将返回次数。每个物理按键对应各自的按键值(keycode)以实现不同 的功能。

多模输入

多模输入使HarmonyOS的UI控件能够响应多种输入事件,事件来源于用户的按键、点击、 触屏、语音等。提供创建事件能力和获取输入设备信息能力。

多模输入的接口设计是基于多模事件基类(MultimodalEvent),派生出操作事件类 (ManipulationEvent)、按键事件类(KeyEvent)、语音事件(SpeechEvent)等,另 外提供创建事件类和获取输入设备信息类

多模输入类继承图

动画效果

上一篇:小程序的视频和今日推荐


下一篇:动画、过渡