#鸿蒙通关秘籍#怎样实现鸿蒙TabBar的点击图标切换和动画效果？

鸿蒙TabBar的图标切换可以通过一个selectedIndex变量来实现，点击后更新该变量值。为实现动画效果，使用offset调整组件的纵向偏移，并通过animation属性设定动画参数。

typescript Column() { Image(this.selectedIndex === this.tabBarIndex ? TABINFO[this.tabBarIndex].selectedIcon : TABINFO[this.tabBarIndex].defaultIcon) .interpolation(ImageInterpolation.High) .size(this.selectedIndex === HOME_TAB_BAR_INDEX && this.selectedIndex === this.tabBarIndex ? { width: $r('app.integer.custom_tab_community_image_size'), height: $r('app.integer.custom_tab_community_image_size') } : { width: $r('app.integer.custom_tab_image_size'), height: $r('app.integer.custom_tab_image_size') }) .offset({ y: (this.selectedIndex === this.tabBarIndex && this.selectedIndex !== COMMUNITY_TAB_BAR_INDEX) ? this.iconOffset : $r('app.integer.custom_tab_common_size_0') }) .animation({ duration: 400, curve: Curve.Ease, iterations: 1, playMode: PlayMode.Normal }) } .width(this.selectedIndex === HOME_TAB_BAR_INDEX && this.selectedIndex === this.tabBarIndex ? $r('app.integer.custom_tab_community_image_size') : $r('app.integer.custom_tab_image_container_size')) .height(this.selectedIndex === HOME_TAB_BAR_INDEX && this.selectedIndex === this.tabBarIndex ? $r('app.integer.custom_tab_community_image_size') : $r('app.integer.custom_tab_image_container_size')) .justifyContent(FlexAlign.Center)