Web 动效四大才子简述

栏目: CSS · 发布时间: 6年前

内容简介:本文作者:张鑫旭原创声明:本文为阅文前端团队 YFE 成员出品,请尊重原创,转载请联系公众号 ( id: yuewen_YFE ) 获取授权,并注明作者、出处和链接。Web 动效四大才子主要指下面这 4 个:

本文作者:张鑫旭

原创声明:本文为阅文前端团队 YFE 成员出品,请尊重原创,转载请联系公众号 ( id: yuewen_YFE ) 获取授权,并注明作者、出处和链接。

Web 动效四大才子主要指下面这 4 个:

  1. CSS3 动画
  2. Web animation
  3. SVG SMIL
  4. Canvas 等硬核绘制

我们一个一个简单了解下。

一、CSS3 动画

在 CSS 中指定关键帧实现动画效果,例如一个常用的淡出效果:

.fadeIn {
  animation: fadeIn .2s both;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
复制代码

基本用法想必大家见得多用得也多,不展开,不过可以提一提一些不常用的点:

  1. CSS3 动画是可以随时暂停的,真暂停,纹丝不动的那种,使用这段CSS声明即可:

    animation-play-state: paused;
    复制代码
  2. CSS3 动画的 animation-timing-function 属性值除了支持 cubic-bezier() 功能符,还支持 steps() 功能符 ,可以实现很多小而美的逐帧动画效果。例如 twitter 的 Like 的效果:

    Web 动效四大才子简述

    把所有序列帧图片合在一张图片上,然后逐帧显示对应画面,常作为背景图,然后控制 background-position 实现效果。

    demo

  3. 对于复杂动画,我们可以对动画进行分解,通过标签嵌套,分别应用在祖先元素和后代元素上,例如下图这个抛物线动画效果:

    Web 动效四大才子简述

二、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 动效四大才子简述

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:

Web 动效四大才子简述

SMIL 由下面 5 类元素构成:

  • 直接定位,可延时。
  • 基础过渡效果。
  • 颜色动画,比较鸡肋,使用上面元素代替。
  • transform 变换动画。
  • 按照特定路径运动。

甚至支持添加点击行为触发动画执行:

<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 刷新绘制。

Web 动效四大才子简述

使用 JS 更底层方法实现动画效果需要有下面这些知识:

  1. 一定的 JS 基本功

    复杂动效往往都会有较多的循环遍历和数据处理。

  2. 熟悉相关技术领域API

    如何画一个圆,如何改变位置等。

  3. 知道一些动画算法

    A 到 B 如何运动,可以借助 Tween.js

  4. 掌握常见的曲线函数

    图形到本质是数学,运动的本质也是数学。这里有篇关于三角函数不错的文章。

  5. 了解一些上层框架

    Snap.svg, greensock, spritejs。3D 领域:threeJS,pixi 等。


以上所述就是小编给大家介绍的《Web 动效四大才子简述》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

时间的朋友2018

时间的朋友2018

罗振宇 / 中信出版集团 / 2019-1

2018年,有点不一样。 从年头到现在,各种信息扑面而来。不管你怎么研判这些信息的深意,有一点是有共识的:2018,我们站在了一个时代的门槛上,陌生,崭新。就像一个少年长大了,有些艰困必须承当,有些道路只能独行。 用经济学家的话说,2018年,我们面对的是一次巨大的“不确定性”。 所谓“不确定性”,就是无法用过去的经验判断未来事情发生的概率。所以,此时轻言乐观、悲观,都没有什么意......一起来看看 《时间的朋友2018》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具