DDR爱好者之家

一个全屏的加载动画效果实现
站长资源 2024/11/25 佚名
20 1538
DDR爱好者之家 Design By 杰米

如果您曾经访问过 Nicolas Zezuka 和 Active Theory 的出色的设计网站，你可能已经注意到在显示新内容之前动感的页面加载动画了。这种风格的动画效果最近非常流行，因此这篇文章想给你带来一些启示。

　　这个效果的核心是让一个形状在页面窗口中动画显示并有展示活动的指示。当新内容被加载时，形状将以动画显示返回显示的页面。我们将使用 Snap.svg 动画库来实现，因为这个库让我们能够创建复杂的形状和有趣的变形转换效果。

在线演示

需要注意的是，这里的示例只是提供一种思路，动态内容加载是模拟的。另外没有做降级处理，动画和伪元素可能在某些浏览器无法正常工作。

　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

　　我们显示遮罩的方式是，定义一个 SVG 路径动画：

　　我们定义的初始路径在页面中是看不到的，开始和结果路径分别定义在 data-opening 和 data-closing 属性中。正如你所看到的，我们使用的是小型的 viewBox，但我们舒展绘图窗口的宽度和高度为100%，而不是保持长宽比。如果我们没有定义一个闭合的路径，我们将动画回到初始路径。

　　请注意，我们也可以添加多个路径（用分号隔开），它允许 SVG 绘制你将在第一演示中看到的步骤明智的动画。 我们设置叠加划分到一个固定的位置，覆盖了整个页面，并通过给 ::before 和 ::after 伪元素添加样式来实现加载提示效果。

JavaScript Code复制内容到剪贴板
  1. .pageload-overlay {   
  2.     position: fixed;   
  3.     width: 100%;   
  4.     height: 100%;   
  5.     top: 0;   
  6.     left: 0;   
  7.     visibility: hidden;   
  8. }   
  9.     
  10. .pageload-overlay.show {   
  11.     visibility: visible;   
  12. }   
  13.     
  14. .pageload-overlay svg {   
  15.     position: absolute;   
  16.     top: 0;   
  17.     left: 0;   
  18. }   
  19.     
  20. .pageload-overlay svg path {   
  21.     fill: #fff;   
  22. }  

　　我们在这里使用 visibility，因为使用这些固定的风格定位与指针以及 SVG 的事件可能在移动端有些问题，所以我们通过定位和操纵父 DIV 来代替。 你可能已经注意到，圆形动画也从一个路径到另一个路径变换来实现（当然有其他的实现方式，例如缩放） ，但我们使用以下值来确定圆是响应式（ Rseponsive）的：

XML/HTML Code复制内容到剪贴板
  1. width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="xMidYMid slice"  

　　使用 slice 将保持纵横比，但这样整个页面显示区域都可以被 viewBox 覆盖。我们的示例创建13种效果，但正如你所看到的，可能性是无止境的。我们真的很希望你能获得启发。

 

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米