怎样通过HTML5让移动APP页面有动效?(二)
发布网友
发布时间：2022-04-26 09:50
共1个回答
热心网友
时间：2022-04-06 15:03
3.SVG动画
SVG技术越来越不陌生，使用门槛也渐渐降低，而且SVG动画还可以使用CSS控制。然而这种动画也是略耗时，但有一种比较常用的，就是线条的描绘动画，CSS3比较难实现，这里可以用SVG。
介绍一个PS插件 svgArtisan(目前还未有主页)，这个工具可以直接根据PSD的路径图层生成SVG图形。接下来就简单了，将设计稿上的路径图形用插件生成对应的SVG，(注意，其中的foreignObject标签内是不支持svg的浏览器会看到一张.m3-svg-nosupport标签下的图片。)再使用CSS3的animation控制stroke-dashoffset：效果不难吧!SVG还有各种用途，例如制作ICONFONT等，可以深入挖掘。
4.重力陀螺仪
想让页面更有层次感，不妨让设计提供一些碎片元素，例如彩花，星星之类，然后把它们单独切出来放画面前景，使用陀螺仪伴随着手机运动碎片也跟着运动，多么好玩!
这里提供一个工具可以轻松实现陀螺仪重力效果的：parallax.js用法简单，定义一个parallax-obj的父类，把需要动的元素加上layer的类，然后设置动的范围data-depth：
以上就是小编关于怎样通过HTML5让移动APP页面有动效的相关分享，希望对大家有所帮助，想要了解更多HTML5相关内容，还请关注本平台。
