developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhanglun_wd
7ae36926 1 parent 40d6cb83

视频加载中动效

Inline Side-by-side
Showing 2 changed files with 93 additions and 44 deletions
@@ -11,7 +11,9 @@ export struct PlayerProgressView { @@ -11,7 +11,9 @@ export struct PlayerProgressView {
11 @Consume isDragging: boolean 11 @Consume isDragging: boolean
12 @Consume status: number 12 @Consume status: number
13 @State videoDuration: number = this.contentDetailData?.videoInfo?.[0]?.videoDuration || 1 13 @State videoDuration: number = this.contentDetailData?.videoInfo?.[0]?.videoDuration || 1
14 - 14 + @State loadingTop: number = 10
  15 + @State loadingWidth: number | string = 1
  16 + @State showLoading: boolean = false
15 aboutToAppear() { 17 aboutToAppear() {
16 if (this.playerController) { 18 if (this.playerController) {
17 this.playerController.onStatusChange = (status: number) => { 19 this.playerController.onStatusChange = (status: number) => {
@@ -20,55 +22,95 @@ export struct PlayerProgressView { @@ -20,55 +22,95 @@ export struct PlayerProgressView {
20 this.playerController.onSeekDone = (status: number) => { 22 this.playerController.onSeekDone = (status: number) => {
21 this.playerController?.play() 23 this.playerController?.play()
22 } 24 }
  25 +
  26 + this.playerController.onLoaded = (loaded: number) => {
  27 + if(loaded == 1) {
  28 + this.loadingWidth = '95%'
  29 + this.showLoading = true
  30 + } else {
  31 + this.loadingWidth = 1
  32 + this.showLoading = false
  33 + }
  34 + }
23 } 35 }
24 } 36 }
25 37
26 - build() {  
27 - Column() {  
28 - Text() {  
29 - Span(DateTimeUtils.secondToTime(Math.floor(this.progressVal / 100 * this.videoDuration)))  
30 - Span(' / ')  
31 - Span(DateTimeUtils.secondToTime(this.videoDuration))  
32 - }  
33 - .fontSize(24)  
34 - .fontColor(Color.White)  
35 - .fontWeight(600)  
36 - .margin({ bottom: 30 })  
37 - .visibility(this.isDragging ? Visibility.Visible : Visibility.None) 38 + /**
  39 + *
  40 + * loading 动效
  41 + */
  42 + @Builder
  43 + playerLoadingBuilder() {
38 44
39 - Slider({  
40 - value: this.progressVal,  
41 - step: 0.01,  
42 - // style: SliderStyle.OutSet  
43 - })  
44 - .blockColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? $r('app.color.play_block_color') :  
45 - Color.Transparent)  
46 - .trackColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?  
47 - $r('app.color.pause_track_color') : $r('app.color.play_track_color'))  
48 - .selectedColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?  
49 - $r('app.color.pause_selected_color') : $r('app.color.play_selected_color'))  
50 - .trackThickness(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? 4 : 1)  
51 - .blockStyle({  
52 - type: this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? SliderBlockType.IMAGE :  
53 - SliderBlockType.DEFAULT,  
54 - image: $r('app.media.ic_player_block')  
55 - })  
56 - .blockSize({ width: 18, height: 12 })  
57 - .width('100%')  
58 - .height(19)  
59 - .onChange((value: number, mode: SliderChangeMode) => {  
60 - this.progressVal = value  
61 - if (mode === SliderChangeMode.Moving) {  
62 - this.isDragging = true  
63 - }  
64 - if (mode === SliderChangeMode.End) {  
65 - this.isDragging = false 45 + Flex({
  46 + direction: FlexDirection.Row,
  47 + justifyContent: FlexAlign.Center,
  48 + alignItems: ItemAlign.End
  49 + }) {
  50 + Text('')
  51 + .backgroundColor(Color.Gray)
  52 + .width(this.loadingWidth)
  53 + .height(1)
  54 + .animation({ duration: 500, curve: Curve.Ease, iterations: -1, playMode: PlayMode.Normal })
  55 + }
  56 + .width('100%')
  57 + .zIndex(2000)
  58 + .visibility(this.showLoading ? Visibility.Visible: Visibility.Hidden)
  59 + .margin({ bottom: 10 })
  60 + // .markAnchor({ x: 0, y: '100%' })
  61 + }
  62 +
  63 + build() {
  64 + Stack() {
  65 + this.playerLoadingBuilder()
  66 + if(!this.showLoading) {
  67 + Column() {
  68 + Text() {
  69 + Span(DateTimeUtils.secondToTime(Math.floor(this.progressVal / 100 * this.videoDuration)))
  70 + Span(' / ')
  71 + Span(DateTimeUtils.secondToTime(this.videoDuration))
66 } 72 }
67 - this.playerController?.setSeekTime(value, mode);  
68 - console.log('slider onChange:', value, mode) 73 + .fontSize(24)
  74 + .fontColor(Color.White)
  75 + .fontWeight(600)
  76 + .margin({ bottom: 30 })
  77 + .visibility(this.isDragging ? Visibility.Visible : Visibility.None)
  78 +
  79 + Slider({
  80 + value: this.progressVal,
  81 + step: 0.01,
  82 + // style: SliderStyle.OutSet
  83 + })
  84 + .blockColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? $r('app.color.play_block_color') :
  85 + Color.Transparent)
  86 + .trackColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
  87 + $r('app.color.pause_track_color') : $r('app.color.play_track_color'))
  88 + .selectedColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ?
  89 + $r('app.color.pause_selected_color') : $r('app.color.play_selected_color'))
  90 + .trackThickness(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? 4 : 1)
  91 + .blockStyle({
  92 + type: this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? SliderBlockType.IMAGE :
  93 + SliderBlockType.DEFAULT,
  94 + image: $r('app.media.ic_player_block')
  95 + })
  96 + .blockSize({ width: 18, height: 12 })
  97 + .width('100%')
  98 + .height(19)
  99 + .onChange((value: number, mode: SliderChangeMode) => {
  100 + this.progressVal = value
  101 + if (mode === SliderChangeMode.Moving) {
  102 + this.isDragging = true
  103 + }
  104 + if (mode === SliderChangeMode.End) {
  105 + this.isDragging = false
  106 + }
  107 + this.playerController?.setSeekTime(value, mode);
  108 + console.log('slider onChange:', value, mode)
69 109
70 - }) 110 + })
  111 + }
  112 + .visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
  113 + }
71 } 114 }
72 - .visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)  
73 } 115 }
74 } 116 }
@@ -27,6 +27,7 @@ export class WDPlayerController { @@ -27,6 +27,7 @@ export class WDPlayerController {
27 private prepareTime:number = 0; //加载时间 27 private prepareTime:number = 0; //加载时间
28 private currentPlayTime:number = 0; //当前播放时间 28 private currentPlayTime:number = 0; //当前播放时间
29 public onVideoSizeChange?: (width: number, height: number) => void; 29 public onVideoSizeChange?: (width: number, height: number) => void;
  30 + public onLoaded?: (loaded: number) => void;
30 public onTimeUpdate?: (position: number, duration: number) => void; 31 public onTimeUpdate?: (position: number, duration: number) => void;
31 public onVolumeUpdate?: (volume: number) => void; 32 public onVolumeUpdate?: (volume: number) => void;
32 public continue?: () => void; 33 public continue?: () => void;
@@ -86,6 +87,9 @@ export class WDPlayerController { @@ -86,6 +87,9 @@ export class WDPlayerController {
86 if (this.surfaceId) { 87 if (this.surfaceId) {
87 this.avPlayer.surfaceId = this.surfaceId; 88 this.avPlayer.surfaceId = this.surfaceId;
88 } 89 }
  90 + if(this.onLoaded) {
  91 + this.onLoaded(1)
  92 + }
89 93
90 this.avPlayer?.prepare(); 94 this.avPlayer?.prepare();
91 break; 95 break;
@@ -101,6 +105,9 @@ export class WDPlayerController { @@ -101,6 +105,9 @@ export class WDPlayerController {
101 } 105 }
102 break; 106 break;
103 case AVPlayerStatus.PLAYING: 107 case AVPlayerStatus.PLAYING:
  108 + if(this.onLoaded) {
  109 + this.onLoaded(2)
  110 + }
104 this.setBright(); 111 this.setBright();
105 this.status = PlayerConstants.STATUS_START; 112 this.status = PlayerConstants.STATUS_START;
106 this.avPlayer!.videoScaleType = media.VideoScaleType.VIDEO_SCALE_TYPE_FIT 113 this.avPlayer!.videoScaleType = media.VideoScaleType.VIDEO_SCALE_TYPE_FIT