带有网络动画的图像滑块 API

Question

我使用 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 设置为 top: 100%; transform: translateY(-100%);，因此第一张幻灯片 (slide0) 最初不在视图中。我这样做是因为幻灯片应该从容器底部向上滑动开始 div.

我原来的幻灯片是从位置0开始的，所以幻灯片0确实是从底部开始的，但是它不符合时间并且用完了，而且第一张幻灯片也需要很长时间才能进入位置：https://codepen.io/nancy-collins/pen/bGVKBQq

我也尝试了从位置-300px开始的幻灯片，所以slide0在视图中并且没有从底部向上滑动，但是当它到达slide5时它跳转到slide0，就像这样：https://codepen.io/nancy-collins/pen/vYNrvaa

我知道滑块在这里很常见，但是 none 和 WAAPI。这是一个非常新的 API，但肯定能够实现循环滑块。谢谢。

Answer 1

对于这种效果，我认为您可以尝试几种方法。一种是为每个动画生成不同的关键帧(example CodePen here)。

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

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

带有网络动画的图像滑块 API

Image slider with Web Animations API

javascript

css-animations

web-animations

web-animations-api