这个浏览器中的轻量级动画是如何完成的？

Question

我看到许多网站只要您使用动画向下滚动到网站的特定部分，就会自动加载动画 - apple.com拥有它，最近我在http://www.bugherd.com/features上找到它

我在Web检查器中看到了许多PNG，但我无法确定它是如何完成的。

Answer 1

这是马特（联合创始人兼设计师@ BugHerd）：）

非常高兴听到您喜欢我们在功能页面上放置的动画。为了达到这个效果，我们使用了transit.js库：http://ricostacruz.com/jquery.transit/

它使用与jQuery动画相同的语法，并使用动画队列。我通过加载所需的所有图像然后根据需要转换，隐藏和显示来组合动画。

很高兴回答您关于如何在自己的网站上实施此问题的任何其他问题。

干杯！

Answer 2

另外，Apple网站上的动画相当复杂，但是用于实现其效果的技术却非常详细。它远远超出了我们在BugHerd上所做的事情：）

https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI

Answer 3

我不确定你在谈论什么，但如果你指的是Apple在展示iPad时的动画，那么很容易做到。 您所做的是将事件侦听器绑定到页面/容器滚动事件。然后，通过将其顶部偏移量与滚动高度进行比较，检查您的元素是否在视图范围内。如果它在视图中，则调用函数来为元素设置动画。这可以通过动画背景偏移的单个图像精灵，或实际图像序列甚至画布 - 您的呼叫来完成。