（转）第05节：Fabric.js的动画设置
凡是出色的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的动画设置的更多相关文章
- (转)第01节：初识简单而且强大的Fabric.js库
Fabric.js是一个功能强大和简单Javascript HTML5的canvas库.Fabric提供了很多可以互动的Canvas元素,还在canvas上提供了SVG的语法分析器. 你可以轻松的使用 ...
- （转）第04节：Fabric.js用路径画不规则图形
在Canvas上画方形.圆形.三角形都是很容易的,只要调用fabric对应的方法就可以了,但这些都是规则的图形,如果你想画一个不规则的图形,这时候你可以用fabric.js提供的路径绘图方法.所谓路径 ...
- HTML5 Canvas JavaScript库 Fabric.js 使用经验
首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用. Flash的优势一是浏览器支持好,二是代码成熟稳定.而HTML5 的 C ...
- fabric.js和高级画板
本文介绍fabric.js框架使用,以及使用fabricjs打造一个高级画板程序. 高级画板功能介绍 全局绘制颜色选择 护眼模式.网格模式切换 自由绘制 画箭头 画直线 画虚线 画圆/椭圆/矩形/直角 ...
- 用js实现动画效果核心方式
为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...
- js双层动画幻灯
js双层动画幻灯 点击下载
- 【Lucene3.6.2入门系列】第05节_自定义停用词分词器和同义词分词器
首先是用于显示分词信息的HelloCustomAnalyzer.java package com.jadyer.lucene; import java.io.IOException; import j ...
- js运动动画
原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...
- 好用的jquery.animateNumber.js数字动画插件
在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...
随机推荐
- dev 中 字符串转中文拼音缩写，对grid列表进行模糊匹配，grid获取焦点行，gridlookupedit控件用拼音模糊匹配下拉选项
番外篇:. //该方法是将字符串转化为中文拼音的首写字母大写, public static string RemoveSpecialCharacters(string str){try{if (str ...
- <el-table>序号逐次增加，翻页时继续累加，解决翻页时从编号1开始的情况
注释: scope.$index 当前序号 cuePage 表示当前页码 pageSize 表示每页显示的条数
- 解决 php artisan route:list 报错oauth-private.key文件不存在或不可读的
进入项目根目录命令行执行 php artisan passport:install 然后执行php artisan route:list,会提示 Class App\Http\Controllers\ ...
- bzoj1070题解
[解题思路] 考虑拆点,得到一个二分图:左边点<i,j>表示第i个技师按顺序第j辆修的车,右边点k表示第k个车主,连接左右的边表示第k个车主可能成为第i个技师的第j个客户. 因为是二分图, ...
- SP2713 GSS4 - Can you answer these queries IV(线段树)
传送门 解题思路 大概就是一个数很少次数的开方会开到\(1\),而\(1\)开方还是\(1\),所以维护一个和,维护一个开方标记,维护一个区间是否全部为\(1/0\)的标记.然后每次修改时先看是否有全 ...
- NX二次开发-UFUN获取当前导出CGM选项设置UF_CGM_ask_session_export_options
文章转载自唐康林NX二次开发论坛,原文出处: http://www.nxopen.cn/thread-126-1-1.html 刚才有同学问到这个问题,如果是用NXOpen来做,直接录制一下就可以了: ...
- JsJquery小技巧
JS对URL编码 :encodeURI() .Net对URL解码:HttpUtility.UrlDecode() 格式化输出百分数 function formatePercent(data){ ...
- 秒懂机器学习---k-近邻算法实战
秒懂机器学习---k-近邻算法实战 一.总结 一句话总结: k临近算法的核心就是:将训练数据映射成k维空间中的点 1.k临近算法怎么解决实际问题? 构建多维空间:每个特征是一维,合起来组成了一个多维空 ...
- P1655 小朋友的球
P1655 小朋友的球 题目描述 @发源于 小朋友最近特别喜欢球.有一天他脑子抽了,从口袋里拿出了N个不同的球,想把它们放到M个相同的盒子里,并且要求每个盒子中至少要有一个球,他好奇有几种放法,于是尝 ...
- Mybatis笔记 – Po映射类型
一.输入映射类型 parameterType定义输入到sql中的映射类型,可以是 简单类型 .po类对象(可自动生成 或 手动定义). pojo包装对象(用于综合查询,UserCustom用户自定 ...