Web 技巧（14）

时间 2019-11-05

标签 web 技巧栏目 HTML 繁體版

原文原文链接

前段时间在微信群聊了一个动效的话题：javascript

鼠标悬浮的时候，三个区块依次显示；鼠标移开时，三个区块反向依次消失。若是使用CSS的triansition是否能够实现？css

借此话题，在这一期中就围绕着Web的动效来展开。Web动效不论是从设计到实现都有不少的话题可聊，好比，动画的设计、交互、实现等等。甚至是实现的技术方案或工具。html

Web动效实现手段

说到动效，可能你们都会以为Web动效是现代Web才具备的特性，事实上并不是如此，Web出现不久，甚至CSS还将来的时候，在Web上有动效的身影。前端

时至今日，有关于Web动效的实现手段常见的主要有：html5

最为古老的HTML标签<blink>和<marquee>，前者能够实现闪烁的动效，后者能够实现跑马灯的动效
在Web中引用.gif文件格式，让元素有动效
在Web中引用视频
CSS的transition和animation实现动效
Web Animations API
Canvas和SVG相关的动效
WebGL动效(3D动效)

对于开发人员可能会更为关注怎么在Web中开发动效。事实上，要在Web上添加动效，除了技术实现以外，还有不少知识点能够讨论，好比。java

如何设计出色的动效

有关于如何设计出色的动效，在互联网上有关于这方面的讨论很是的多，也有一些设计规范，好比：react

这些规范可让咱们从设计的角度来理解Web的动效：css3

事实上要设计好出一个较为盒理的动效，在设计的阶段就须要对这方面有考虑。迪士尼通过基础工做练习的长时间累积，在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 (12 Principles of Animation) 。这些原则描述了动画能怎样用于让观众相信本身沉浸在现实世界中。git

挤压和拉伸 (Squash and stretch)

预备动做 (Anticipation)

演出布局 (Staging)

连续运动和姿态对应 (Straight-Ahead Action and Pose-to-Pose)

跟随和重叠动做 (Follow Through and Overlapping Action)

缓入缓出 (Slow In and Slow Out)

弧线运动 (Arc)

次要动做 (Secondary Action)

时间节奏 (Timing)

夸张手法 (Exaggeration)

扎实的描绘 (Solid drawing)

吸引力 (Appeal)

若是你对Web动效设计和体验相关的话题感兴趣的话，能够花点时间阅读下面相关的文章：github

Web动效实现技术方案

前面提到过，实现Web动效的技术手段有不少种，在现代Web中，常见的Web动效实现方案主要有CSS动效，JavaScript动效，SVG动效，WebGL动效等。

CSS动效

在CSS中实现动效，除了咱们熟悉的transition和animation以外还有motion-path等。

CSS transition

CSS的transition实现的动效相对而言是较为简单的。就是实现从一个状态到另外一个状态过渡效果。简单地说，就是从状态A到状态B时过程当中有必定的动画效果：

使用CSS的transition能够在一些交互上增添微动效的交互。该方案要控制动画的过程，那相对而言会较难控制。

CSS animation

CSS中的animation和transiton相比最大不一样是有一个@keyframes，能够经过@keyframes来定义帧动效，能够在每一帧指定动画元素的各类状态（在帧上设置元素的CSS样式）：

若是你不想手撸一个@keyrames的话，能够借助Chrome的插件keyframes.app来辅助你。好比：

CSS路径动效

在某些场景之下，须要让一个动画对象按照咱们指定的一个行动轨迹来运行：

虽然借助@keyframes来绘制动画对象的运行轨迹，但相对而言会较为复杂，并且效果也较难还原。但CSS的motion-path的出现，可让这件事情变得更为简易：

See the Pen Move Modal In on Path by Chris Coyier ( @chriscoyier) on CodePen.

CSS Houdini Animation

CSS Houdini能够说是一个好东东，对于广大CSSer而言更是一种福音。他能帮助咱们扩展CSS的能力。对于Animation也是同样的，特地有一个Animation方面的内容，即Animation API：

好比下面这样的一个效果：

暴露给CSSer使用的方式也很简单：

.el {
    background-image: url(...);
}
.el::after {
    background-color: hsla(300, 100%, 50%, .75);
    mix-blend-mode: multiply;
}
.el.is-loaded::after {
    mask-image: paint(circle);
}

el.addEventListener('mousemove', evt => {
    el.style.cssText = `--size: 150; --x: ${evt.offsetX}; --y: ${evt.offsetY}`
})

el.addEventListener('mouseenter', evt => {
    el.style.cssText = `--size: 150; --x: ${evt.offsetX}; --y: ${evt.offsetY}`
})
el.addEventListener('mouseleave', evt => {
    el.style.cssText = `--size: 0; --x: ${evt.offsetX}; --y: ${evt.offsetY}`
})
复制代码

