feat: show avaiable animation list

ly525
1 parent 0208a797
Showing 6 changed files with 641 additions and 23 deletions
front-end/h5/package.json
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/styles/index.scss
front-end/h5/src/constants/animation.js
front-end/h5/yarn.lock
@@ -11,6 +11,7 @@
     "deploy": "rm -rf dist && npm run build && ./deploy.sh"
   },
   "dependencies": {
+    "animate.css": "^3.7.2",
     "ant-design-vue": "^1.3.14",
     "core-js": "^2.6.5",
     "element-ui": "^2.9.1",
+import { animationOptions, animationValue2Name, firstLevelAnimationOptions } from '@/constants/animation.js'
+import 'animate.css'
+
+export default {
+  data: () => ({
+    animationQueue: [],
+    activeCollapsePanel: [],
+    activePreviewAnimation: '',
+    drawerVisible: false
+  }),
+  methods: {
+    addAnimation () {
+      this.animationQueue.push({
+        type: '',
+        duration: 0,
+        delay: 0,
+        countNum: 1,
+        infinite: false
+      })
+      this.activeCollapsePanel = `${this.animationQueue.length - 1}`
+    },
+    deleteAnimate (index) {
+      this.animationQueue.splice(index, 1)
+    },
+    runAnimate () {
+    },
+    renderSecondAnimationTabs (animations) {
+      return (
+        <a-tabs
+          defaultActiveKey={animations[0].value}
+          onChange={tab => {}}
+          style="width:100%;"
+          tabBarStyle={{ marginLeft: '-16px' }}
+          size="small"
+          tabBarGutter={0}
+          tabPosition="left"
+        >
+          {
+            animations.map(group => (
+              <a-tab-pane tab={group.label || group.value} key={group.value}>
+                <a-list
+                  grid={{ gutter: 12, column: 2 }}
+                  dataSource={group.children}
+                  renderItem={(item, index) => (
+                    // [key point] onMouseover vs onMouseenter
+                    // https://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover
+                    // https://www.quirksmode.org/js/events_mouse.html#mouseenter
+                    <a-list-item>
+                      <div
+                        class={[this.activePreviewAnimation === item.value && item.value + ' animated', 'shortcut-button']}
+                        onMouseenter={(e) => {
+                          this.activePreviewAnimation = item.value
+                        }}
+                        onMouseleave={() => {
+                          // [key point] why not set activePreviewAnimation='' after mouseleave, see more here: https://stackoverflow.com/questions/32279782/mouseenter-called-multiple-times
+                          // this.activePreviewAnimation = ''
+                        }}
+                      >
+                        {item.label}
+                      </div>
+                    </a-list-item>
+                  )}
+                >
+                </a-list>
+              </a-tab-pane>
+            ))
+          }
+        </a-tabs>
+      )
+    },
+    renderAvaiableAnimations () {
+      return (
+        <a-tabs
+          defaultActiveKey={firstLevelAnimationOptions[0].label}
+          onChange={tab => {}}
+          style="width:100%;"
+          tabBarStyle={{}}
+          size="small"
+          tabBarGutter={0}
+        >
+          {
+            firstLevelAnimationOptions.map(firstGroup => (
+              <a-tab-pane tab={firstGroup.label} key={firstGroup.label}>
+                {/* group.label.match(firstGroup.value) <-> !!'abc'.match(/a|e/) === true */}
+                {this.renderSecondAnimationTabs(animationOptions.filter(group => !!group.label.match(firstGroup.value)))}
+              </a-tab-pane>
+            ))
+          }
+        </a-tabs>
+      )
+    },
+    renderAnimationOptions () {
+      return (
+        <a-form layout="horizontal">
+          <a-form-item label="动画类型" labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }}>
+            {/* <a-popover placement="left" title="动画列表" trigger="click">
+              <template slot="content">
+                {this.renderAvaiableAnimations()}
+              </template>
+              <a-button type="primary">动画列表</a-button>
+            </a-popover> */}
+            <a-button type="link" size="small" icon="ordered-list" onClick={() => { this.drawerVisible = true }}>动画列表</a-button>
+          </a-form-item>
+          <a-form-item label="动画时间" labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }} style="margin-bottom:0;">
+            <a-form-item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
+              <a-slider id="test" defaultValue={30} />
+            </a-form-item>
+            <a-form-item style={{ display: 'inline-block', width: 'calc(50% - 12px)' }}>
+              <a-input-number min={1} max={20} size="small" formatter={value => `${value}秒`}/>
+            </a-form-item>
+          </a-form-item>
+          <a-form-item label="循环播放" labelCol={{ span: 5 }} wrapperCol={{ span: 16, offset: 2 }} style="margin-bottom:0;">
+            <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
+          </a-form-item>
+        </a-form>
+      )
+    }
+  },
+  render (h) {
+    return (
+      <div class="main-animate widget" id="animation-edit-panel">
+        <a-button-group>
+          <a-button type="primary" onClick={this.addAnimation}><a-icon type="plus" />添加动画</a-button>
+          <a-button type="primary" onClick={this.runAnimate}>运行动画<a-icon type="right-circle" /></a-button>
+        </a-button-group>
+        {
+          this.animationQueue.length &&
+          <a-collapse activeKey={this.activeCollapsePanel} onChange={(val) => { this.activeCollapsePanel = val }} class="collapse-wrapper">
+            {
+              this.animationQueue.map((addedAnimation, index) => (
+                <a-collapse-panel key={`${index}`}>
+                  <template slot="header">
+                    <span>动画{index + 1}</span>
+                    <a-tag color="orange">{animationValue2Name[addedAnimation.type] }</a-tag>
+                    {/* <a-icon onClick={this.deleteAnimate(index)}></a-icon> */}
+                  </template>
+                  {this.renderAnimationOptions()}
+                </a-collapse-panel>
+              ))
+            }
+          </a-collapse>
+        }
+
+        <a-drawer
+          title="请选择动画"
+          placement="left"
+          closable={true}
+          onClose={() => { this.drawerVisible = false }}
+          visible={this.drawerVisible}
+          width={400}
+          wrapStyle={{ margin: '-16px' }}
+        >
+          <div style="width: 100%;">
+            {this.renderAvaiableAnimations()}
+          </div>
+        </a-drawer>
+      </div>
+    )
+  }
+}
@@ -8,6 +8,7 @@ import RenderEditCanvas from &#39;./canvas/edit&#39;
 import RenderPreviewCanvas from './canvas/preview'
 import RenderPropsEditor from './edit-panel/props'
 import RenderScriptEditor from './edit-panel/script'
