化风行万里-大欢

亚伦影音工作室

[i=s] 本帖最后由 亚伦影音工作室 于 2025-1-7 18:13 编辑 [/i]

化风行万里-大欢

红影

把左移字体和图片移动展示结合在一起，这个制作很动脑筋呢

红影

亚伦老师的制作总有很多设想以及各种效果的运用，很赞

亚伦影音工作室

还得请教黑老师，让他用播放按钮控制动字！

马黑黑

亚伦影音工作室 发表于 2024-11-16 21:12
还得请教黑老师，让他用播放按钮控制动字！

分三步处理：

一、需要加一个变量 movTimer 用来控制 setTimeout 的执行与暂停，可以放在 mov() 函数所在代码区域的头部：

var movTimer = null;

二、mov 函数改装一下：



var mov = () => {  
        if(last != null) spans[last].style.animation = '';
        spans[idx].style.animation = 'move 2s';
        last = idx;
        idx += 1;
        if(idx >= spans.length) idx = 0;
        movTimer = MusicPlayer.paused ? clearTimeout(movTimer) : setTimeout(mov,2000);
};


//mov(); //这里的函数执行可以不要，将在音频监听事件中管控（保留也无妨）

三、音频监听事件中，各加入相应语句：


MusicPlayer.addEventListener('playing', () => {
        tu.style.animationPlayState = 'running';
        mov(); //运行 mov 函数
});

MusicPlayer.addEventListener('pause', () => {
        tu.style.animationPlayState = 'paused';
        clearTimeout(movTimer); //取消定时器
});


修改之后，预期的目的会达到：音乐暂停，文本动画会在执行完后暂停，而不是马上暂停，这是惯性问题，音乐重新播放，文本动画会接着上一个文字动画继续。

亚伦影音工作室

马黑黑 发表于 2024-11-17 13:47
分三步处理：

一、需要加一个变量 movTimer 用来控制 setTimeout 的执行与暂停，可以放在 mov() 函 ...

老师说的很详细，现在是手机，上网再修改，谢谢！另一款动字也是这样处理的吧！

马黑黑

亚伦影音工作室 发表于 2024-11-17 15:05
老师说的很详细，现在是手机，上网再修改，谢谢！另一款动字也是这样处理的吧！

你用定时器的话就这样处理，你用纯CSS动画的话交给CSS变量处理

亚伦影音工作室

马黑黑 发表于 2024-11-17 15:28
你用定时器的话就这样处理，你用纯CSS动画的话交给CSS变量处理

只好用手机修改就像老师说的不会即可暂停，但从新播放接着前个字继续运行，这样也可以！谢谢老师！

马黑黑

亚伦影音工作室 发表于 2024-11-17 19:37
只好用手机修改就像老师说的不会即可暂停，但从新播放接着前个字继续运行，这样也可以！谢谢老师！

就是这样的：那两秒还剩多少是多少，事干完就听。这和尿尿是一个道理：开弓没有回头箭

亚伦影音工作室

[i=s] 本帖最后由 亚伦影音工作室 于 2024-11-17 21:55 编辑 [/i]

[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=2205553&ptid=79465][color=#999999]马黑黑 发表于 2024-11-17 21:23[/color][/url][/size] 就是这样的：那两秒还剩多少是多少，事干完就听。这和尿尿是一个道理：开弓没有回头箭[/quote] 哈哈.....

亚伦影音工作室