|
|
手指移动 3 个像素才能将幻灯片偏移 1 个像素。看看我们在这里得到了什么？没错：苹果的橡皮筋效应！上面的代码检查用户是向右滑动第一张幻灯片还是向左滑动最后一张幻灯片。如果他们这样做，那么我们将 设置为 3。 然后，我们计算需要偏移的像素数。 = + / ; 复制 为了使像素偏移可见，我们可以使用 定位或负左边距，但这两者都不是硬件加速的。这就是为什么我们将使用 :3(, , z) 使偏移量成为最终的： ('').('', '3(' + + ',0,0)').(); 复制 因此，我们将 移动 的像素数，而忽略 和 z。 () 将删除我们将在 方法中添加的捕捉 . 类，我们现在将深入研究该方法。< /> 方法 当用户停止滑动时，我们希望上一张或下一张幻灯片能够顺利地以动画方式进入视图。首先，我们需要。
知道哪张幻灯片应该在视图中： () { ( 复制 然后我们和在0和之间复制 最终的值很简单：它是视口的全宽度（以像素为单位）乘以的数字。因为我们将像素向左偏移，所以我们想要负结果：复制 差不多了。首先，看一下这行代码：复制 这是动态添加新 规则的最简单方法。我们 加拿大电话号码表 创建一个 元素，并将 类应用于 ，这会更改其 3 偏移到整个幻灯片的 。但因为我们原来的 . 文件有这一行 复制 ...然后 动画将使用硬件加速 3 属性启动。耶！ 为了进行清理，我们先从 部分中删除所有现有的 样式元素，然后再创建新的样式元素：复制 因此，现在我们已将当前（运行时）样式设置为当前 值，并且 类设置为点 < /> 到最终位置。我们现在需要做的就是将样式交换为类，然后过渡将接管： 复制 看到了吗？我们。
添加了 类，并将 的 属性重置为空。- 我们现在有什么？ 如果一切顺利，我们可以在 、、 或 中打开我们的工作，轻松浏览这些小猫。对于那些没有一起编码的人，您仍然可以查看结果。 还记得我们还没有包含我们自己的 的时候吗？ 我们当前的结果看起来与在 或 上查看的结果非常相似，不是吗？你可以滑动来滚动，并且它有橡皮筋。但我们的应用程序会在幻灯片之间切换，而且其滚动的平滑度可与本机应用程序相媲美，这意味着硬件加速确实将用户体验提升了几个档次，使其更接近只有在本机应用程序中才能看到的结果。 这就是我们打算做的，不是吗？ 作为锦上添花，我们现在可以添加一些功能，例如底部的永久擦洗条；圆形项目符号指示幻灯片数量以及哪张幻灯片处于活动状态；以及覆盖屏。
|
|
发表于 2024-1-10 15:37:10