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