feat: 新添加动画编辑器，可实时预览

ymm-tech · Jan 2, 2020 · af816ab · af816ab
1 parent 30a6ed7
commit af816ab
Show file tree

Hide file tree

Showing 16 changed files with 1,605 additions and 585 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,6 +17,7 @@ module.exports = {
     'vue'
   ],
   'rules': {
+    "eol-last": 0,
     "vue/no-async-in-computed-properties": 0,
     "vue/no-side-effects-in-computed-properties": 0,
     "vue/no-side-effects-in-computed-properties": 0,

diff --git a/src/Editor.vue b/src/Editor.vue
@@ -218,7 +218,6 @@
                   let n = common.modifyNodeId(tempNode, Object.keys(window.$_nodecomponents || {}), [])
                   me.nodeInfo = JSON.parse(JSON.stringify(n))
                   console.log(me.nodeInfo)
-                  window.Editer = me
                   me.ema.fire('nodeInfo.change')
                 } else {}
               }

diff --git a/src/assets/image/cursor.svg b/src/assets/image/cursor.svg
diff --git a/src/assets/layout/default.json b/src/assets/layout/default.json
@@ -1,97 +1,131 @@
 {
   "layout": {
-    "children": [{
-      "children": [{
-        "children": [{
-          "name": "组件列表",
-          "component": "widgetComponent",
-          "close": true,
-          "pop": true
-        }, {
-          "name": "组合组件",
-          "component": "widgetCombinedComponents",
-          "close": true,
-          "pop": true
-        }],
-        "type": "panel",
-        "flex": 0.5
-      }, {
-        "children": [{
-          "name": "组件树",
-          "component": "widgetComponentTree",
-          "close": true,
-          "pop": true
-        }, {
-          "name": "页面模板",
-          "component": "widgetPageTemplate"
-        }],
-        "type": "panel",
-        "flex": 0.5
-      }],
-      "type": "column",
-      "flex": 0.20626959247648904
-    }, {
-      "children": [{
-        "children": [{
-          "name": "场景",
-          "component": "widgetScene",
-          "close": false,
-          "pop": false
-        }, {
-          "name": "组件详情",
-          "component": "widgetComponentInfo",
-          "close": true,
-          "pop": true
-        }, {
-          "name": "页面设置",
-          "component": "widgetPageInfo",
-          "close": true,
-          "pop": true
-        }],
-        "type": "panel",
-        "flex": 1
-      }],
-      "type": "column",
-      "flex": 0.5512481056767048
-    }, {
-      "children": [{
-        "children": [{
-          "name": "属性",
-          "component": "widgetAttribute",
-          "close": false,
-          "pop": true
-        }, {
-          "name": "样式",
-          "component": "widgetStyleEditor",
-          "close": false,
-          "pop": true
-        }, {
-          "name": "脚本",
-          "component": "widgetScriptEditor",
-          "style": {
-            "width": "300px",
-            "height": "400px",
-            "left": "300px",
-            "top": "300px"
+    "children": [
+      {
+        "children": [
+          {
+            "children": [
+              {
+                "name": "组件列表",
+                "component": "widgetComponent",
+                "close": true,
+                "pop": true
+              },
+              {
+                "name": "组合组件",
+                "component": "widgetCombinedComponents",
+                "close": true,
+                "pop": true
+              }
+            ],
+            "type": "panel",
+            "flex": 0.5
           },
-          "close": true,
-          "pop": true
-        }],
-        "type": "panel",
-        "flex": 0.7888643880926131
-      }, {
-        "children": [{
-          "name": "动画",
-          "component": "widgetAnimate",
-          "close": true,
-          "pop": true
-        }],
-        "type": "panel",
-        "flex": 0.211135611907387
-      }],
-      "type": "column",
-      "flex": 0.2424823018468062
-    }],
+          {
+            "children": [
+              {
+                "name": "组件树",
+                "component": "widgetComponentTree",
+                "close": true,
+                "pop": true
+              },
+              {
+                "name": "页面模板",
+                "component": "widgetPageTemplate"
+              }
+            ],
+            "type": "panel",
+            "flex": 0.5
+          }
+        ],
+        "type": "column",
+        "flex": 0.20626959247648904
+      },
+      {
+        "children": [
+          {
+            "children": [
+              {
+                "name": "场景",
+                "component": "widgetScene",
+                "close": false,
+                "pop": false
+              },
+              {
+                "name": "组件详情",
+                "component": "widgetComponentInfo",
+                "close": true,
+                "pop": true
+              },
+              {
+                "name": "页面设置",
+                "component": "widgetPageInfo",
+                "close": true,
+                "pop": true
+              }
+            ],
+            "type": "panel",
+            "flex": 0.9
+          },
+          {
+            "children": [
+              {
+                "name": "动画",
+                "component": "widgetAnimate",
+                "close": true,
+                "pop": true
+              }
+            ],
+            "type": "panel",
+            "flex": 0.1
+          }
+        ],
+        "type": "column",
+        "flex": 0.5512481056767048
+      },
+      {
+        "children": [
+          {
+            "children": [
+              {
+                "name": "属性",
+                "component": "widgetAttribute",
+                "close": false,
+                "pop": true
+              },
+              {
+                "name": "样式",
+                "component": "widgetStyleEditor",
+                "close": false,
+                "pop": true
+              }
+            ],
+            "type": "panel",
+            "flex": 0.7888643880926131
+          },
+          {
+            "children": [
+              {
+                "name": "脚本",
+                "component": "widgetScriptEditor",
+                "close": true,
+                "style": {
+                  "width": "300px",
+                  "height": "400px",
+                  "left": "300px",
+                  "top": "300px"
+                },
+                "pop": true
+              }
+            ],
+            "type": "panel",
+            "flex": 0.211135611907387
+          }
+        ],
+        "type": "column",
+        "flex": 0.2424823018468062
+      }
+    ],
     "type": "row"
   },
   "dialogs": [],

diff --git a/src/components/Node.vue b/src/components/Node.vue
@@ -241,11 +241,55 @@
        * 绑定选中节点运行动画
        */
       bindRunAnimation: function () {
-        this.ema.bind('select.runAnimation', id => {
-          if (id != this.nodeInfo.id) {
+        this.ema.bind('animate.timeline.move', (time, alltime) => {
+          if (this.nodeInfo.animate.length > 0 && this.isVisible(this)) {
+            this.setAnimationFrame(time, alltime)
+          }
+        })
+        this.ema.bind('animate.timeline.move.end', ev => {
+          if (this.nodeInfo.animate.length > 0) {
+            this.$el.style.animation = ''
           }
         })
       },
+      setAnimationFrame (time, alltime) {
+        let animates = this.nodeInfo.animate
+        let currentAnimation = null
+        let timeLine = 0
+        let infinitePreTimeLine = 0
+        for (let index = 0; index < animates.length; index++) {
+          const val = animates[index]
+          if (val.infinite) {
+            infinitePreTimeLine = timeLine
+            timeLine = alltime
+            currentAnimation = val
+            break
+          }
+          timeLine += val.duration * val.countNum + val.delay
+          if (timeLine >= time) {
+            currentAnimation = val
+            break
+          }
+        }
+
+        if (!currentAnimation) {
+          return
+        }
+        let duration = currentAnimation.duration
+        let timingFunction = currentAnimation.timingFunction || 'ease'
+        let delay = ((timeLine - time) - currentAnimation.duration * currentAnimation.countNum) % currentAnimation.duration
+        let count = 1
+        if (currentAnimation.infinite) {
+          delay = -((time - infinitePreTimeLine - currentAnimation.delay)) % currentAnimation.duration
+        }
+        let name = currentAnimation.type
+        let animation = `${duration}s ${timingFunction} ${delay}s ${count} normal none paused ${name}`
+        if (name) {
+          this.$el.style.animation = animation
+        } else {
+          this.$el.style.animation = ''
+        }
+      },
       /**
        * 绑定选中一个节点事件
        */