feat(animation): run animations in edit mode

ly525
1 parent 911e0e61
Showing 5 changed files with 76 additions and 7 deletions
front-end/h5/src/components/core/editor/edit-panel/animation.js
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/components/core/support/shape.js
front-end/h5/src/mixins/animation.js
@@ -3,29 +3,36 @@ import { animationOptions, animationValue2Name, firstLevelAnimationOptions } fro
 export default {
   computed: {
-    ...mapState('editor', ['editingElement'])
+    ...mapState('editor', ['editingElement']),
+    animationQueue () {
+      return (this.editingElement && this.editingElement.animations) || []
+    }
   },
   data: () => ({
-    animationQueue: [],
+    // animationQueue: [],
     activeCollapsePanel: 0,
     activePreviewAnimation: '',
     drawerVisible: false
   }),
   methods: {
     addAnimation () {
+      // TODO move this to vuex
       this.animationQueue.push({
         type: '',
-        duration: 0,
+        duration: 2,
         delay: 0,
-        countNum: 1,
+        interationCount: 1,
         infinite: false
       })
       this.activeCollapsePanel = this.animationQueue.length - 1
     },
     deleteAnimate (index) {
+      // TODO move this to vuex
       this.animationQueue.splice(index, 1)
     },
     runAnimate () {
+      // front-end/h5/src/components/core/editor/index.js created()
+      window.getEditorApp.$emit('RUN_ANIMATIONS')
     },
     renderSecondAnimationTabs (animations) {
       return (
@@ -50,11 +57,11 @@ export default {
                     // https://www.quirksmode.org/js/events_mouse.html#mouseenter
                     <a-list-item>
                       <div
-                        class={[this.activePreviewAnimation === item.value && item.value + ' animated', 'shortcut-button']}
                         onClick={(e) => {
                           // TODO move this to vuex mutation
                           this.editingElement.animations[this.activeCollapsePanel].type = item.value
                         }}
+                        class={[this.activePreviewAnimation === item.value && item.value + ' animated', 'shortcut-button']}
                         onMouseenter={(e) => {
                           this.activePreviewAnimation = item.value
                         }}
@@ -3,6 +3,7 @@ import undoRedoHistory from &#39;../../../store/plugins/undo-redo/History&#39;
 import { getEditorConfigForEditingElement } from '../../../utils/element'
 import '../styles/index.scss'
+import 'animate.css'
 import RenderEditCanvas from './canvas/edit'
 import RenderPreviewCanvas from './canvas/preview'
@@ -296,6 +297,8 @@ export default {
     )
   },
   created () {
+    // event bus for editor
+    window.getEditorApp = this
     let workId = this.$route.params.workId
     console.log(workId)
     if (workId) {
@@ -34,6 +34,7 @@ class Element {
     this.pluginProps = (typeof ele.pluginProps === 'object' && clone(ele.pluginProps)) || this.getDefaultPluginProps(ele.editorConfig || {})
     this.commonStyle = (typeof ele.commonStyle === 'object' && clone(ele.commonStyle)) || { ...defaultStyle }
     this.events = []
+    this.animations = []
   }
   getDefaultPluginProps (editorConfig) {
@@ -51,7 +52,7 @@ class Element {
     return pluginProps
   }
-  getStyle ({ position = 'static', isRem = false }) {
+  getStyle ({ position = 'static', isRem = false } = {}) {
     const pluginProps = this.pluginProps
     const commonStyle = this.commonStyle
     let style = {
+import animationMixin from '@/mixins/animation.js'
+
 /**
  * #!zh: 上下左右 对应的 东南西北
  * #!en: top(north)、bottom(south)、left(west)、right(east)
@@ -13,7 +15,8 @@ const directionKey = {
 const points = ['lt', 'rt', 'lb', 'rb', 'l', 'r', 't', 'b']
 export default {
-  props: ['defaultPosition', 'active', 'handleMousedownProp', 'handleElementMoveProp', 'handlePointMoveProp', 'handleElementMouseUpProp', 'handlePointMouseUpProp'],
+  mixins: [animationMixin],
+  props: ['defaultPosition', 'active', 'handleMousedownProp', 'handleElementMoveProp', 'handlePointMoveProp', 'handleElementMouseUpProp', 'handlePointMouseUpProp', 'element'],
   computed: {
     position () {
       return { ...this.defaultPosition }
+// https://stackoverflow.com/questions/26874769/getcomputedstyle-and-csstext-in-ie-and-firefox
+function getComputedCSSText (style) {
+  let cssText = ''
+  for (let attr in style) {
+    // m <?> matched
+    // #!en: hump to line
+    // #!zh: 驼峰转下划线
+    cssText += `${attr.replace(/[A-Z]+/g, m => `-${m.toLowerCase()}`)}:${style[attr]};`
+  }
+  return cssText
+}
+
+export default {
+  methods: {
+    async runAnimations () {
+      const animationQueue = this.animations || this.element.animations || []
+      let len = animationQueue.length
+      if (len === 0) return
+
+      let that = this
+      let parentNode = this.$el
+      let animIdx = 0
+      const oldStyle = that.element.getStyle({ position: 'absolute' })
+      runAnimation()
+
+      function runAnimation () {
+        if (animIdx < len) {
+          const animation = animationQueue[animIdx]
+          let animationStyle = {
+            animationName: animation.type,
+            animationDuration: `${animation.duration}s`,
+            animationIterationCount: animation.infinite ? 'infinite' : animation.interationCount,
+            animationDelay: `${animation.delay}s`,
+            animationFillMode: 'both'
+          }
+          parentNode.style.cssText = getComputedCSSText(animationStyle) + getComputedCSSText(oldStyle)
+          animIdx++
+        } else {
+          // reset to the initial state after the animation ended
+          parentNode.style.cssText = getComputedCSSText(oldStyle)
+        }
+      }
+      parentNode.addEventListener('animationend', runAnimation, false)
+    }
+  },
+  created () {
+    const that = this
+    window.getEditorApp.$on('RUN_ANIMATIONS', () => {
+      if (that.active) {
+        that.runAnimations()
+      }
+    })
+  }
+
+}