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

animate主要使用代码如下：

  1. rect.animate('angle',360,{
  2.     onChange:canvas.renderAll.bind(canvas)
  3. })

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

animate接收三个参数：

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

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

HTML：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Fabric.js动画方法</title>
  6.     <script type="text/javascript" src="../fabric.js"></script>
  7. </head>
  8. <body>
  9.     <canvas width="800" height="800" id="canvas"></canvas>
  10.     <script type="text/javascript" src="./script.js"></script>
  11. </body>
  12. </html>

JS：

  1. var canvas = new fabric.Canvas('canvas');
  2. var rect = new fabric.Rect({
  3.     top:100,
  4.     left:100,
  5.     height:100,
  6.     width:100,
  7.     fill:'red',
  8. });
  9.  
  10. rect.set('angle',0);//设置正方形的初始角度是0度
  11. //下边设置了动画属性，让角度旋转到360度
  12. rect.animate('angle',360,{
  13.     onChange:canvas.renderAll.bind(canvas)
  14. })
  15.  
  16. canvas.add(rect);

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

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

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

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

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

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

  1. rect.animate('left', 500, {
  2.   onChange: canvas.renderAll.bind(canvas),
  3.   duration: 1000,
  4.   easing: fabric.util.ease.easeOutBounce
  5. });

（转）第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. eclipse 在复制/粘贴 时很卡(转)

    最近发现eclipse在按Ctrl+C 时卡的要命,在网上找了一下,发现原来如此: 打开选项: Window -> Preferences -> General -> Editors ...

  2. EF批量添加

    1.首先,打开工具——NuGet包管理器——管理解决方案的NoGet程序包——搜索Z.EntityFramework.Extensions 点击安装!!! codefirst定义一个实体,用EF的方法 ...

  3. Batch - 忽略FORFILES “no files found” error

    ref:https://stackoverflow.com/questions/16820681/suppress-forfiles-no-files-found-error Solution: Th ...

  4. 8-26接口压力测试-1Dubbo接口测试

    1. Dubbo Dubbo是一个分布式服务框架,提供了高性能和透明化的RPC(Remote Procedure Call Protocol)远程服务调用方案和服务治理方案. SOA:面向服务的架构 ...

  5. Ruby 环境变量

    Ruby 环境变量 Ruby 解释器使用下列环境变量来控制它的行为.ENV 对象包含了所有当前设置的环境变量列表. 变量 描述 DLN_LIBRARY_PATH 动态加载模块搜索的路径. HOME 当 ...

  6. C++11中的技术剖析(萃取技术)

    从C++98开始萃取在泛型编程中用的特别多,最经典的莫过于STL.STL中的拷贝首先通过萃取技术识别是否是已知并且支持memcpy类型,如果是则直接通过内存拷贝提高效率,否则就通过类的重载=运算符,相 ...

  7. 天猫精灵业务如何使用机器学习PAI进行模型推理优化

    引言 天猫精灵(TmallGenie)是阿里巴巴人工智能实验室(Alibaba A.I.Labs)于2017年7月5日发布的AI智能语音终端设备.天猫精灵目前是全球销量第三.中国销量第一的智能音箱品牌 ...

  8. thinkphp 替换入口

    3.2版本支持根据当前的运行环境生成Lite文件,可以替换框架的入口文件或者应用入口文件,提高运行效率. 我们的建议是在生产环境中关闭调试模式后生成Lite文件.注意,目前SAE平台不支持直接生成Li ...

  9. NX二次开发-UFUN链表UF_MODL_create_list等用法

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_curve.h> #include < ...

  10. linux下df查看空间已经占用%100，但是找不到大文件的解决方法

    有时候在linux下会遇到这种情况:df查看空间已经占用%100,但是找不到大文件,怎么回事呢,经过网上查找资料,得到解决方法: 1.使用lsof查看已删除但未释放的文件 lsof -n | grep ...