fabric 添加动画属性

作者: 小李不小 | 来源:发表于2021-08-07 22:31 被阅读0次

fabirc 是一个比较简单的和强大的canvas插件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./fabric.js"></script>
</head>
<body>
    <canvas width="800px" height="800px" id="c"></canvas>
    <script type="text/javascript">
        var  canvas=new fabric.Canvas('c')

        var rect=new fabric.Rect({ //画一个正方形
            left:100,
            top:100,
            width:100,
            height:100,
            fill:'red'
        })

        //animate (方向,距离像素,对象属性)三个参数

        rect.animate('left',500,{ 
            onChange:canvas.renderAll.bind(canvas),
            duration:2000,
            easing:fabric.util.ease.easeOutCubic
        })

        canvas.add(rect)

    </script>
</body>
</html>

image.png