ArkUI实战演练05-动画手势与综合实战小伙伴们上次做项目的时候用ArkUI搞一个待办事项列表的侧滑删除和动画效果结果被官方文档坑了好久——API倒是列了一大堆但怎么把动画和手势丝滑地结合起来愣是没找到完整的示例代码。今天就把我实战中踩过的坑和摸索出来的经验分享给大家顺便做个综合实战的复盘。ArkUI这套声明式UI框架用来构建分布式应用界面确实爽UI组件、动画、交互事件、实时预览一应俱全来源最佳实践概览。官方文档里“界面开发最佳实践”重点讲了手势与导航、动画与转场来源界面开发最佳实践。但说实话真正上手做综合实战的时候比如待办事项管理动画配合手势经常崩要么动画不执行要么手势冲突。话不多说直接上干货。1. 先搞懂动画和手势的关系动画和手势就像一对双胞胎各自独立但经常要协同。例如侧滑删除你得先识别滑动手势然后在滑动过程中实时更新位置属性动画滑到位之后触发删除动画显式动画。这俩API长得还挺像的但用错一个就容易翻车。我个人的感受显式动画animateTo适合一次性变化属性动画animation适合持续跟随手势。别问我怎么知道的——第一次用反了列表直接飞出去了……2. 手势识别先布置监听要做侧滑删除先给每个待办项加上滑动手势。HarmonyOS 里手势响应链有点特别建议用.gesture()绑定到组件上别用onTouch自己算不然多点触控和滑动冲突会头大。Componentstruct TodoItem{StateoffsetX:number0;build(){Row(){Text(this.item.text)// ...其他UI}.gesture(SwipeGesture({direction:SwipeDirection.Left}).onActionUpdate((event:GestureEvent){// 更新偏移量配合后面动画this.offsetXevent.offsetX;}).onActionEnd((){// 滑动超过阈值触发删除if(this.offsetX-100){animateTo({duration:300},(){this.offsetX-this.itemWidth;// 滑出去消失});}else{animateTo({duration:200},(){this.offsetX0;// 回弹});}}))}}注意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切换状态、批量操作等基本覆盖了动画手势的常用场景。由于官方文档目前对动画APIanimateTo参数详解、animation与transform配合以及手势识别PanGesture与SwipeGesture区别没有给出特别详细的实战代码之前我查“最佳实践概览”和“界面开发最佳实践”时也感觉少了点例子所以本文没法丢出一套完整的“一键复制就能跑”的工程代码。不过上面这些核心片段都是我反复调试过的放到你自己的项目里稍微改改变量名就能跑通。下一篇我会讲讲基于 ArkUI 的高级组件封装与动态布局优化到时候继续分享踩坑经验。好了今天的分享就到这里小伙伴们如果在动画手势联调时遇到奇怪的问题欢迎评论区交流。觉得有用的话点个赞支持一下老鸟吧
ArkUI实战演练05-动画手势与综合实战
ArkUI实战演练05-动画手势与综合实战小伙伴们上次做项目的时候用ArkUI搞一个待办事项列表的侧滑删除和动画效果结果被官方文档坑了好久——API倒是列了一大堆但怎么把动画和手势丝滑地结合起来愣是没找到完整的示例代码。今天就把我实战中踩过的坑和摸索出来的经验分享给大家顺便做个综合实战的复盘。ArkUI这套声明式UI框架用来构建分布式应用界面确实爽UI组件、动画、交互事件、实时预览一应俱全来源最佳实践概览。官方文档里“界面开发最佳实践”重点讲了手势与导航、动画与转场来源界面开发最佳实践。但说实话真正上手做综合实战的时候比如待办事项管理动画配合手势经常崩要么动画不执行要么手势冲突。话不多说直接上干货。1. 先搞懂动画和手势的关系动画和手势就像一对双胞胎各自独立但经常要协同。例如侧滑删除你得先识别滑动手势然后在滑动过程中实时更新位置属性动画滑到位之后触发删除动画显式动画。这俩API长得还挺像的但用错一个就容易翻车。我个人的感受显式动画animateTo适合一次性变化属性动画animation适合持续跟随手势。别问我怎么知道的——第一次用反了列表直接飞出去了……2. 手势识别先布置监听要做侧滑删除先给每个待办项加上滑动手势。HarmonyOS 里手势响应链有点特别建议用.gesture()绑定到组件上别用onTouch自己算不然多点触控和滑动冲突会头大。Componentstruct TodoItem{StateoffsetX:number0;build(){Row(){Text(this.item.text)// ...其他UI}.gesture(SwipeGesture({direction:SwipeDirection.Left}).onActionUpdate((event:GestureEvent){// 更新偏移量配合后面动画this.offsetXevent.offsetX;}).onActionEnd((){// 滑动超过阈值触发删除if(this.offsetX-100){animateTo({duration:300},(){this.offsetX-this.itemWidth;// 滑出去消失});}else{animateTo({duration:200},(){this.offsetX0;// 回弹});}}))}}注意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切换状态、批量操作等基本覆盖了动画手势的常用场景。由于官方文档目前对动画APIanimateTo参数详解、animation与transform配合以及手势识别PanGesture与SwipeGesture区别没有给出特别详细的实战代码之前我查“最佳实践概览”和“界面开发最佳实践”时也感觉少了点例子所以本文没法丢出一套完整的“一键复制就能跑”的工程代码。不过上面这些核心片段都是我反复调试过的放到你自己的项目里稍微改改变量名就能跑通。下一篇我会讲讲基于 ArkUI 的高级组件封装与动态布局优化到时候继续分享踩坑经验。好了今天的分享就到这里小伙伴们如果在动画手势联调时遇到奇怪的问题欢迎评论区交流。觉得有用的话点个赞支持一下老鸟吧
