初探网页动画javascript类库animate.js

blackfrog 发布于2年前
0 条问题

初探网页动画javascript类库animate.js

如果作为程序猿的你正急于寻找一个快速轻量的javascript动画库,那么Anime.js也许就是下一个你可以考虑使用的动画类库 ~

页面动画

谈论相关页面动画时,一个显著的区别存在于用户界面/体验动画及纯粹动画之间~

一般情况下用户能在动态图像的表现上更好的感知理解知识和概念,这意味着当信息通过相对动态明显的表现形式下展示,可以更好的利于用户理解和分析相关信息。

一个简单例子:当用户在网站中浏览中,如果网页相关功能提供辅助动画信息,将会帮助用户更好的获取信息或执行一个特定动作,比如,购物车中添加一个商品,或者登录中输入相关信息等等。

通过对比发现,纯粹动画是用来在页面主体或者边缘解释具体概念的,相关资料如下:

Sarah Drasner  ---

CSS大会幻灯片

CodePen demo --- 准确的一个动画演示例子

 

这个区别是很重要的,因为实现用户界面的动画目的是帮助用户更好的完成操作,以达到用户快速方便使用网站的目的,反之,在你创建一个纯粹动画的时候,要尽可能充分表达一个固定并且确定概念

也就是说,两种动画类型都是为了让用户更加方便操作而实现滴,这是为什么你创建动画的时候,不同动画库在图像图形性能和可操作性指标上表现差异很大,甚至激怒用户的原因

为什么使用javascript创建页面动画?

CSS3也提供了基于web的过渡/动画。但是javascript依然扮演着非常重要的角色。

为了帮助你在CSS和javascript两者间做出选择,可以参考Rachel Nabors提供的如下 区别 来帮助你选择: 

  • 静态型:  动画在没有相关逻辑自行运行
  • 状态型: 通过点击展开/收起侧边栏是一类常见用户动画操作,使用CSS和少量javascript代码就能实现动画中添加/移除控制元素状态的相关CSS
  • 动态型:这 类动画取决于用户交互的不同条件,javascript可能是你最好的选择

以下这些使用场景,也可以使用javascript:

  • 多个元素上连接或终止动画。每个后续的动画都需要在前一个动画结束后才执行。也可以单独使用CSS通过调整每个动画元素的delay 属性来实现,但是如果需要改变不止一个变量,会增大动画元素的调整难度。
  • 使用SVG图形处理, 缺点就是:  CSS SVG动画支持 浏览器 兼容问题
  • 项目需要支持那些不支持CSS动画的旧版浏览器,那么javascript解决方案将会更好

如果你想了解更多这方面的内容,可以参考Jack Doyle的:

Myth Busting: CSS Animations vs. JavaScript ,他是  Greensock Animation Platform 的作者

未来实现动画的选择:Web页面动画API

W3C正在制定统一的规范,以便无需借助外部javascript库就能统一的控制相关CSS,SVG和Javascript动画。这些API就是 Web Animations

更多内容请阅读Dudley Storey的 introduction to the Web Animations API (AAPI) 

动态JS动画库

这很多Javascript动画JS库可供你选择,在撰写本文时, GreenSock ,也被称为GSAP (GreenSock Animation Platform) 和  Velocity.js 是其中的佼佼者。

两者都是相当优秀并友好的类库。但现在,个人更乐意把 Anime.js 推荐给大家,Anime.js是一个新的Javascript动画库

Anime的主要特性

Anime  的意思是  日本人手绘/动画 ,至于其特性,如下:

一个灵活但轻量级的Javascript动画库,使用CSS,SVG,DOM属性和JS对象进行工作

支持以下浏览器:

  • Chrome
  • Safari
  • Opera
  • Firefox
  • Internet Explorer 10+

为什么选择Anime?

这个问最好还是让Anime的 作者 来回答,正如他解释的为什么要在已经有了一些强大的工具例如GSAP的情况下提出Anime.js:

GSAP比Anime功能更强大,正因如此它很繁琐笨重, 我的目标是使得这个库相关API尽量保持简单,关注真正需要的功能(时间维度,易于使用,播放控制),并且代码简洁少量(缩小9KB)

黑客新闻

简单来说,对于HTML和SVG元素动画,不需要GSAP或者其他大型类库所提供的超出所需的所有特性,Anime.js对于你的项目来说已经足够优秀啦~

怎么使用Anime.js

几个生动的例子来说明Anime.js的基本用法,为了便于演示,大部分动画会运行的有点慢。

包含Anime.js跟包含jQuery或者其他常见的Javascript库没有区别。

project’s page on GitHub 下载后缀.zip的压缩包,提取出文件并且使用<script>标签添加anime.js到你的html文本中。

<script src="anime.min.js"></script>

另外,你也可以使用npm 或者bower:

npm install animejs
bower install animejs

单个元素动画:弹球

在项目中设置好Anime开发环境,你就能从一种最简单的动画开始:只有一个元素,一个球,向上跳和向下跳。

首先调用anime传递一个带有动画弹跳的对象:

var bouncingBall = anime({

  //code here
	
});

接下来,用一些声明动画对象,动画种类,动画持续时间等指令

var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic'
});

这个对象的属性告诉Anime哪一个元素需要动画,这里你可以使用CSS选择器,或者使用下面任意方法: DOM元素,例如document.querySelector('.ball') 节点,例如document.querySelectorAll('.ball') Javascript对象,例如{elementName: 'ball'} Javascript数组,例如['.ball'] 如果对象的属性多于一个值,这就是说你打算在多个元素上应用动画效果,你可以根据数据结构使用数组,例如: var bouncingBall = anime({ targets: ['.ball', '.kick']

使用CSS选择器,或者使用下面任意方法:

  •  DOM元素,例如document.querySelector('.ball')
  • 节点,例如document.querySelectorAll('.ball')
  • Javascript对象,例如{elementName: 'ball'}
  • Javascript数组,例如['.ball']

如果对象的属性多于一个值,这就是说你打算在多个元素上应用动画效果,你可以根据数据结构使用数组,例如:

var bouncingBall = anime({
  targets: ['.ball', '.kick'],
//rest of the code
});

在这个例子中的第二个属性通过translateY垂直地移动这个球,这对于那些使用CSS的人来说是很熟悉的。 Tiffany Brown 和其他人推荐使用translate和scale移动元素和分别的改变它们的尺寸,而不是通过它们的宽度和长度来定位元素,这能够确保动画性能和质量,避免浏览器回流  browser reflows