Apple.com/iphone 幻灯片：它是如何工作的？答案

【问题标题】：Apple.com/iphone slideshow: How does it work?Apple.com/iphone 幻灯片：它是如何工作的？
【发布时间】：2014-01-22 01:57:32
【问题描述】：

所以这更像是一个好奇的问题，而不是一个实际的问题，所以请多多包涵。我刚刚签出：

封面幻灯片对我来说真的很令人印象深刻。我不想复制它，但我真的对它的工作原理很感兴趣。根据我的检查，他们只是使用了一堆定时的 webkit 转换/转换，但我不知道到底发生了什么。

另外，有没有一种简单的方法可以创建这种行为而无需对其进行硬编码，因为这就是我现在要做的。

【问题讨论】：

【解决方案1】：

这里有一个解释：http://johnbhall.com/iphone-4s/

【讨论】：

【解决方案2】：

我只是在回答我自己的问题，因为除了硬编码之外，没有人能真正为我提供答案。我认为苹果只是在这方面付出了很多努力。我仍然对 css 过渡的复杂使用印象深刻，尤其是在对象将过渡到下一帧的地方

【讨论】：

【解决方案3】：

这是a working demo 的源代码。

基本上这个想法是，

对这个想法的阐述允许您停止/反转/暂停/恢复，在一个循环后自动停止，等等。

此效果的商品名为“滑块”。所以你可以用谷歌搜索滑块并找到很多讨论。有用于 jquery (nivoslider) 的滑块，有用于 mootools (slideitmoo) 的滑块，还有无框架选项（如我链接的 scriptiny 演示）等等。

【讨论】：

我知道如何使用 Javascript 和 CSS 转换来制作定时幻灯片？转换。它的复杂性给我留下了深刻的印象。我可能会想出对流程进行硬编码，但我只是好奇是否有更高的顺序/方案/模型。如果您仔细观察，您会发现不同的缓动、移入/移出动画以及 Keynote 中的 SmartMove 效果