【内推字节】欢迎简历chengxinsong@bytedance.com

Web动态实现的4种方式

Web 动态实现主要指下面这 4 个:

  1. 1、CSS3 动画
  1. 2、Web animation
  1. 3、SVG SMIL
  1. 4、Canvas 等硬核绘制
我们一个一个简单了解下。


一、CSS3 动画
在 CSS 中指定关键帧实现动画效果,例如一个常用的淡出效果:
.fadeIn {
    animation: fadeIn .2s both;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
基本用法想必大家见得多用得也多,不展开,不过可以提一提一些不常用的点:
  1. 1、CSS3 动画是可以随时暂停的,真暂停,纹丝不动的那种,使用这段CSS声明即可:animation-play-state: paused; 复制代码
  1. 2、CSS3 动画的 animation-timing-function 属性值除了支持 cubic-bezier() 功能符,还支持 steps() 功能符,可以实现很多小而美的逐帧动画效果。例如 twitter 的 Like 的效果:twitter 的 Like 效果
  2. 把所有序列帧图片合在一张图片上,然后逐帧显示对应画面,常作为背景图,然后控制 background-position 实现效果。
  1. 对于复杂动画,我们可以对动画进行分解,通过标签嵌套,分别应用在祖先元素和后代元素上,例如下图这个抛物线动画效果
  2. 抛物线运动


二、Web animation
指 Web animation API,简言之就是把 CSS3 实现的 animation 动画变成由 JS 代码实现。语法如下:
var myAnimation = element.animate(keyframes, options);
其中 keyframes 对应 CSS3 中 @keyframes 中的声明块,options 对应 animation-* 属性及属性值。myAnimation 为动画的 Animation 对象,包含多种方法。例如我们实现一个透明度不断变化的动画,可以这样:
element.animate([
{ opacity: 0 },
{ opacity: 1, offset: 0.4 },
{ opacity: 0 }
], {
duration: 3000,
delay: 0,
fill: 'forwards',
easing: 'steps(8, end)',
iterations: Infinity
});
效果如下图:
web animation动画截图示意
Web animation API 特别使用用在动画参数是动态变化的场景,目前还有一点的兼容性问题,可以试试下面的 polyfill:web-animations-js


三、SVG SMIL
SVG SMIL 指 SVG 同步多媒体集成语言,就是直接通过 XML 标签,就可以在 web 中呈现各类动画效果。举个例子,下面代码:
<svg width="320" height="320">
<g>
<text font-family="microsoft yahei" font-size="120" y="160" x="160"></text>
<animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
</g>
</svg>
效果如下截屏 GIF:
马儿旋转
SMIL 由下面 5 类元素构成:
  • 1、直接定位,可延时。
  • 2、基础过渡效果。
  • 3、颜色动画,比较鸡肋,使用上面元素代替。
  • 4、transform 变换动画。
  • 5、按照特定路径运动。
甚至支持添加点击行为触发动画执行:
<svg id="svg" width="320" height="200">
<circle id="circle" cx="100" cy="100" r="50"></circle>
<text font-family="microsoft yahei" font-size="120" y="160" x="160">马
<animate attributeName="x" to="60" begin="circle.click" dur="3s" />
</text>
</svg>
若有兴趣了解可以访问这里


四、Canvas 等硬核绘制
以 JS 为引擎的刷新与绘制。这类动画效果通过定时器不断改变图形元素等位置/透明度/变换等视觉特性来实现。 包括使用 JS 改变 DOM,使用 JS 改变 SVG 属性值,以及使用 JS 对 Canvas 刷新绘制。
JS 改变的元素性质
使用 JS 更底层方法实现动画效果需要有下面这些知识:
  1. 1、一定的 JS 基本功复杂动效往往都会有较多的循环遍历和数据处理。
  1. 2、熟悉相关技术领域API如何画一个圆,如何改变位置等。
  1. 3、知道一些动画算法A 到 B 如何运动,可以借助 Tween.js
  1. 4、掌握常见的曲线函数图形到本质是数学,运动的本质也是数学。这里有篇关于三角函数不错的文章。
  1. 5、了解一些上层框架Snap.svg, greensock, spritejs。3D 领域:threeJS,pixi 等。


文章转载:网络
感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/512.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

微信群
欢迎加入微信群
微信公众号
欢迎关注微信公众号

图文推荐

微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!