fabric.js动画简单的播放器

老规矩先上代码，

 1 <template>
 2   <div class="animate">
 3     <canvas id="canvas" width="300" height="300"></canvas>
 4     <el-button id="toggle">▷</el-button>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 import { fabric } from "fabric";
10 export default {
11   data() {
12     return {
13       tempModel: [{ left: 0 }, { top: 0 }, { opacity: 0 }],
14     };
15   },
16   mounted() {
17     let playing = false;
18     var canvas = new fabric.Canvas("canvas", { backgroundColor: "#ddd" });
19     var rect = new fabric.Rect({ width: 100, height: 50, left: 100, top: 100 });
20 
21     //animate(设置动画属性，动画结束值,可选对象)
22     //可选对象为动画详细信息，包括持续时间、回调、缓动等
23     //在每个动画帧上调用canvas.renderAll才能够看到实际的动画，重新渲染
24     rect.animate("angle", 360, {
25       duration: 2000,
26       onChange: () => playing && canvas.renderAll(),
27       onComplete: () => playing && setAnimate(rect),
28       easing: fabric.util.ease.easeInOutCubic,
29     });
30 
31     canvas.add(rect);
32 
33     // 左上方按钮
34     document.querySelector("#toggle").addEventListener("click", (e) => {
35       const targetEl = e.target;
36       // When playing is true, it should save the statement.
37       if (playing) {
38         targetEl.innerHTML = "▷";
39         this.tempModel.left = canvas.getObjects()[0].left;
40         this.tempModel.top = canvas.getObjects()[0].top;
41         this.tempModel.opacity = canvas.getObjects()[0].opacity;
42       } else {
43           // Else, it should load in the shape what'll move.
44         targetEl.innerHTML = "▢";
45         // think about the initial suitation, it should be divided.
46         if (this.tempModel.left) {
47           rect.set("left", this.tempModel.left);
48           rect.set("top", this.tempModel.top);
49           rect.set("opacity", this.tempModel.opacity);
50         }
51         setAnimate(rect);
52       }
53     // Change statement model
54       playing = !playing;
55     });
56     // 取得乱数
57     function getRandomInt(min, max) {
58       return Math.floor(Math.random() * (max - min + 1)) + min;
59     }
60 
61     // 设定动画函数
62     function setAnimate(rect) {
63       //   rect.animate("angle", 360, {
64       //     duration: getRandomInt(1000, 5000),
65       //     // easing: fabric.util.ease.easeInOutCubic,
66       //     onChange: () => {
67       //       canvas.renderAll();
68       //     },
69       //     onComplete: () => setAnimate(rect),
70 
71       //     // onComplete: () => playing && setAnimate(rect),
72       //   });
73 
74       // 变化透明度
75       rect.animate("opacity", getRandomInt(0.2, 1), {
76         duration: getRandomInt(1000, 5000),
77       });
78       // 变化座标
79       rect.animate("left", getRandomInt(0, 300), {
80         easing: fabric.util.ease.easeInOutCubic,
81         duration: getRandomInt(1000, 5000),
82       });
83       // 变化座标
84       rect.animate("top", getRandomInt(0, 300), {
85         onChange: () => {
86           playing && canvas.renderAll();
87         },
88         onComplete: () => playing && setAnimate(rect),
89         easing: fabric.util.ease.easeInOutCubic,
90         duration: getRandomInt(1000, 5000),
91       });
92     }
93   },
94 };
95 </script>
96 <style>
97 </style>
View Code

效果图

第一个旋转动画不知道为什么没了，不过这个保存暂停时状态，即将运动之前取出状态再装入的思路挺好的。

参考网页Fabric.js 动画 - 略知三二一 (321332211.com)

posted @ 2021-08-18 15:50  乐盘游  阅读(188)  评论(0)  编辑  收藏  举报