在Hana中添加交互
通过动效设计和交互状态，让你的设计动起来。使用基于事件的触发机制——如鼠标点击或键盘输入——体验你的设计在实际操作中的表现。
状态驱动动画的工作原理
在 Hana 中，状态驱动动画允许你通过“状态”、“事件”和“动作”创建动态交互设计。你可以为对象定义多个状态，并在它们之间切换来实现动画效果，例如根据用户交互改变颜色、位置或尺寸等。
事件与交互
在 Hana 中，事件用于在用户与画布交互时触发对象状态的变化。你可以将事件绑定到元素上，基于用户输入触发如动画切换等操作。
Hana 支持的事件类型
Hana 支持将多种事件绑定到对象上。以下是主要事件概览：
- 开始事件：在场景首次加载时触发动作
- 鼠标事件（向上，向下，点击，悬停）：按下鼠标按钮或在移动设备上触摸时触发动作
- 键盘事件（向上，向下，点击）：按下键盘键时触发动作
- 面向事件：使对象面向光标或移动设备上的触点
- 跟随事件：使对象跟随光标或移动设备上的触点
穿透
你可以在事件面板中通过点击事件标签旁的图标来控制事件的穿透行为：
- 启用穿透：事件会同时触发所有重叠对象（例如点击叠放按钮时，同时触发多个对象上的事件）
- 禁用穿透：只有最上层的对象会响应事件
该功能对于构建分层或嵌套交互设计非常实用。
动画属性
以下属性可通过状态和事件进行动画控制：
- 位置、旋转、尺寸
- 矢量点及矢量网络节点的位置
- 注意：状态切换时，节点数量需保持一致，动画才能正确执行。
- 填充与描边（颜色、透明度）
- 自定义图形编辑（例如布尔运算后形状的变更）
- 图形变换（缩放、重新调整大小等）