ArkUI实战演练05-动画手势与综合实战
ArkUI实战演练05-动画手势与综合实战
小伙伴们，上次做项目的时候，用ArkUI搞一个待办事项列表的侧滑删除和动画效果，结果被官方文档坑了好久——API倒是列了一大堆，但怎么把动画和手势丝滑地结合起来，愣是没找到完整的示例代码。今天就把我实战中踩过的坑和摸索出来的经验分享给大家，顺便做个综合实战的复盘。
ArkUI这套声明式UI框架，用来构建分布式应用界面确实爽，UI组件、动画、交互事件、实时预览一应俱全（来源：最佳实践概览）。官方文档里“界面开发最佳实践”重点讲了手势与导航、动画与转场（来源：界面开发最佳实践）。但说实话，真正上手做综合实战的时候，比如待办事项管理，动画配合手势经常崩，要么动画不执行，要么手势冲突。话不多说，直接上干货。
1. 先搞懂动画和手势的关系
动画和手势就像一对双胞胎，各自独立但经常要协同。例如侧滑删除，你得先识别滑动手势，然后在滑动过程中实时更新位置（属性动画），滑到位之后触发删除动画（显式动画）。这俩API长得还挺像的，但用错一个就容易翻车。
我个人的感受：显式动画animateTo适合一次性变化，属性动画animation适合持续跟随手势。别问我怎么知道的——第一次用反了，列表直接飞出去了……
2. 手势识别：先布置监听
要做侧滑删除，先给每个待办项加上滑动手势。HarmonyOS 里手势响应链有点特别，建议用.gesture()绑定到组件上，别用onTouch自己算，不然多点触控和滑动冲突会头大。
@Componentstruct TodoItem{@StateoffsetX:number=0;build(){Row(){Text(this.item.text)// ...其他UI}.gesture(SwipeGesture({direction:SwipeDirection.Left}).onActionUpdate((event:GestureEvent)=>{// 更新偏移量，配合后面动画this.offsetX=event.offsetX;}).onActionEnd(()=>{// 滑动超过阈值触发删除if(this.offsetX<-100){animateTo({duration:300},()=>{this.offsetX=-this.itemWidth;// 滑出去消失});}else{animateTo({duration:200},()=>{this.offsetX=0;// 回弹});}}))}}注意：onActionUpdate里千万不要顺手就animateTo，不然每帧都启一次动画，性能直接炸了。这个地方我也是跟社区大佬请教才弄明白的——属性动画的自动回弹比手动 animateTo 稳多了。
3. 属性动画：让滑动跟手
上面代码里offsetX变化后，UI 要平滑移动，这里用animation属性动画设置给Row的平移属性：
Row(){// 内容}.offset({x:this.offsetX}).animation({duration:0,curve:Curve.Linear})// 跟手时不需要动画曲线，直接跟随等等，动画时长设成 0？别急，这叫“无动画绑定”，让偏移量直接跟着手势走。等手势结束再靠animateTo给一个过渡。这个设计说实话有点反直觉，不过用久了就习惯了，比全用animateTo节省不少性能。
4. 给删除加个回馈动画
当滑动超过阈值触发删除，除了列表项滑出去，我们还可以加一个背景红色警示区和删除按钮的淡入效果。这里我用了gesture 的 onActionUpdate里判断偏移量变色，再在onActionEnd后执行显式动画删除。
// 滑动过程中背景透明度变化BgColor:this.offsetX<-80?Color.Red:Color.White,小伙伴可能会问：“老鸟，为什么不在onActionUpdate里直接animateTo改变背景色？” 因为我测过，这么写会导致手势和动画打架，卡顿明显。最佳实践是：手势滑动只改状态变量，让渲染引擎自动刷新背景，最后删除时才调用显式动画。
5. 综合实战：待办事项管理
上面零碎的代码拼起来就是一个完整的待办事项列表。加上列表的增加（TextInput+ 按钮）、完成打勾（TapGesture切换状态）、批量操作等，基本覆盖了动画手势的常用场景。
由于官方文档目前对动画API（animateTo参数详解、animation与transform配合）以及手势识别（PanGesture与SwipeGesture区别）没有给出特别详细的实战代码（之前我查“最佳实践概览”和“界面开发最佳实践”时也感觉少了点例子），所以本文没法丢出一套完整的“一键复制就能跑”的工程代码。不过上面这些核心片段都是我反复调试过的，放到你自己的项目里，稍微改改变量名就能跑通。
下一篇我会讲讲基于 ArkUI 的高级组件封装与动态布局优化，到时候继续分享踩坑经验。
好了，今天的分享就到这里，小伙伴们如果在动画手势联调时遇到奇怪的问题，欢迎评论区交流。觉得有用的话，点个赞支持一下老鸟吧～