fabricjs学习二：animation，image filters滤镜，渐变、文本、事件

fabricjs中的动画

元素中，多个动画执行时，

可以只在其中一个动画里面设置onChange，其他属性值，每一个动画，都要单独设置。

import {fabric} from 'fabric'

let cas = document.getElementById('canvas')

let canvas = new fabric.Canvas(cas)
let rect = new fabric.Rect({
  left: 25,
  top: 25,
  width: 30,
  height: 30
})
canvas.add(rect)
rect.animate('angle', 45, {
  // onChange: canvas.renderAll.bind(canvas),
  easing: fabric.util.ease.easeInCubic
})
  .animate('left', '+=150', {
    from: 50,
    onChange: canvas.renderAll.bind(canvas),
    duration：1000，
    easing: fabric.util.ease.easeInCubic
  })

常用的easing有：easeOutBounce, easeInCubic, easeOutCubic, easeInElastic, easeOutElastic, easeInBounce, and easeOutExpo.

 

image filters