0

我已经使用 WAAPI 创建了一个图像滑块，用于（一种）在游戏中唱歌。滑块与歌曲链接，因此动画时机非常重要。使用 WAAPI 关键帧（与 CSS 关键帧非常相似），时间偏移量为 0-1，因此在下面的代码笔中动态创建关键帧所需的计算。滑块应连续循环每张下一张幻灯片，包括从最后一张幻灯片再次滑到第一张幻灯片。问题是动画不能从slide5无缝地继续到slide0。

这是我动态设置关键帧的方法：

        var keyframes = []
        var pause = 0.18
        var anim = 0.02
        var slideHeight = 150
        var translateBy = 0
        var a = {transform: 'translateY(0)'} //set initial keyframe before loop
        keyframes.push(a)
        var offsetPercent = 0 //offset var to increment by anim & pause vars.
        for(let i=0; i<songVars.fileLength; i++) {
            var b = {
                        offset: offsetPercent+= anim, 
                        transform: 'translateY('+ translateBy +'px)'
                    }
            var c = {
                        offset: offsetPercent+= pause, 
                        transform: 'translateY('+ translateBy +'px)'
                    }
            keyframes.push(b, c)
            translateBy-= slideHeight;
        }
        var d = {transform: 'translateY('+ translateBy +'px)'}; 
        keyframes.push(d)

此代码笔显示图像滑块不会从最后一张图像无缝循环回第一张图像。那是因为我找不到使用 WAAPI 关键帧实现连续、无缝循环的方法。由于 CSS 设置为 ，第一张幻灯片 (slide0) 最初是看不见的top: 100%; transform: translateY(-100%);。我这样做是因为幻灯片应该从容器 div 的底部向上滑动开始。

我最初的幻灯片从位置 0 开始，所以 slide0 确实从底部开始，但它不适用于计时并且时间用完，并且第一张幻灯片也需要很长时间才能到位：https：/ /codepen.io/nancy-collins/pen/bGVKBQq

我还尝试了从位置-300px 开始的幻灯片，因此 slide0 在视图中并且不会从底部向上滑动，但是当它到达 slide5 时它会跳转到 slide0，如下所示：https ://codepen.io/nancy-collins/笔/vYNrvaa

我知道滑块是这里的常见讨论，但 WAAPI 没有。这是一个非常新的 API，但肯定能够实现循环滑块。谢谢。

4

1 回答 1

1

对于这种效果，我认为您可以尝试几种方法。一种是为每个动画生成不同的关键帧（此处为 CodePen 示例）。

但是，我认为如果您将所有项目置于彼此之上（在父元素上使用position: absolute; top: 0; left: 0和使用），您可能会发现它会更容易。position: relative; width: 300px然后，您可以对每个项目应用相同的动画，但只需更改delay它们以使它们适当地交错。

使用这种方法，翻译位置不会根据幻灯片的数量而改变。您可以将所有帧定位在视口下方，然后分三步将它们设置为动画，然后将它们返回到视口下方的原始位置。但是，关键帧偏移会根据幻灯片的数量而变化，因此您可以在末尾创建一个适当长的“平坦”部分，等待其他幻灯片在重复之前完成。

于 2020-05-13T12:33:09.317 回答