服务热线:400-889-1636
在线咨询: 
网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技
网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技
首页 求创资讯 H5动画H5动画:轨迹移动
求创动态行业资讯网站建设网页设计微网站手机网站H5动画系统开发APP开发交互设计微信小程序网站维护

    H5动画:轨迹移动

  • 来源:CSDN
    作者:phj_88
    转载时间:2019/7/23 10:12:05

在 Web 开发中,经常需要实现各种动画效果,例如:移动、变形、透明度变化等,今天我们主要来讨论各种移动的实现。


直线移动


通常可以直接由各个点的位置,以及到点的时间与整个动画持续时间的比值,写出类似下面的代码并可实现动画。


.cray {
animation: move 2s alternate infinite;
}
@keyframes move {
0% { transform: translate(0, 0); }
30% { transform: translate(100px, 0); }
60% { transform: translate(100px, 100px); }
100% { transform: translate(200px, 0); }
}
--------------------- 

曲线移动


在 CSS 中可以通过 transform-origin 配合 rotate 实现曲线移动,不过这种 曲线 都是圆的一部分且不太好控制。

这种移动我们可以把它拆分成两个方向的运动叠加,如



更详细的说明可以参考这篇文章 《curved-path-animations-in-css》

路径移动


这也是曲线移动,但是想像上面那样,这个很难拆分成几个方向的运动叠加。这样的移动路径可以尝试以下几个方法:SVG Animation

这样的路径可以比较好的用 SVG path 来描述,然后使用 SVG Animation 做跟随动画,并可以达到预期的轨迹效果。

主要代码(在线示例):


<svg width="420px" height="260px" viewBox="0 0 420 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="#979797" stroke-width="1" fill="none">
<path id="motionPath" d="M370.378234,219.713623 C355.497359,218.517659 ..." ></path>
</g>
<g id="cray" transform="translate(0, -24)" stroke="#979797">
<image id="cray-img" xlink:href="http://7xt5iu.com1.z0.glb.clouddn.com/img/cray.png" x="0" y="0" width="100px"/>
</g>
<animateMotion
xlink:href="#cray"
dur="5s"
begin="0s"
fill="freeze"
repeatCount="indefinite"
rotate="auto-reverse"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>






JavaScript
使用 JavaScript 可以直接操作元素进行运动,理论上可以实现任何动画,只是实现一些复杂的动画成本比较高,好在有各种已经开发好了的工具库可以供我们使用。例如,使用 Greensock 的 TweenMax 和 MorphSVGPlugin(收费),通过 MorphSVGPlugin 提供的 pathDataToBezier 方法将 SVG path 转成曲线数组,然后给 TweenMax 使用:

var hill = document.getElementById('hill')
var path = MorphSVGPlugin.pathDataToBezier("#motionPath");
TweenMax.to(hill, 5, {
bezier:{
values:path,
type:"cubic",
autoRotate: 180
},
ease:Linear.easeNone,
repeat: -1
})

在线示例

CSS
实现动画,其实就是在相应的时间点做相应的“变化”。再回头看直线移动的实现方式,其实如果能给出足够多点的位置和该点的时间与持续时间的比值,那其实曲线也可以直接用 CSS 来实现。

很多时候设计师使用 AE 来设计动画,当我们拿到设计稿后,可以给动画增加关键帧,然后借助一些工具把关键帧的信息导出来,这里介绍一个 keyframes-cli,可以导出这样结构的数据

从属性名字可以判断出来 X_POSITION 和 Y_POSITION 是 x 和 y 的位置信息,而 key_values 里的 data 就是我们需要的点位置, 该点的时间与持续时间的比值 可以根据 start_frame 得出,
写个脚本把这些数据处理下,可得到类似下面的 CSS 代码


设置的关键帧越多,动画会越流畅,但 CSS 也会增多。

本文内容为转载,如原作者有异议,请联系本站撤除。
  • TOP

  • 关于我们

    上海求创科技有限公司成立于2001年,是一家专注于为客户提供高端网站策划、网站建设、网页设计、品牌网络营销以及相关的基于互联网应用服务的专业公司。

    更多

    全国客户服务热线

    400-889-1636

    网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技-微官网 网站建设,网站制作,企业网站建设,网上商城,网站推广,域名注册,求创科技-手机网
    友情链接: 域名超市 | 苏州网站优化 | 营销型网站建设 | 企业网站建设 | 网页设计 | 网站建设 | 网站优化 | 网站设计 | IPv6 升级 | 微信开发 | H5开发 | 系统开发 | 网站维护 | 海外社会化媒体推广 | 上海网站设计 |
    热线电话:400- 889-1636 业务部:sales@dn.cn 售后服务:service@dn.cn 投诉邮箱:info@dn.cn
    地址:上海市松江区谷阳北路2399弄 御上海37号602室 邮政编码:201600
    版权所有©上海求创科技有限公司 沪ICP备13005298号-24  网站地图 沪公网安备 31010602003962号