+import RenderAnimationEditor from './edit-panel/animation'
 import RenderActoionEditor from './edit-panel/action'
 import RenderShortcutsPanel from './shortcuts-panel/index'
 import PreviewDialog from './modals/preview.vue'
@@ -281,7 +282,7 @@ export default {
                 {/* { this.renderPropsEditorPanel(h) } */}
                 <RenderPropsEditor/>
               </a-tab-pane>
-              <a-tab-pane label="动画" key='动画' tab='动画'>动画</a-tab-pane>
+              <a-tab-pane label="动画" key='动画' tab='动画'><RenderAnimationEditor /></a-tab-pane>
               <a-tab-pane label="动作" key='动作' tab='动作'>{this.activeTabKey === '动作'}{ this.activeTabKey === '动作' && <RenderActoionEditor/> }</a-tab-pane>
               <a-tab-pane label="脚本" key='脚本' tab='脚本'><RenderScriptEditor/></a-tab-pane>
             </a-tabs>
+@mixin shortcut-button {
+  border: 1px dashed #fff;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all .25s;
+  background-color: #f5f8fb;
+  margin-bottom: 15px;
+  flex-direction: column;
+  color: #393e46;
+  width: 100%;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+  .shortcut-icon {
+    padding: 4px;
+    // display: block;
+    // font-size: 16px;
+    // margin-bottom: 10px;
+  }
+}
+
 #luban-editor-layout,
 #luban-work-manager-layout  {
   .header {
@@ -29,30 +54,10 @@
   }
   .shortcut-button {
-    border: 1px dashed #fff;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all .25s;
-    background-color: #f5f8fb;
-    margin-bottom: 15px;
-    flex-direction: column;
-    color: #393e46;
-    width: 100%;
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-    .shortcut-icon {
-      padding: 4px;
-      // display: block;
-      // font-size: 16px;
-      // margin-bottom: 10px;
-    }
+    @include shortcut-button;
   }
+
   .canvas-wrapper {
     border: 1px dashed #e7e7e7;
     // padding: '12px';
@@ -122,7 +127,25 @@
     background-repeat: no-repeat;
     background-position: center center;
   }
+}
+
+.shortcut-button {
+  @include shortcut-button;
+}
+
+// 动画编辑面板定制
+#animation-edit-panel {
+  .ant-collapse-header {
+    padding: 6px 0 6px 40px;
+  }
+
+  .collapse-wrapper {
+    margin-top: 12px;
+    .ant-form-item {
+      margin-bottom: 0;
+    }
+  }
 }
 .default-router-link {
+// #!zh: 可选的动画列表的第一个层级
+export const firstLevelAnimationOptions = [
+  {
+    label: '进入',
+    value: /进/
+  },
+  {
+    label: '退出',
+    value: /退/
+  },
+  {
+    label: '强调',
+    value: /强调|特殊/
+  }
+]
+
+export const animationOptions = [
+  {
+    label: '',
+    value: '空',
+    children: [
+      {
+        label: '无',
+        value: ''
+      }
+    ]
+  },
+  {
+    label: '强调',
+    value: 'Attention Seekers',
+    children: [
+      {
+        label: '旋转',
+        value: 'justRotate'
+      }, {
+        label: '弹跳',
+        value: 'bounce'
+      },
+      {
+        label: '闪烁',
+        value: 'flash'
+      },
+      {
+        label: '跳动',
+        value: 'pulse'
+      },
+      {
+        label: '抖动',
+        value: 'shake'
+      },
+      {
+        label: '摇摆',
+        value: 'swing'
+      },
+      {
+        label: '橡皮圈',
+        value: 'rubberBand'
+      },
+      {
+        label: '果冻',
+        value: 'jello'
+      },
+      {
+        label: '',
+        value: 'tada'
+      },
+      {
+        label: '',
+        value: 'wobble'
+      }
+    ]
+  },
+
+  {
+    label: '弹跳进入',
+    value: 'Bouncing Entrances',
+    children: [{
+      label: '弹跳进入',
+      value: 'bounceIn'
+    },
+    {
+      label: '向下弹跳进入',
+      value: 'bounceInDown'
+    },
+    {
+      label: '向右弹跳进入',
+      value: 'bounceInLeft'
+    },
+    {
+      label: '向左弹跳进入',
+      value: 'bounceInRight'
+    },
+    {
+      label: '向上弹跳进入',
+      value: 'bounceInUp'
+    }
+    ]
+  },
+
+  {
+    label: '弹跳退出',
+    value: 'Bouncing Exits',
+    children: [{
+      label: '弹跳退出',
+      value: 'bounceOut'
+    },
+    {
+      label: '向下弹跳退出',
+      value: 'bounceOutDown'
+    },
+    {
+      label: '向左弹跳退出',
+      value: 'bounceOutLeft'
+    },
+    {
+      label: '向右弹跳退出',
+      value: 'bounceOutRight'
+    },
+    {
+      label: '向上弹跳退出',
+      value: 'bounceOutUp'
+    }
+    ]
+  },
+
+  {
+    label: '渐显进入',
+    value: 'Fading Entrances',
+    children: [
+      {
+        label: '渐显进入',
+        value: 'fadeIn'
+      },
+      {
+        label: '向下渐显进入',
+        value: 'fadeInDown'
+      },
+      {
+        label: '由屏幕外向下渐显进入',
+        value: 'fadeInDownBig'
+      },
+      {
+        label: '向右显进入',
+        value: 'fadeInLeft'
+      },
+      {
+        label: '由屏幕外向右渐显进入',
+        value: 'fadeInLeftBig'
+      },
+      {
+        label: '向左渐显进入',
+        value: 'fadeInRight'
+      },
+      {
+        label: '由屏幕外向左渐显进入',
+        value: 'fadeInRightBig'
+      },
+      {
+        label: '向上渐显进入',
+        value: 'fadeInUp'
+      },
+      {
+        label: '由屏幕外向上渐显进入',
+        value: 'fadeInUpBig'
+      }
+    ]
+  },
+
+  {
+    label: '渐隐退出',
+    value: 'Fading Exits',
+    children: [
+      {
+        label: '渐隐退出',
+        value: 'fadeOut'
+      },
+      {
+        label: '向下渐隐退出',
+        value: 'fadeOutDown'
+      },
+      {
+        label: '向下渐隐退出屏幕外',
+        value: 'fadeOutDownBig'
+      },
+      {
+        label: '向左渐隐退出',
+        value: 'fadeOutLeft'
+      },
+      {
+        label: '向左渐隐退出屏幕外',
+        value: 'fadeOutLeftBig'
+      },
+      {
+        label: '向右渐隐退出',
+        value: 'fadeOutRight'
+      },
+      {
+        label: '向右渐隐退出屏幕外',
+        value: 'fadeOutRightBig'
+      },
+      {
+        label: '向上渐隐退出',
+        value: 'fadeOutUp'
+      },
+      {
+        label: '向上渐隐退出屏幕外',
+        value: 'fadeOutUpBig'
+      }
+    ]
+  },
+
+  {
+    label: '翻动',
+    value: 'Flippers',
+    children: [{
+      label: '翻动',
+      value: 'flip'
+    },
+    {
+      label: '纵向翻动',
+      value: 'flipInX'
+    },
+    {
+      label: '横向翻动',
+      value: 'flipInY'
+    },
+    {
+      label: '立体纵向翻动',
+      value: 'flipOutX'
+    },
+    {
+      label: '立体横向翻动',
+      value: 'flipOutY'
+    }
+    ]
+  },
+
+  {
+    label: '加速进出',
+    value: 'Lightspeed',
+    children: [{
+      label: '加速进入',
+      value: 'lightSpeedIn'
+    },
+    {
+      label: '加速退出',
+      value: 'lightSpeedOut'
+    }
+    ]
+  },
+
+  {
+    label: '旋转渐显',
+    value: 'Rotating Entrances',
+    children: [{
+      label: '旋转渐显',
+      value: 'rotateIn'
+    },
+    {
+      label: '左下角旋转渐显',
+      value: 'rotateInDownLeft'
+    },
+    {
+      label: '旋转渐显',
+      value: '右下角rotateInDownRight'
+    },
+    {
+      label: '左上角旋转渐显',
+      value: 'rotateInUpLeft'
+    },
+    {
+      label: '右上角旋转渐显',
+      value: 'rotateInUpRight'
+    }
+    ]
+  },
+
+  {
+    label: '旋转渐隐',
+    value: 'Rotating Exits',
+    children: [
+      {
+        label: '旋转渐隐',
+        value: 'rotateOut'
+      },
+      {
+        label: '左下角旋转渐隐',
+        value: 'rotateOutDownLeft'
+      },
+      {
+        label: '左下角旋转渐隐',
+        value: 'rotateOutDownRight'
+      },
+      {
+        label: '左上角旋转渐隐',
+        value: 'rotateOutUpLeft'
+      },
+      {
+        label: '右上角旋转渐隐',
+        value: 'rotateOutUpRight'
+      }
+    ]
+  },
+
+  {
+    label: '平移进入',
+    value: 'Sliding Entrances',
+    children: [{
+      label: '向上平移进入',
+      value: 'slideInUp'
+    },
+    {
+      label: '向下平移进入',
+      value: 'slideInDown'
+    },
+    {
+      label: '向右平移进入',
+      value: 'slideInLeft'
+    },
+    {
+      label: '向左平移进入',
+      value: 'slideInRight'
+    }
+
+    ]
+  },
+  {
+    label: '平移退出',
+    value: 'Sliding Exits',
+    children: [{
+      label: '向上平移退出',
+      value: 'slideOutUp'
+    },
+    {
+      label: '向下平移退出',
+      value: 'slideOutDown'
+    },
+    {
+      label: '向左平移退出',
+      value: 'slideOutLeft'
+    },
+    {
+      label: '向右平移退出',
+      value: 'slideOutRight'
+    }
+    ]
+  },
+
+  {
+    label: '放大进入',
+    value: 'Zoom Entrances',
+    children: [{
+      label: '放大进入',
+      value: 'zoomIn'
+    },
+    {
+      label: '向下放大进入',
+      value: 'zoomInDown'
+    },
+    {
+      label: '向右放大进入',
+      value: 'zoomInLeft'
+    },
+    {
+      label: '向左放大进入',
+      value: 'zoomInRight'
+    },
+    {
+      label: '向上放大进入',
+      value: 'zoomInUp'
+    }
+    ]
+  },
+
+  {
+    label: '缩小退出',
+    value: 'Zoom Exits',
+    children: [{
+      label: '缩小退出',
+      value: 'zoomOut'
+    },
+    {
+      label: '向下缩小退出',
+      value: 'zoomOutDown'
+    },
+    {
+      label: '向左缩小退出',
+      value: 'zoomOutLeft'
+    },
+    {
+      label: '向右缩小退出',
+      value: 'zoomOutRight'
+    },
+    {
+      label: '向上缩小退出',
+      value: 'zoomOutUp'
+    }
+    ]
+  },
+
+  {
+    label: '特殊效果',
+    value: 'Specials',
+    children: [
+      {
+        label: '悬挂',
+        value: 'hinge'
+      },
+      {
+        label: '滚动进入',
+        value: 'rollIn'
+      },
+      {
+        label: '滚动退出',
+        value: 'rollOut'
+      }
+    ]
+  }
+]
+
+/**
+ * @return {Object} { animationValue: animatonLabel }
+ */
+export const animationValue2Name = animationOptions.reduce((obj, curr) => {
+  const items = curr.children
+  items.forEach(item => { obj[item.value] = item.label })
+  return obj
+}, {})
@@ -1369,6 +1369,11 @@ amdefine@&gt;=0.0.4:
   resolved "https://registry.npm.taobao.org/amdefine/download/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
   integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
+animate.css@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.npm.taobao.org/animate.css/download/animate.css-3.7.2.tgz#e73e0d50e92cb1cfef1597d9b38a9481020e08ea"
+  integrity sha1-5z4NUOkssc/vFZfZs4qUgQIOCOo=
+
 ansi-colors@^3.0.0:
   version "3.2.4"
   resolved "https://registry.npm.taobao.org/ansi-colors/download/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"