初探网页动画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

上述代码片段中下一个属性是duration属性,这告诉Anime要维持动画多长时间,如果你在不同时间点要产生多个动画,delay是另一个有用的属性。

loop属性告诉Anime你想要执行动画的次数,默认值是false,意味着动画只执行一次。你可以设置该值为true让动画无限次数执行,或者设置一个精确的数字让动画执行一定次数。

direction属性存在于CSS动画和Anime中,该属性允许你设置CSS的计数器为以下任意值:normal,reverse和alternate。最后一个值alternative介于normal方向和reverse方向之间,这似乎在一个弹跳球的动画上表现得很好。

最后,上述代码为你的动画确定了easing属性,这是变化率常数?动画可能开始很慢然后加速?最后有一个弹跳的动作?正确的easing值是一个平滑有效的动画的关键要素。

你可以使用下面的语句找出Anime的所有的easing函数:

console.log(anime.easings);

给弹跳球加上第二个动画

假如你想让弹跳球在触碰到容器底部时稍微变扁,使用Anime你可以以Javascript对象的形式添加 specific animation parameters ,对于这个弹跳球的例子,下面就是实现这个效果的代码:

var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic',
  //new code
  scaleX: {
    value: 1.05,
    duration: 150,
    delay: 268
  }
});

上面的代码添加了一个新的属性:scaleX,它用来增加球的宽度,并且使用特定的键值通过 对象字面量 的形式进行赋值,以此能够控制你的动画

以上键值对让你在水平轴根据你的标尺控制元素的宽度,同时duration 和delay 键值让你设置动画的持续时间和相对上一个动画本次动画开始的时间点

 查看 CodePen 上的代码 Bouncing Ball with Anime JS

如果使用浏览器的开发者工具检查代码,你就能看到Anime是怎样通过注入行内<style>标签让元素动起来及其如何动态更新CSS过渡属性值滴:

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

让两个元素动起来:踢动这个球

示例代码展示了一种同时让两个元素产生动画的方法,在本例中这两元素是两张图片。一旦第一个动画结束,第二个动画就立刻开始执行:

var kickBall = anime({
  targets: '.kick',
  scale: 1.2,
  duration: 300,
  easing: 'easeInCubic',
  complete: function() {
    anime({
      targets: '.ball',
      translateX: '70vw',
      scale: 1.5,
      easing: 'easeOutBounce',
      delay: 150
    });
  }
});

这个球只有在被踢的时候才会动起来,使用Anime.js的.complete()方法可以错开动画,这时候包含另一个对象,这个对象带有让这个球元素动起来的指令。

查看在  CodePen 上的  Animate Two Elements with Anime JS

当然,可以通过CSS使用几个关键帧和一个神奇的三维贝塞尔曲线来快速地近似模拟这种静态动画,这时候你根本不需要任何js,就能最终得到一个运行在你本地浏览器的平滑的动画

查看  CodePen 上的 Animating Two Images with CSS

播放/暂停/重新运行动画

Anime.js能让你使用.play(),.pause()和.restart()方法控制动画什么时候开始播放,停止和重新运行,也可以使用.seek()方法在动画中查找一个特定的播放点:

例如,这里是怎样使用播放按钮控制踢球动画的代码:

//Animating the kick
var kickBall = anime({
  targets: '.kick',
  scale: 1.2,
  duration: 300,
  delay: 100,
  easing: 'easeInCubic',
  autoplay: false
});

//Animating the ball
var movingBall = anime({
  targets: '.ball',
  translateX: '70vw',
  scale: 1.5,
  easing: 'easeOutBounce',
  delay: kickBall.duration + 100,
  autoplay: false
});

/* Playing the animation 
when clicking the play button */
btnPlay.addEventListener('click', function(e) {
  e.preventDefault();
  kickBall.play();
  movingBall.play();
});

上面的代码片段中需要注意的几点是:

  • 为了使用按钮同时控制踢的动作和球,创建了两个独立的物体,提前把球的动画嵌套到踢的动画里面去,但经验告诉按钮只能控制一个主动画,例如是踢的动画而不是嵌套的另外一个
  • 为了防止动画在页面正在加载时运行,把autoplay(自动播放)按钮设成false是一个正确的选择
  • 最后就是:调用.play()方法控制踢动的球和移动的球,按预期那样生成动画效果

查看  CodePen 上的 Anime JS with Buttons

使用 CSS animation-play-state 属性 和一些javascript很容易就能做到播放和暂停按钮的动画,但是一旦动画停止运行后如果想重启动画,或者返回到某个时间点的动画,这就不太容易了

内联SVG的Anime.js动画

最后一个示例说明了怎样能使一个内联SVG图形的属性产生动画,这时候这个图形代表一只在玩耍球的可爱的猫。

示例通过在不同的路径和形状使用CSS类来构建SVG图形,这使得很容易在代码中定位

怎样让猫的眼睛动起来的相关代码:

var movingEyes = anime({
  targets: ['.inner-left-eye', '.inner-right-eye'],
  cy: 400,
  duration: 500,
  delay: function(el, index) {
    var singleDelay = index === 0 ? 300 : index * 500;
    return singleDelay;
  },
  autoplay: false
});

上面的代码通过调整猫的眼睛相关圆形的cy属性来降低猫眼睛的展示位置

猫眼睛已经成功的动起来了,这样做的目的是向你们展示一种更酷的使用Anime.js调用动画的方法。delay属性可以是一个数字也可以是一个函数,在上面的代码中使用函数,控制动画开始时间。函数告诉Anime想产生动画的元素是否是第一个(targets数组的第一个元素),例如猫右边的眼睛,如果它是第一个动画元素,那么它就有300毫秒的延时,否则这个元素的动画相对与上一个动画将会有500毫秒的延时

查看 CodePen 上的 Anime JS SVG Example

结论

Anime.js 基于以下几点是有趣的:

  • 特性覆盖了相当多使用案例
  • 语法很简单
  • 快速创建出平滑优美的动画效果

查看原文: 初探网页动画javascript类库animate.js

需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。