杭州 网站设计制作,百度的官方网站,网站建设 论坛,买网站账号做推广背景
项目中Tabs的使用可以说是特别的频繁#xff0c;但是官方提供的Tabs使用起来#xff0c;存在tab选项卡切换动画滞后的问题。 原始动画无法满足产品的UI需求#xff0c;因此#xff0c;这篇文章将实现下面页面滑动#xff0c;tab选项卡实时滑动的动画效果。
实现逻…背景
项目中Tabs的使用可以说是特别的频繁但是官方提供的Tabs使用起来存在tab选项卡切换动画滞后的问题。 原始动画无法满足产品的UI需求因此这篇文章将实现下面页面滑动tab选项卡实时滑动的动画效果。
实现逻辑
需求讲解
需要实现固定宽度下放下6个选项卡。在没有选择时宽度均匀分配选中时显示图标并且增加宽度。实现下方内容区域滑动时上面选项卡实时跳动。实现动画效果使整体操作更加流畅。
实现思路
1. 选项卡
选项卡使用Row布局组件layoutWeight属性来实现平均布局。通过选项卡的选择索引来实现是否选中判断。选中时layoutWeight值为1.5没有选中时layoutWeight值为1.使用animation属性只要layoutWeight值变化时可以触发动画。在外包裹的布局容器中添加onAreaChange事件用来计算整体Tab组件的宽度。 Row() {Text(name).fontSize(16).fontWeight(this.SelectedTabIndex index ? FontWeight.Bold : FontWeight.Normal).textAlign(TextAlign.Center).animation({ duration: 300 })Image($r(app.media.send)).width(14).height(14).margin({ left: 2 }).visibility(this.SelectedTabIndex index ? Visibility.Visible : Visibility.None).animation({ duration: 300 })}.justifyContent(FlexAlign.Center).layoutWeight(this.SelectedTabIndex index ? 1.5 : 1).animation({ duration: 300 })2. 定位器
使用Rect定义背景的形状和颜色Stack布局position属性实现定位器的移动。position属性中通过Left值的变化来实现Rect的移动。但是在swiper的滑动中会出现滑动一点然后松开的情况因此需要两个值同时在实现中间的移动过程。 Stack() {Rect().height(30).stroke(Color.Black).radius(10).width(this.FirstWidth).fill(#bff9f2).position({left: this.IndicatorLeftOffset this.IndicatorOffset,bottom: 0}).animation({ duration: 300, curve: Curve.LinearOutSlowIn })}.width(100%).alignRules({center: { anchor: Tabs, align: VerticalAlign.Center }})3.主要内容区
使用Swiper组件加载对应的组件这里需要注意的是Demo没有考虑到内容比较多的优化方案可以设置懒加载方案来实现性能的提升。onAnimationStart事件实现监测控件是向左移动还是向右移动并且修改IndicatorLeftOffset偏移值。onAnimationEnd事件将中间移动过程值IndicatorOffset恢复成0。onGestureSwipe事件监测组件的实时滑动这个事件在onAnimationStart和onAnimationEnd事件之前执行执行完后才会执行onAnimationStart事件。因此这个方法需要实时修改定位器的偏移数值。偏移数值是通过swiper的移动数值和整体宽度的比例方式进行计算松手后的偏移方向由onAnimationStart和onAnimationEnd事件来确定最终的距离
Swiper(this.SwiperController) {ForEach(this.TabNames, (name: string, index: number) {Column() {Text(${name} - ${index}).fontSize(24).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).height(100%).width(100%)})}.onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) {if (targetIndex index) {this.IndicatorLeftOffset this.OtherWidth;} else if (targetIndex index) {this.IndicatorLeftOffset - this.OtherWidth;}this.IndicatorOffset 0this.SelectedTabIndex targetIndex}).onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) {this.IndicatorOffset 0}).onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) {let move: number this.GetOffset(extraInfo.currentOffset);//这里需要限制边缘情况if ((this.SelectedTabIndex 0 extraInfo.currentOffset 0) ||(this.SelectedTabIndex this.TabNames.length - 1 extraInfo.currentOffset 0)) {return;}this.IndicatorOffset extraInfo.currentOffset 0 ? move : -move;}).onAreaChange((oldValue: Area, newValue: Area) {let width newValue.width.valueOf() as number;this.SwiperWidth width;}).curve(Curve.LinearOutSlowIn).loop(false).indicator(false).width(100%).id(MainContext).alignRules({top: { anchor: Tabs, align: VerticalAlign.Bottom },bottom: { anchor: __container__, align: VerticalAlign.Bottom }})代码文件
里面涉及到资源的小图标可以自己区定义的文章就不提供了。
Entry
ComponentV2
struct Index {/*** 标头名称集合*/Local TabNames: string[] [飞机, 铁路, 自驾, 地铁, 公交, 骑行]/*** Tab选择索引*/Local SelectedTabIndex: number 0/*** 标点移动距离*/Local IndicatorLeftOffset: number 0/*** 标点在swiper的带动下移动的距离*/Local IndicatorOffset: number 0/*** 第一个宽度*/Local FirstWidth: number -1/*** 其他的宽度*/Local OtherWidth: number -1/*** Swiper控制器*/Local SwiperController: SwiperController new SwiperController()/*** Swiper容器宽度*/Local SwiperWidth: number 0build() {RelativeContainer() {Stack() {Rect().height(30).stroke(Color.Black).radius(10).width(this.FirstWidth).fill(#bff9f2).position({left: this.IndicatorLeftOffset this.IndicatorOffset,bottom: 0}).animation({ duration: 300, curve: Curve.LinearOutSlowIn })}.width(100%).alignRules({center: { anchor: Tabs, align: VerticalAlign.Center }})Row() {ForEach(this.TabNames, (name: string, index: number) {Row() {Text(name).fontSize(16).fontWeight(this.SelectedTabIndex index ? FontWeight.Bold : FontWeight.Normal).textAlign(TextAlign.Center).animation({ duration: 300 })Image($r(app.media.send)).width(14).height(14).margin({ left: 2 }).visibility(this.SelectedTabIndex index ? Visibility.Visible : Visibility.None).animation({ duration: 300 })}.justifyContent(FlexAlign.Center).layoutWeight(this.SelectedTabIndex index ? 1.5 : 1).animation({ duration: 300 }).onClick(() {this.SelectedTabIndex index;this.SwiperController.changeIndex(index, false);animateTo({ duration: 500, curve: Curve.LinearOutSlowIn }, () {this.IndicatorLeftOffset this.OtherWidth * index;})})})}.width(100%).height(30).id(Tabs).onAreaChange((oldValue: Area, newValue: Area) {let tabWidth newValue.width.valueOf() as number;this.FirstWidth 1.5 * tabWidth / (this.TabNames.length 0.5);this.OtherWidth tabWidth / (this.TabNames.length 0.5);})Swiper(this.SwiperController) {ForEach(this.TabNames, (name: string, index: number) {Column() {Text(${name} - ${index}).fontSize(24).fontWeight(FontWeight.Bold)}.alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center).height(100%).width(100%)})}.onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) {if (targetIndex index) {this.IndicatorLeftOffset this.OtherWidth;} else if (targetIndex index) {this.IndicatorLeftOffset - this.OtherWidth;}this.IndicatorOffset 0this.SelectedTabIndex targetIndex}).onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) {this.IndicatorOffset 0}).onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) {let move: number this.GetOffset(extraInfo.currentOffset);//这里需要限制边缘情况if ((this.SelectedTabIndex 0 extraInfo.currentOffset 0) ||(this.SelectedTabIndex this.TabNames.length - 1 extraInfo.currentOffset 0)) {return;}this.IndicatorOffset extraInfo.currentOffset 0 ? move : -move;}).onAreaChange((oldValue: Area, newValue: Area) {let width newValue.width.valueOf() as number;this.SwiperWidth width;}).curve(Curve.LinearOutSlowIn).loop(false).indicator(false).width(100%).id(MainContext).alignRules({top: { anchor: Tabs, align: VerticalAlign.Bottom },bottom: { anchor: __container__, align: VerticalAlign.Bottom }})}.height(100%).width(100%).padding(10)}/*** 需要注意的点,当前方法仅计算偏移值不带方向* param swiperOffset* returns*/GetOffset(swiperOffset: number): number {let swiperMoveRatio: number Math.abs(swiperOffset / this.SwiperWidth);let tabMoveValue: number swiperMoveRatio 1 ? this.OtherWidth : this.OtherWidth * swiperMoveRatio;return tabMoveValue;}
}总结
这里实现了新的Tab选项卡的定义。但是没有进行高度封装想法是方便读者理解组件的使用逻辑而不是直接提供给读者进行调用。希望这篇文章可以帮助到你~~
