Commit 92c31301 authored by Seaborn Lee's avatar Seaborn Lee

style: 播放器

parent eff49446
import {Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {
Label,
MySprite, tweenChange,
} from './Unit';
import {Label, MySprite, tweenChange,} from './Unit';
import {res, resAudio} from './resources';
import {Subject} from 'rxjs';
......@@ -488,6 +484,8 @@ export class PlayComponent implements OnInit, OnDestroy {
initView() {
this.initBg();
this.initBoard();
this.initAudioPlayer();
// initBoard();
// initAudioPlayer();
......@@ -710,5 +708,76 @@ export class PlayComponent implements OnInit, OnDestroy {
}
private initAudioPlayer() {
const audioPlayer = this.createAudioPlayer();
audioPlayer.x = 1200;
audioPlayer.y = 100;
this.renderArr.push(audioPlayer);
}
private createAudioPlayer() {
const audioPlayer = new MySprite();
audioPlayer.addChild(this.createPlayPauseButton());
const progressBar = this.createProgressBar();
progressBar.x = 80;
progressBar.y = 20;
audioPlayer.addChild(progressBar);
// addCurrentTime();
// addTotalTime();
return audioPlayer;
}
private createPlayPauseButton() {
const button = this.createSprite('btn_play');
const btnPause = new MySprite();
btnPause.init(this.images.get('btn_pause'));
this.hide(btnPause);
button.addChild(btnPause);
return button;
}
private createSprite(key: string) {
const sprite = new MySprite();
sprite.init(this.images.get(key));
return sprite;
}
private hide(element: MySprite) {
element.alpha = 0;
}
private createProgressBar() {
const container = new MySprite();
const progressBarBg = this.createSprite('progressbar_bg');
progressBarBg.anchorX = 0;
const progressBarPlayed = this.createSprite('progressbar_played');
progressBarPlayed.anchorX = 0;
progressBarPlayed.scaleX = 0;
const currentTime = this.createTime();
currentTime.text = '0:00';
currentTime.x = -10;
currentTime.y = -35;
const totalTime = this.createTime();
totalTime.text = '1:24';
totalTime.refreshSize();
totalTime.x = progressBarBg.width - totalTime.width;
totalTime.y = currentTime.y;
container.addChild(progressBarBg);
container.addChild(progressBarPlayed);
container.addChild(this.createSprite('btn_current_position'));
container.addChild(currentTime)
container.addChild(totalTime)
return container;
}
private createTime() {
const label = new Label();
label.fontSize = 28;
label.fontColor = '#FFFFFF';
return label;
}
}
......@@ -2,6 +2,11 @@ const res = [
['bg', "assets/play/bg.jpg"],
['board', "assets/play/board.png"],
['btn_play', "assets/play/btn_play.png"],
['btn_pause', "assets/play/btn_pause.png"],
['btn_current_position', "assets/play/btn_current_position.png"],
['progressbar_bg', "assets/play/progressbar_bg.png"],
['progressbar_played', "assets/play/progressbar_played.png"],
['btn_left', "assets/play/btn_left.png"],
['btn_right', "assets/play/btn_right.png"],
// ['text_bg', "assets/play/text_bg.png"],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment