• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16/*
17 * Copyright (C) 2022-2023 Huawei Device Co., Ltd.
18 * Licensed under the MIT License, Version 2.0 (the 'License');
19 * you may not use this file except in compliance with the License.
20 * You may obtain a copy of the License at
21 *
22 *     https://mit-license.org/
23 *
24 * Unless required by applicable law or agreed to in writing, software
25 * distributed under the License is distributed on an 'AS IS' BASIS,
26 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
27 * See the License for the specific language governing permissions and
28 * limitations under the License.
29 */
30
31import lottie from '@ohos/lottie'
32import Logger from '../util/Logger'
33
34const TAG: string = 'Lottie'
35const SELECT_OPACITY: number = 0.5
36const BUTTON_OPACITY: number = 0.8
37
38@Entry
39@Component
40struct Lottie {
41  private settings: RenderingContextSettings = new RenderingContextSettings(true)
42  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
43  private settingsYear: RenderingContextSettings = new RenderingContextSettings(true)
44  private contextYear: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settingsYear)
45  private scroller: Scroller = new Scroller()
46  private animateItem: any = null
47  private animateName: string = 'grunt'
48  private animationResources: string | Resource = $r('app.string.select_please')
49  private controller: TabsController = new TabsController()
50  @State valueS: AnimationStatus = AnimationStatus.Initial
51  @State imagePath: Resource = $r('app.media.play')
52  @State isPlaying: boolean = true
53
54  callbackItem() {
55    Logger.info(TAG, 'grunt loopComplete')
56  }
57
58  build() {
59    Column() {
60      Canvas(this.context)
61        .width('540px')
62        .height('360px')
63        .backgroundColor(Color.Gray)
64        .onDisAppear(() => {
65          lottie.destroy(this.animateName)
66        })
67        .margin({ top: 10 })
68
69      Canvas(this.contextYear)
70        .width('540px')
71        .height('360px')
72        .backgroundColor(Color.Gray)
73        .onReady(() => {
74          let animation = lottie.loadAnimation({
75            container: this.contextYear,
76            renderer: 'canvas',
77            loop: true,
78            autoplay: true,
79            name: 'year',
80            path: 'common/lottie/data.json',
81          })
82          animation.addEventListener('loopComplete', this.callbackItem)
83        })
84        .onDisAppear(() => {
85          lottie.destroy('year')
86        })
87        .margin({ bottom: 10 })
88
89      Scroll(this.scroller) {
90        Column() {
91          Row() {
92            Animator('__lottie_ets')
93
94            Text($r('app.string.select'))
95              .fontSize(16)
96              .fontColor($r('app.color.font_color'))
97              .fontWeight(FontWeight.Medium)
98              .opacity(SELECT_OPACITY)
99
100            Column() {
101              Text(this.animationResources)
102                .fontSize(16)
103                .fontColor($r('app.color.font_color'))
104                .fontWeight(FontWeight.Medium)
105                .width('50%')
106                .textAlign(TextAlign.End)
107            }
108            .id('selectAnimationBtn')
109            .bindMenu([
110              {
111                value: 'grunt动画',
112                action: () => {
113                  this.animateItem = lottie.loadAnimation({
114                    container: this.context,
115                    renderer: 'canvas',
116                    loop: true,
117                    autoplay: true,
118                    name: this.animateName,
119                    path: 'common/lottie/grunt.json',
120                  })
121                  this.animationResources = 'grunt'
122                }
123              },
124              {
125                value: 'year动画',
126                action: () => {
127                  lottie.loadAnimation({
128                    container: this.contextYear,
129                    renderer: 'canvas',
130                    loop: true,
131                    autoplay: true,
132                    name: 'year',
133                    path: 'common/lottie/data.json',
134                  })
135                  this.animationResources = 'year'
136                }
137              },
138            ])
139          }
140          .width('100%')
141          .justifyContent(FlexAlign.SpaceBetween)
142          .backgroundColor('#FFFFFF')
143          .padding(10)
144          .borderRadius(24)
145          .margin({ bottom: 8 })
146
147          Column() {
148            Row() {
149              Column() {
150                Image($r('app.media.suspend'))
151                  .width(30)
152                  .height(30)
153                  .onClick(() => {
154                    this.isPlaying = !this.isPlaying
155                    lottie.togglePause()
156                    if (!this.isPlaying) {
157                      this.imagePath = $r('app.media.suspend')
158                    } else {
159                      this.imagePath = $r('app.media.play')
160                    }
161                  })
162
163                Text($r('app.string.play_pause'))
164                  .fontSize(14)
165                  .fontColor($r('app.color.font_color'))
166                  .fontWeight(FontWeight.Medium)
167                  .opacity(BUTTON_OPACITY)
168                  .margin({ top: 6 })
169                  .fontFamily('Microsoft YaHei')
170              }
171              .id('play')
172              .width('25%')
173
174              Column() {
175                Image($r('app.media.stop_playing'))
176                  .objectFit(ImageFit.Cover)
177                  .width(30)
178                  .height(30)
179                  .onClick(() => {
180                    lottie.stop()
181                    this.isPlaying = false
182                  })
183
184                Text($r('app.string.stop'))
185                  .fontSize(14)
186                  .fontColor($r('app.color.font_color'))
187                  .fontWeight(FontWeight.Medium)
188                  .opacity(BUTTON_OPACITY)
189                  .margin({ top: 6 })
190                  .fontFamily('Microsoft YaHei')
191              }
192              .width('25%')
193              .id('suspend')
194
195              Column() {
196                Image($r('app.media.pause'))
197                  .objectFit(ImageFit.Cover)
198                  .width(30)
199                  .height(30)
200                  .onClick(() => {
201                    lottie.pause()
202                    this.isPlaying = false
203                  })
204
205                Text($r('app.string.pause'))
206                  .fontSize(14)
207                  .fontColor($r('app.color.font_color'))
208                  .fontWeight(FontWeight.Medium)
209                  .opacity(BUTTON_OPACITY)
210                  .margin({ top: 6 })
211                  .fontFamily('Microsoft YaHei')
212              }
213              .width('25%')
214              .id('pause')
215
216              Column() {
217                Image($r('app.media.start'))
218                  .width(30)
219                  .height(30)
220                  .objectFit(ImageFit.Fill)
221                  .onClick(() => {
222                    lottie.play()
223                    this.isPlaying = true
224                  })
225
226                Text($r('app.string.start_play'))
227                  .fontSize(14)
228                  .fontColor($r('app.color.font_color'))
229                  .fontWeight(FontWeight.Medium)
230                  .opacity(BUTTON_OPACITY)
231                  .margin({ top: 6 })
232                  .fontFamily('Microsoft YaHei')
233              }
234              .width('25%')
235              .id('startPlay')
236            }
237
238            Row() {
239              Column() {
240                Image($r('app.media.speed'))
241                  .width(30)
242                  .height(30)
243                  .objectFit(ImageFit.Fill)
244                  .bindMenu([
245                    {
246                      value: '×1',
247                      action: () => {
248                        lottie.setSpeed(1)
249                      }
250                    },
251                    {
252                      value: '×2',
253                      action: () => {
254                        lottie.setSpeed(2)
255                      }
256                    },
257                    {
258                      value: '×3',
259                      action: () => {
260                        lottie.setSpeed(5)
261                      }
262                    }
263                  ])
264
265                Text($r('app.string.speed'))
266                  .fontSize(14)
267                  .fontColor($r('app.color.font_color'))
268                  .fontWeight(FontWeight.Medium)
269                  .opacity(BUTTON_OPACITY)
270                  .margin({ top: 6 })
271                  .fontFamily('Microsoft YaHei')
272              }
273              .width('25%')
274              .id('speed')
275
276              Column() {
277                Image($r('app.media.forward'))
278                  .width(30)
279                  .height(30)
280                  .objectFit(ImageFit.Fill)
281                  .bindMenu([
282                    {
283                      value: '正向',
284                      action: () => {
285                        lottie.setDirection(1)
286                      }
287                    },
288                    {
289                      value: '反向',
290                      action: () => {
291                        lottie.setDirection(-1)
292                      }
293                    }
294                  ])
295
296                Text($r('app.string.play_order'))
297                  .fontSize(14)
298                  .fontColor($r('app.color.font_color'))
299                  .fontWeight(FontWeight.Medium)
300                  .opacity(BUTTON_OPACITY)
301                  .margin({ top: 6 })
302                  .fontFamily('Microsoft YaHei')
303              }
304              .width('25%')
305              .id('playOrder')
306
307              Column() {
308                Image($r('app.media.ic_public_delete_filled'))
309                  .width(30)
310                  .height(30)
311                  .onClick(() => {
312                    lottie.destroy()
313                  })
314
315                Text($r('app.string.destruction_animation'))
316                  .fontSize(14)
317                  .fontColor($r('app.color.font_color'))
318                  .fontWeight(FontWeight.Medium)
319                  .opacity(BUTTON_OPACITY)
320                  .margin({ top: 6 })
321                  .fontFamily('Microsoft YaHei')
322              }
323              .width('25%')
324              .id('destroyAnimation')
325            }
326            .width('100%')
327            .justifyContent(FlexAlign.Start)
328          }
329          .justifyContent(FlexAlign.SpaceAround)
330          .backgroundColor('#FFFFFF')
331          .padding(10)
332          .borderRadius(24)
333          .margin({ bottom: 8 })
334
335          Column() {
336            Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
337              TabContent() {
338                Column() {
339                  Text($r('app.string.display_effect'))
340                    .fontSize(14)
341                    .margin({ top: 10, bottom: 10 })
342
343                  Column() {
344                    Row() {
345                      Column() {
346                        Image($r('app.media.start_stop'))
347                          .width(30)
348                          .height(30)
349                          .onClick(() => {
350                            lottie.togglePause(this.animateName)
351                          })
352
353                        Text($r('app.string.play_pause'))
354                          .fontSize(14)
355                          .fontColor($r('app.color.font_color'))
356                          .fontWeight(FontWeight.Medium)
357                          .opacity(BUTTON_OPACITY)
358                          .margin({ top: 6 })
359                          .fontFamily('Microsoft YaHei')
360                      }
361                      .width('33%')
362                      .id('stop')
363
364                      Column() {
365                        Image($r('app.media.stop_playing'))
366                          .width(30)
367                          .height(30)
368                          .onClick(() => {
369                            lottie.stop(this.animateName)
370                          })
371
372                        Text($r('app.string.stop'))
373                          .fontSize(14)
374                          .fontColor($r('app.color.font_color'))
375                          .fontWeight(FontWeight.Medium)
376                          .opacity(BUTTON_OPACITY)
377                          .margin({ top: 6 })
378                          .fontFamily('Microsoft YaHei')
379                      }.width('33%')
380
381                      Column() {
382                        Image($r('app.media.pause'))
383                          .width(30)
384                          .height(30)
385                          .onClick(() => {
386                            lottie.pause(this.animateName)
387                          })
388
389                        Text($r('app.string.pause'))
390                          .fontSize(14)
391                          .fontColor($r('app.color.font_color'))
392                          .fontWeight(FontWeight.Medium)
393                          .opacity(BUTTON_OPACITY)
394                          .margin({ top: 6 })
395                          .fontFamily('Microsoft YaHei')
396                      }
397                      .width('33%')
398                    }
399
400                    Row() {
401                      Column() {
402                        Image($r('app.media.start'))
403                          .width(30)
404                          .height(30)
405                          .onClick(() => {
406                            lottie.play(this.animateName)
407                          })
408
409                        Text($r('app.string.start_play'))
410                          .fontSize(14)
411                          .fontColor($r('app.color.font_color'))
412                          .fontWeight(FontWeight.Medium)
413                          .opacity(BUTTON_OPACITY)
414                          .margin({ top: 6 })
415                          .fontFamily('Microsoft YaHei')
416                      }
417                      .width('33%')
418
419                      Column() {
420                        Image($r('app.media.speed'))
421                          .width(30)
422                          .height(30)
423                          .onClick(() => {
424                            lottie.setSpeed(2, this.animateName)
425                          })
426
427                        Text($r('app.string.double_speed'))
428                          .fontSize(14)
429                          .fontColor($r('app.color.font_color'))
430                          .fontWeight(FontWeight.Medium)
431                          .opacity(BUTTON_OPACITY)
432                          .margin({ top: 6 })
433                          .fontFamily('Microsoft YaHei')
434                      }
435                      .width('33%')
436
437                      Column() {
438                        Image($r('app.media.forward'))
439                          .width(30)
440                          .height(30)
441                          .onClick(() => {
442                            lottie.setDirection(-1, this.animateName)
443                          })
444
445                        Text($r('app.string.reverse_playback'))
446                          .fontSize(14)
447                          .fontColor($r('app.color.font_color'))
448                          .fontWeight(FontWeight.Medium)
449                          .opacity(BUTTON_OPACITY)
450                          .margin({ top: 6 })
451                          .fontFamily('Microsoft YaHei')
452                      }
453                      .width('33%')
454                    }
455                  }
456                  .justifyContent(FlexAlign.SpaceAround)
457                  .height('65%')
458                }
459                .width('100%')
460                .height('100%')
461                .borderRadius(24)
462                .backgroundColor($r('app.color.tab_content_background'))
463              }
464              .tabBar($r('app.string.play_pause'))
465
466              TabContent() {
467                Column() {
468                  Text($r('app.string.display_effect_this'))
469                    .fontSize(14)
470                    .margin({ top: 10, bottom: 10 })
471                  Column() {
472
473                    Row() {
474                      Column() {
475                        Image($r('app.media.start_stop'))
476                          .width(30)
477                          .height(30)
478                          .onClick(() => {
479                            if (this.animateItem !== null) {
480                              this.animateItem.togglePause()
481                            }
482                          })
483
484                        Text($r('app.string.play_pause'))
485                          .fontSize(14)
486                          .fontColor($r('app.color.font_color'))
487                          .fontWeight(FontWeight.Medium)
488                          .opacity(BUTTON_OPACITY)
489                          .margin({ top: 6 })
490                          .fontFamily('Microsoft YaHei')
491                      }
492                      .width('33%')
493
494                      Column() {
495                        Image($r('app.media.stop_playing'))
496                          .width(30)
497                          .height(30)
498                          .onClick(() => {
499                            if (this.animateItem !== null) {
500                              this.animateItem.stop()
501                            }
502                          })
503
504                        Text($r('app.string.stop'))
505                          .fontSize(14)
506                          .fontColor($r('app.color.font_color'))
507                          .fontWeight(FontWeight.Medium)
508                          .opacity(BUTTON_OPACITY)
509                          .margin({ top: 6 })
510                          .fontFamily('Microsoft YaHei')
511                      }
512                      .width('33%')
513
514                      Column() {
515                        Image($r('app.media.pause'))
516                          .width(30)
517                          .height(30)
518                          .onClick(() => {
519                            if (this.animateItem !== null) {
520                              this.animateItem.pause()
521                            }
522                          })
523
524                        Text($r('app.string.pause'))
525                          .fontSize(14)
526                          .fontColor($r('app.color.font_color'))
527                          .fontWeight(FontWeight.Medium)
528                          .opacity(BUTTON_OPACITY)
529                          .margin({ top: 6 })
530                          .fontFamily('Microsoft YaHei')
531                      }
532                      .width('33%')
533                    }
534
535                    Row() {
536                      Column() {
537                        Image($r('app.media.start'))
538                          .width(30)
539                          .height(30)
540                          .onClick(() => {
541                            if (this.animateItem !== null) {
542                              this.animateItem.play()
543                            }
544                          })
545                        Text($r('app.string.start_play'))
546                          .fontSize(14)
547                          .fontColor($r('app.color.font_color'))
548                          .fontWeight(FontWeight.Medium)
549                          .opacity(BUTTON_OPACITY)
550                          .margin({ top: 6 })
551                          .fontFamily('Microsoft YaHei')
552                      }
553                      .width('33%')
554
555                      Column() {
556                        Image($r('app.media.speed'))
557                          .width(30)
558                          .height(30)
559                          .onClick(() => {
560                            if (this.animateItem !== null) {
561                              this.animateItem.setSpeed(5)
562                            }
563                          })
564
565                        Text($r('app.string.five_speed'))
566                          .fontSize(14)
567                          .fontColor($r('app.color.font_color'))
568                          .fontWeight(FontWeight.Medium)
569                          .opacity(BUTTON_OPACITY)
570                          .margin({ top: 6 })
571                          .fontFamily('Microsoft YaHei')
572                      }
573                      .width('33%')
574
575                      Column() {
576                        Image($r('app.media.forward'))
577                          .width(30)
578                          .height(30)
579                          .onClick(() => {
580                            if (this.animateItem !== null) {
581                              this.animateItem.setDirection(-1)
582                            }
583                          })
584
585                        Text($r('app.string.reverse_playback'))
586                          .fontSize(14)
587                          .fontColor($r('app.color.font_color'))
588                          .fontWeight(FontWeight.Medium)
589                          .opacity(BUTTON_OPACITY)
590                          .margin({ top: 6 })
591                          .fontFamily('Microsoft YaHei')
592                      }
593                      .width('33%')
594                    }
595                  }
596                  .justifyContent(FlexAlign.SpaceEvenly)
597                  .height('65%')
598                }
599                .borderRadius(24)
600                .width('100%')
601                .height('100%')
602                .backgroundColor($r('app.color.tab_content_background'))
603              }
604              .tabBar($r('app.string.play_pause'))
605
606              TabContent() {
607                Column() {
608                  Row() {
609                    Column() {
610                      Image($r('app.media.loop'))
611                        .width(30)
612                        .height(30)
613                        .onClick(() => {
614                          if (this.animateItem !== null) {
615                            this.animateItem.setSegment(20, 30)
616                          }
617                        })
618
619                      Text($r('app.string.fragment_cycle'))
620                        .fontSize(14)
621                        .fontColor($r('app.color.font_color'))
622                        .fontWeight(FontWeight.Medium)
623                        .opacity(BUTTON_OPACITY)
624                        .margin({ top: 6 })
625                        .fontFamily('Microsoft YaHei')
626                    }
627                    .width('50%')
628
629                    Column() {
630                      Image($r('app.media.loop'))
631                        .width(30)
632                        .height(30)
633                        .onClick(() => {
634                          if (this.animateItem !== null) {
635                            this.animateItem.playSegments([[5, 15], [20, 30]], true)
636                          }
637                        })
638
639                      Text($r('app.string.play_segments'))
640                        .padding({ left: 5, right: 5 })
641                        .fontSize(14)
642                        .fontColor($r('app.color.font_color'))
643                        .fontWeight(FontWeight.Medium)
644                        .opacity(BUTTON_OPACITY)
645                        .margin({ top: 6 })
646                        .fontFamily('Microsoft YaHei')
647                    }
648                    .width('50%')
649                  }
650
651                  Row() {
652                    Column() {
653                      Image($r('app.media.reset'))
654                        .width(30)
655                        .height(30)
656                        .bindMenu([
657                          {
658                            value: '即时生效播放',
659                            action: (() => {
660                              if (this.animateItem !== null) {
661                                this.animateItem.resetSegments(true)
662                              }
663                            })
664                          },
665                          {
666                            value: '延迟到下轮循环播放再生效',
667                            action: (() => {
668                              if (this.animateItem !== null) {
669                                this.animateItem.resetSegments(false)
670                              }
671                            })
672                          }
673                        ])
674
675                      Text($r('app.string.reset_play'))
676                        .fontSize(14)
677                        .fontColor($r('app.color.font_color'))
678                        .fontWeight(FontWeight.Medium)
679                        .opacity(BUTTON_OPACITY)
680                        .margin({ top: 6 })
681                        .fontFamily('Microsoft YaHei')
682                    }
683                    .width('50%')
684
685                    Column() {
686                      Image($r('app.media.subframe'))
687                        .width(30)
688                        .height(30)
689                        .onClick(() => {
690                          if (this.animateItem !== null) {
691                            this.animateItem.setSubframe(false)
692                          }
693                        })
694
695                      Text($r('app.string.float_integer'))
696                        .fontSize(14)
697                        .fontColor($r('app.color.font_color'))
698                        .fontWeight(FontWeight.Medium)
699                        .opacity(BUTTON_OPACITY)
700                        .margin({ top: 6 })
701                        .fontFamily('Microsoft YaHei')
702                    }
703                    .width('50%')
704                  }
705                }
706                .justifyContent(FlexAlign.SpaceEvenly)
707                .borderRadius(24)
708                .width('100%')
709                .height('100%')
710                .backgroundColor($r('app.color.tab_content_background'))
711              }
712              .tabBar($r('app.string.cycle'))
713
714              TabContent() {
715                Column() {
716                  Row() {
717                    Column() {
718                      Image($r('app.media.destination'))
719                        .width(30)
720                        .height(30)
721                        .bindMenu([
722                          {
723                            value: '250帧时停止',
724                            action: (() => {
725                              if (this.animateItem !== null) {
726                                this.animateItem.goToAndStop(250, true)
727                              }
728                            })
729                          },
730                          {
731                            value: '5000ms时停止',
732                            action: (() => {
733                              if (this.animateItem !== null) {
734                                this.animateItem.goToAndStop(5000, false)
735                              }
736                            })
737                          }
738                        ])
739                      Text($r('app.string.animation_stop'))
740                        .fontSize(14)
741                        .fontColor($r('app.color.font_color'))
742                        .fontWeight(FontWeight.Medium)
743                        .opacity(BUTTON_OPACITY)
744                        .margin({ top: 6 })
745                        .fontFamily('Microsoft YaHei')
746                    }
747                    .width('50%')
748
749                    Column() {
750                      Image($r('app.media.begin'))
751                        .width(30)
752                        .height(30)
753                        .bindMenu([
754                          {
755                            value: '从250帧开始播放',
756                            action: (() => {
757                              if (this.animateItem !== null) {
758                                this.animateItem.goToAndPlay(250, true);
759                              }
760                            })
761                          },
762                          {
763                            value: '从12000ms开始播放',
764                            action: (() => {
765                              if (this.animateItem !== null) {
766                                this.animateItem.goToAndPlay(12000, false)
767                              }
768                            })
769                          }
770                        ])
771
772                      Text($r('app.string.animation_play'))
773                        .fontSize(14)
774                        .fontColor($r('app.color.font_color'))
775                        .fontWeight(FontWeight.Medium)
776                        .opacity(BUTTON_OPACITY)
777                        .margin({ top: 6 })
778                        .fontFamily('Microsoft YaHei')
779                    }
780                    .width('50%')
781                  }
782
783                  Row() {
784                    Column() {
785                      Image($r('app.media.refresh'))
786                        .width(30)
787                        .height(30)
788                        .onClick(() => {
789                          if (this.animateItem !== null) {
790                            this.animateItem.resize()
791                          }
792                        })
793
794                      Text($r('app.string.refresh_animation'))
795                        .fontSize(14)
796                        .fontColor($r('app.color.font_color'))
797                        .fontWeight(FontWeight.Medium)
798                        .opacity(BUTTON_OPACITY)
799                        .margin({ top: 6 })
800                        .fontFamily('Microsoft YaHei')
801                    }
802                    .width('50%')
803
804                    Column() {
805                      Image($r('app.media.destory'))
806                        .width(30)
807                        .height(30)
808                        .onClick(() => {
809                          if (this.animateItem !== null) {
810                            this.animateItem.destroy(this.animateName)
811                          }
812                        })
813
814                      Text($r('app.string.destruction_grunt_animation'))
815                        .fontSize(14)
816                        .fontColor($r('app.color.font_color'))
817                        .fontWeight(FontWeight.Medium)
818                        .opacity(BUTTON_OPACITY)
819                        .margin({ top: 6 })
820                        .fontFamily('Microsoft YaHei')
821                    }
822                    .width('50%')
823                  }
824                }
825                .justifyContent(FlexAlign.SpaceEvenly)
826                .borderRadius(24)
827                .width('100%')
828                .height('100%')
829                .backgroundColor($r('app.color.tab_content_background'))
830              }
831              .tabBar($r('app.string.playback_position'))
832
833              TabContent() {
834                Column() {
835                  Row() {
836                    Column() {
837                      Image($r('app.media.addevent'))
838                        .width(30)
839                        .height(30)
840                        .onClick(() => {
841                          if (this.animateItem !== null) {
842                            this.animateItem.addEventListener('loopComplete', this.callbackItem)
843                          }
844                        })
845
846                      Text($r('app.string.add_listen'))
847                        .fontSize(14)
848                        .fontColor($r('app.color.font_color'))
849                        .fontWeight(FontWeight.Medium)
850                        .opacity(BUTTON_OPACITY)
851                        .margin({ top: 6 })
852                        .fontFamily('Microsoft YaHei')
853                    }
854                    .width('50%')
855
856                    Column() {
857                      Image($r('app.media.delete'))
858                        .width(30)
859                        .height(30)
860                        .onClick(() => {
861                          if (this.animateItem !== null) {
862                            this.animateItem.stop()
863                          }
864                        })
865
866                      Text($r('app.string.delete_listen'))
867                        .fontSize(14)
868                        .fontColor($r('app.color.font_color'))
869                        .fontWeight(FontWeight.Medium)
870                        .opacity(BUTTON_OPACITY)
871                        .margin({ top: 6 })
872                        .fontFamily('Microsoft YaHei')
873                    }
874                    .width('50%')
875                  }
876
877                  Row() {
878                    Column() {
879                      Image($r('app.media.addall'))
880                        .width(30)
881                        .height(30)
882                        .onClick(() => {
883                          if (this.animateItem !== null) {
884                            this.animateItem.pause()
885                          }
886                        })
887
888                      Text($r('app.string.triggers_all_callbacks'))
889                        .padding({ left: 5, right: 5 })
890                        .fontSize(14)
891                        .fontColor($r('app.color.font_color'))
892                        .fontWeight(FontWeight.Medium)
893                        .opacity(BUTTON_OPACITY)
894                        .margin({ top: 6 })
895                        .fontFamily('Microsoft YaHei')
896                    }
897                    .width('50%')
898
899                    Column() {
900                      Image($r("app.media.delete_all"))
901                        .width(30)
902                        .height(30)
903                        .onClick(() => {
904                          if (this.animateItem !== null) {
905                            this.animateItem.play()
906                          }
907                        })
908
909                      Text($r('app.string.delete_all_Listen'))
910                        .fontSize(14)
911                        .fontColor($r('app.color.font_color'))
912                        .fontWeight(FontWeight.Medium)
913                        .opacity(BUTTON_OPACITY)
914                        .margin({ top: 6 })
915                        .fontFamily('Microsoft YaHei')
916                    }
917                    .width('50%')
918                  }
919                }
920                .justifyContent(FlexAlign.SpaceEvenly)
921                .borderRadius(24)
922                .width('100%')
923                .height('100%')
924                .backgroundColor($r('app.color.tab_content_background'))
925              }
926              .tabBar($r('app.string.listen'))
927            }
928            .vertical(true)
929            .scrollable(true)
930            .barMode(BarMode.Fixed)
931            .barWidth(100)
932            .barHeight(230)
933            .animationDuration(0)
934            .onChange((index: number) => {
935              Logger.info(TAG, index.toString())
936            })
937            .borderRadius(24)
938            .backgroundColor('#FFFFFF')
939          }
940          .width('100%')
941          .height(230)
942          .margin({ bottom: 8 })
943        }
944      }
945      .scrollBar(BarState.Off)
946      .height('100%')
947      .padding({ left: 10, right: 10, bottom: '720px' })
948    }
949    .alignItems(HorizontalAlign.Center)
950    .justifyContent(FlexAlign.Center)
951    .backgroundColor('#F1F3F5')
952    .width('100%')
953    .height('100%')
954  }
955}