UE4 音乐时长进度条

Posted 2023-05-10

参考技术A 1.创建UMG 添加Slider（用来调节播放进度） 和Text（显示总时长和当前时长）

2. 创建 fnSecondsToText函数用来计算播放时长

3.创建4个变量   Audio（音乐组件） bManualTimeChange（是否滑动） PlayingMovedToPercentage（进度条滑动长度） PlayingSongDuration（音乐总长度）

4.创建三个函数  Fn Setup Track Duration（初始化时长） Fn Update Track Playback（设置当前时长）UI Music Song Update（刷新时长）

5.进度条滑动设置 实现开始捕获和结束捕获方法

6.实现播放按钮事件

7.效果展示

animate默认时长所带来的问题及解决

一、需求描述

做一个进度条长度逐渐减少的动画，当进度条长度小于等于0时，关闭动画，并弹出透明底板显示新提示。

二、问题描述

初始代码如下：

//设置进度条初始长度
var progressLength = 180;    
//设置一个定时器    
var timer = setInterval(function () {
    //开始游戏后进度条逐渐消失
    progressLength -= 10;
    $(".progress").animate({
        width: progressLength
    });
    console.log("hh");
    //如果进度条走到尽头
    if (progressLength <= 0) {
        clearInterval(timer);
        $(".over").fadeIn(100);
    }                        
}, 50);

遇到问题：

进度条递减的速度快于动画速度，导致动画还没执行完，progressLength就已经≤0，底板就弹出来了。

三、问题解决

首先，导致问题的原因是：

animate动画执行有默认时长，即1000（1s），就是第二个参数。

而先前设置的定时器执行时长是50，导致两厢不匹配，即animate函数域里外不是一个速度。

解决方法：（消灭时间差）

1.设置animate第二个参数，使执行时长等于外面定时器的执行时长；

（不推荐，因为两个函数之间总有执行上的时间差）

//设置进度条初始长度
var progressLength = 180;    
//设置一个定时器    
var timer = setInterval(function () {
    //开始游戏后进度条逐渐消失
    progressLength -= 10;
    $(".progress").animate({
        width: progressLength
    },50);
    console.log("hh");
    //如果进度条走到尽头
    if (progressLength <= 0) {
        clearInterval(timer);
        $(".over").fadeIn(100);
    }                        
}, 50);

2.改animate为css，这样就变成静态函数，没有时间差了

//设置进度条初始长度
var progressLength = 180;    
//设置一个定时器    
var timer = setInterval(function () {
    //开始游戏后进度条逐渐消失
    progressLength -= 10;
    $(".progress").css({
        width: progressLength
    });
    console.log("hh");
    //如果进度条走到尽头
    if (progressLength <= 0) {
        clearInterval(timer);
        $(".over").fadeIn(100);
    }                        
}, 50);