凡是出色的Canvas库都少不了制作动画的方法，Fabric.js也不例外，它有着编写简单且功能强大的动画助手，这就是animate( )方法。

animate主要使用代码如下：

rect.animate('angle',360,{

    onChange:canvas.renderAll.bind(canvas)

})

意思是设置了rect的动画是旋转到360度，onChange是动画的回调函数，可以绑定事件，那这里就是当canvas渲染完成时自动发生动画。

animate接收三个参数：

第一个参数是动画的属性，可以是任何用set( )方法设定的值；
第二个参数是发生变化的结束值（例如正方形从0度旋转到360度）；
第三个参数是设置动画的细节属性，包括动画时间，回调函数，缓动效果，等等。

我们现在对动画有了基本的了解，我们先作一个简单的例子，让一个正方形旋转360度。

HTML：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Fabric.js动画方法</title>

    <script type="text/javascript" src="../fabric.js"></script>

</head>

<body>

    <canvas width="800" height="800" id="canvas"></canvas>

    <script type="text/javascript" src="./script.js"></script>

</body>

</html>

JS：

var canvas = new fabric.Canvas('canvas');

var rect = new fabric.Rect({

    top:100,

    left:100,

    height:100,

    width:100,

    fill:'red',

});

rect.set('angle',0);//设置正方形的初始角度是0度

//下边设置了动画属性，让角度旋转到360度

rect.animate('angle',360,{

    onChange:canvas.renderAll.bind(canvas)

})

canvas.add(rect);

animate( )方法还给我们提供了相对值的办法：

例如，你想让方形相对于现在的位置向左移动100px，你可以这样写代码：

t.animate('left', '+=100', { onChange: canvas.renderAll.bind(canvas) });

当然，方形相对于现在的角度逆时针旋转5度，你可以这样写代码：

rect.animate('angle', '-=5', { onChange: canvas.renderAll.bind(canvas) });

您还可以设置动画的持续时间和缓动效果，这些需要在animate( )方法的第三个参数中设置。例如：

rect.animate('left', 500, {

  onChange: canvas.renderAll.bind(canvas),

  duration: 1000,

  easing: fabric.util.ease.easeOutBounce

});

（转）第05节：Fabric.js的动画设置的更多相关文章

  1. (转)第01节：初识简单而且强大的Fabric.js库

    Fabric.js是一个功能强大和简单Javascript HTML5的canvas库.Fabric提供了很多可以互动的Canvas元素,还在canvas上提供了SVG的语法分析器. 你可以轻松的使用 ...

  2. （转）第04节：Fabric.js用路径画不规则图形

    在Canvas上画方形.圆形.三角形都是很容易的,只要调用fabric对应的方法就可以了,但这些都是规则的图形,如果你想画一个不规则的图形,这时候你可以用fabric.js提供的路径绘图方法.所谓路径 ...

  3. HTML5 Canvas JavaScript库 Fabric.js 使用经验

    首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...

  4. fabric.js和高级画板

    本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式.网格模式切换 自由绘制 画箭头 画直线 画虚线 画圆/椭圆/矩形/直角 ...

  5. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  6. js双层动画幻灯

    js双层动画幻灯 点击下载

  7. 【Lucene3.6.2入门系列】第05节_自定义停用词分词器和同义词分词器

    首先是用于显示分词信息的HelloCustomAnalyzer.java package com.jadyer.lucene; import java.io.IOException; import j ...

  8. js运动动画

    原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...

  9. 好用的jquery.animateNumber.js数字动画插件

    在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...

随机推荐

  1. Linux 父子进程实现复制文件内容到另一个文件内

    1. 子进程先拷贝前一半 ,父进程一直阻塞到子进程拷贝完再拷贝后一半 /* 子进程先拷贝前一半文件,父进程先阻塞等待子进程拷贝完前一半内容, * 然后父进程在拷贝,后一半内容 * */ #includ ...

  2. Android开发 MediaPlayer入门_播放本地视频

    前言 MediaPlayer,可以播放视频/音频,并且它支持本地和网络文件的播放.本片博客作为入门教程,先以最通俗的方式解释播放文件本地视频.(如果你嫌MediaPlayer还是太麻烦可以试试选择Vi ...

  3. Promise 解决同步请求问题

    在写小程序和vue项目中,由于 api 不提供 同步请求,因此,可以通过  Promise 来实现 同步请求操作 在这里 对于 Promise 不太了解的小伙伴 可以查找 Promise 的api 文 ...

  4. Delphi 日期函数列表

    引用单元 :DateUtils CompareDate 比较两个日期时间值日期部分的大小CompareDateTime 比较两个日期时间值的大小CompareTime 比较两个日期时间值时间部分的大小 ...

  5. 整理delphi及整理原则

    回看delphi使用的人也不多,但一直觉得这门语言挺好的,所以一直在用,在很多方面也给了很多帮助和启示 加上delphi的学习文件也确实比较少,故收集起来也不容易.今日,重新整理一下delphi ,一 ...

  6. 「题解」：毛一琛/$cow$ $subsets$

    问题 A: 毛一琛/$cow$ $subsets$ 时间限制: 1 Sec  内存限制: 512 MB 题面 题面谢绝公开. 题解 题名貌似是个大神??看起来像是签到题然后就死了. 首先$O(3^n) ...

  7. web前端开发2018年12月找工作总结

    2018年的冬天额外的冷,由内致外... 作为一名刚刚踏入社会的实习生,可谓是狠狠的体验了一把什么叫社会(同时也感叹父母赚钱真的很不容易) 前几天看见这样一句话"如果你不知道社会的辛苦,要么 ...

  8. dcoker安装redis

    一.安装 搜索镜像 #docker search redis 拉取镜像 #docker pull redis 创建redis容器 #docker run -d --name redis --resta ...

  9. NX二次开发-UFUN输入表达式TAG，得到表达式字符串UF_MODL_ask_exp_tag_string

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建表达式 tag_t NewExpTag ...

  10. JTable更新内容的方法

    JTable更新内容的方法 DefaultTableModel dtm=new DefaultTableModel(data,head);//定义表格模型 jt.setModel(dtm);或jt=n ...