后天大家第3来谈谈各类活动的兑现

H5 动画:轨迹移动

2017/11/10 · HTML5 ·
动画

原稿出处:
坑坑洼洼实验室   

 

动画,是指由众多帧静止的画面,以自然的快慢(如每秒1陆张)一而再播发时,肉眼因视觉残象发生错觉,而误认为画面活动的作品。

在 Web
开采中,常常需求完毕各类卡通效果,举例:移动、变形、反射率变化等,明日我们任重而道远来谈谈种种活动的兑现。

直线移动

图片 1

经常能够直接由逐一点的职位,以及到点的时日与成套动画持续时间的比值,写出像样下边包车型地铁代码并可达成动画。

JavaScript

.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); } }

1
2
3
4
5
6
7
8
9
.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); }
}

曲线移动

图片 2

在 CSS 中能够透过 transform-origin 配合 rotate
达成曲线移动,然则这种 曲线 都以圆的壹某个且不太好调整。

那种移动大家得以把它拆分成八个方向的移动叠加,如

图片 3

更详尽的验证能够参照那篇小说
《curved-path-animations-in-css》。

门路移动

图片 4

那也是曲线移动,可是想像下边那样,那个很难拆分成多少个样子的移动叠加。那样的运动路线能够尝试以下多少个艺术:

  • SVG Animation

如此那般的门路能够相比较好的用 SVG path 来讲述,然后利用 SVG Animation
做跟随动画,并得以达到规定的典型预期的轨道效果。

首要代码(在线示例):

JavaScript

<svg width=”420px” height=”260px” viewBox=”0 0 420 260″ version=”1.1″
xmlns=””
xmlns: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=”” 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>

效果:

图片 5

  • JavaScript

选用 JavaScript
可以直接操作成分进行移动,理论上得以兑现别的动画,只是落成部分扑朔迷离的卡通片开销比较高,辛亏有各样已经支付好了的工具库能够供大家使用。举例,使用
格林sock 的 Tween马克斯 和 MorphSVGPlugin(收取薪金),通过 MorphSVGPlugin
提供的 pathDataToBezier 方法将 SVG path 转成曲线数组,然后给 TweenMax使用:

JavaScript

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 })

1
2
3
4
5
6
7
8
9
10
11
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
来布署动画,当大家获得设计稿后,可以给动画扩大关键帧,然后借助一些工具把关键帧的音讯导出来,那里介绍1个
keyframes-cli,能够导出那样结构的数量

图片 6

从属性名字能够决断出来 X_POSITIONY_POSITIONxy
的岗位消息,而 key_values 里的 data 正是大家要求的点位置
该点的时间与持续时间的比值 能够依附 start_frame 得出,
写个本子把那几个数量管理下,可获得近似下边包车型地铁 CSS 代码

图片 7

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

瞩目:不是 AE 关键帧里全数的音信都可以导出来,还跟 AE
里使用的连接性质有关,这里有介绍。

谈到底,总计一下,移动动画正是用一种适于的主意把时间和职位的调换关系显得出来。除了上边方法,肯定还有众多别样的措施和声援工具,迎接留言交换座谈。

感激您的翻阅,本文由 坑坑洼洼实验室
版权全数。假诺转发,请注明出处:凹凸实验室()

1 赞 1 收藏
评论

图片 8

相关文章