实现该效果的底层源码能够点击这里查阅。

JavaScript实现动效

在Web中使用JavaScript实现动效也是最为常见的，并且这方面的能力也很是的强大。时至今日有Web Animation API，Canvas和WebGL等技术手段，并且还有各式各样式的动画库。

Web Animation API

Web Animation API中提供了一些实现Web动效的API，好比：

这些API能够更好的帮助咱们实现Web动效。好比使用KeyframeEffect这个API就能够像CSS中的@keyframes同样声明一个Keyframe：

var rabbitDownKeyframes = new KeyframeEffect( 
    whiteRabbit, // element to animate
    [
        { transform: 'translateY(0%)' }, // keyframe 
        { transform: 'translateY(100%)' } // keyframe
    ], 
    { duration: 3000, fill: 'forwards' } // keyframe options
);
复制代码

来看一个Web Animation API写的一个示例：

See the Pen WAAPI iterationComposite & composite by Airen ( @airen) on CodePen.

若是你对Web Animation API相关的知识感兴趣的话，能够在Twitter上关注@rachelnabors。他能够说是Web Animation API之父，一直在致力于Web Animation API规范的推动。并且还录制了不少有关于这方面的视频和教程：

并且在Codepen上也有不少这方面的Demo能够供你们参考：

有关于Web Animation API更多的教程能够阅读下面相关文章：

Canvas动画

<canvas>是HTML5的一个标签元素，能够被用来经过脚本绘制图形。好比，它能够被用来绘制图形，制做图片集合，甚至用来实现动画效果。好比下面这样的一个效果：

See the Pen HTML Canvas fun with Emojis by Flavio Copes ( @flaviocopes) on CodePen.

<canvas>中提供不少API，能够用来绘制图形，也能够实现一些基本动画，甚至一些高级动画。

使用canvas来制做动画，须要对Canvas相关的API了解的透彻，并且须要知道一些有关于动画的一些实现逻辑和算法。特别是对象运动的轨迹、物理和数学相关的理论。

若是对Canvas相关的内容感兴趣的话，能够花点时间阅读：

WebGL动画

WebGL容许你建立3D动画，它更适合沉浸式的全屏动画体验和VR。WebGL能够建立较为复杂的动画场景，但复杂程度也相应的大。

See the Pen Run bunny run by Karim Maaloul ( @Yakudoo) on CodePen.

这里搜集了一些有关于WebGL相关的教程：

另外收集了几个有关于Shaders相关的教程：

这里有一些关于计算机图形学以及计算机图形学中有用的数学。

SVG动效

SVG能够很好的用来绘制矢量图，并且容许使用SMIL（SVG动画的原生格式）建立动画。不过SMIL即将被Chrome弃用，但因为受到抵制，该团队暂进取消了这个决定。另外，该团队更想推进CSS动画和Web Animation API，而不是SMIL。

See the Pen Underline.js by Ahmad Shadeed ( @shadeed) on CodePen.

若是你对CSS和SVG结合起来制做动效相关的话题感兴趣的话，能够阅读下面相关的教程：

动画中的缓动函数

不论是CSS动画仍是JavaScript动画，都会用到缓动函数。这些缓动函数能够帮助咱们建立出更好的动画效果。

缓动使您的动画感受更天然
为 UI 元素选择缓出动画
避免缓入或缓入缓出动画，除非可使其保持简短；这类动画可能让最终用户以为很迟钝

而Web动画和时间、速度和距离有关紧密的关系。有关于这方面更多的介绍能够阅读下面这些文章：

Javascript动画库

时至今日，有关于Web动效有不少种实方案，同时在社区中有出现了不少优秀的有关于Web动画的库。

常见的库（或者说优秀的库）

Web动效开发模式

最近几年一直在思考动效的开发模式，早期可能因为本身的认识，把动效的开发模式局限于手把手的撸，即根据设计师提供的稿子，一步一步的将动效转换成CSS或者JavaScript动效。但随着技术的变革，咱们开发动效的模式也在变化：

就开发模式而言，近几年经历了：

CSS驱动动效
JavaScript驱动动效
数据驱动动效

有关于这方面的话题，要是感兴趣的话，能够阅读：

小结

在这一期中咱们主要围绕着Web动效展开，有关于实现Web动画的手段有不少种，好比你们熟悉的CSS transtion、animation，或者说CSS的路径动效；还有JavaScript动效，Canvas动效以及SVG动效。还有一此更为复杂的动效，好比WebGL实现的3D动效。在是咱们更为关心的是如何快速的实现动效，因此咱们除了探讨如何实现动效以外，还须要一块儿探讨如何以最低成功的开发动效，甚至说以最低的成功，最快的方式，还原最好的动效。这一切的一切都值得咱们不断的去探讨。但愿本文中提供的内容对你们有所帮助，若是大家在这方面有更多的经验，欢迎在下面的评论中一块儿分享。