返回 导航

其他

hangge.com

Fabric.js - 详细使用教程5（动画效果）

作者：hangge | 2020-03-03 08:10

五、动画效果

1，指定明确的目标值

（1）效果图
  • 点击“开始移动”按钮后，红色方块会自动旋转着并移动到最右侧，然后停下。
  • 如果方块在右侧时，点击按钮后方块又回旋转着并移动回最左侧，然后停下。

（2）样例代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        canvas {
            border: 1px dashed black;
        }
    </style>
    <script src="fabric.min.js"></script>
    <script>
        var canvas;
        var rect;

        window.onload = function() {
            canvas = new fabric.Canvas('canvas');

            rect = new fabric.Rect({
                top : 50, //距离画布上边的距离
                left : 25, //距离画布左侧的距离，单位是像素
                width : 50, //矩形的宽度
                height : 50, //矩形的高度
                fill : 'red', //填充的颜色
                originX: 'center',//调整中心点的X轴坐标
                originY: 'center'//调整中心点的Y轴坐标
            });

            canvas.add(rect);
        }

        // 按钮点击
        function play() {
            // 移动动画
            rect.animate('left', rect.left === 25 ? 275 : 25, {
                duration: 1000,
                onChange: canvas.renderAll.bind(canvas),
                onComplete: function() {
                    console.log("播放结束!");
                },
                easing: fabric.util.ease.easeInCubic
            });

            // 旋转动画
            rect.animate('angle', rect.left === 25 ? 360 : 0, {
                duration: 1000,
                onChange: canvas.renderAll.bind(canvas),
                onComplete: function() {
                    console.log("播放结束!");
                },
                easing: fabric.util.ease.easeInCubic
            });
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="300" height="200"></canvas>
    <button onclick="play()">开始移动</button>
</body>
</html>

2，使用增量值

（1）效果图
  • 点击“开始移动”按钮后，方块会向右移动 50px 距离，在此过程中还会旋转 90 度。
  • 再次点击按钮，方块又回从之前停下来的位置继续向右移动 50px 距离，在此过程中还会继续旋转 90 度。

（2）样例代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        canvas {
            border: 1px dashed black;
        }
    </style>
    <script src="fabric.min.js"></script>
    <script>
        var canvas;
        var rect;

        window.onload = function() {
            canvas = new fabric.Canvas('canvas');

            rect = new fabric.Rect({
                top : 50, //距离画布上边的距离
                left : 25, //距离画布左侧的距离，单位是像素
                width : 50, //矩形的宽度
                height : 50, //矩形的高度
                fill : 'red', //填充的颜色
                originX: 'center',//调整中心点的X轴坐标
                originY: 'center'//调整中心点的Y轴坐标
            });

            canvas.add(rect);
        }

        // 按钮点击
        function play() {
            // 移动动画
            rect.animate('left', '+=50', {
                duration: 1000,
                onChange: canvas.renderAll.bind(canvas),
                onComplete: function() {
                    console.log("播放结束!");
                },
                easing: fabric.util.ease.easeInCubic
            });

            // 旋转动画
            rect.animate('angle', '+=90', {
                duration: 1000,
                onChange: canvas.renderAll.bind(canvas),
                onComplete: function() {
                    console.log("播放结束!");
                },
                easing: fabric.util.ease.easeInCubic
            });
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="300" height="200"></canvas>
    <button onclick="play()">开始移动</button>
</body>
</html>

3，反复播放动画

（1）效果图
  • 点击“开始移动”按钮后，红色方块会自动旋转着移动到最右侧。
  • 当方块到达最右侧时，又回自动地旋转着移动回最左侧。
  • 当方块到达最左侧时，又回自动旋转着移动到最右侧.......不断重复。
 
 （2）样例代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        canvas {
            border: 1px dashed black;
        }
    </style>
    <script src="fabric.min.js"></script>
    <script>
        var canvas;
        var rect;

        window.onload = function() {
            canvas = new fabric.Canvas('canvas');

            rect = new fabric.Rect({
                top : 50, //距离画布上边的距离
                left : 25, //距离画布左侧的距离，单位是像素
                width : 50, //矩形的宽度
                height : 50, //矩形的高度
                fill : 'red', //填充的颜色
                originX: 'center',//调整中心点的X轴坐标
                originY: 'center'//调整中心点的Y轴坐标
            });

            canvas.add(rect);
        }

        // 动画效果
        function animate() {
            // 移动动画
            rect.animate('left', rect.left === 25 ? 275 : 25, {
                duration: 1000,
                onChange: canvas.renderAll.bind(canvas),
                onComplete: animate,
                easing: fabric.util.ease.easeInCubic
            });

            // 旋转动画
            rect.animate('angle', rect.left === 25 ? 360 : 0, {
                duration: 1000,
                onChange: canvas.renderAll.bind(canvas),
                onComplete: animate,
                easing: fabric.util.ease.easeInCubic
            });
        }

        // 按钮点击
        function play() {
            animate();
        }
    </script>
</head>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
<button onclick="play()">开始移动</button>
</body>
</html>
评论

全部评论（0）

回到顶部