WX-DongXing / vue-animation-timeline

A visual element animation configuration editor based on timeline，compatible with vue2.x and vue3

Vue Animation Timeline

A visual element animation configuration editor based on timeline。

English | 简体中文

✨ Features

• 🚀 Visual element animation configuration based on timeline
• 💫 Support CSS Transform animation Properties
• ✅ Compatible with vue2.x and vue3

📦 Install

vue2.x

yarn add vue-animation-timeline

vue3

yarn add vue-animation-timeline@next

🧐 Usage

vue2.x

import Vue from 'vue';
import VueAnimationTimeline from 'vue-animation-timeline';

Vue.use(VueAnimationTimeline)

vue3

import { createApp } from 'vue';
import VueAnimationTimeline from 'vue-animation-timeline';

const app = createApp({});

app.use(VueAnimationTimeline);

app.mount('#app');

💡 Example

<template>
  <main>
    <section class="widgets">
      <div
          class="widget"
          v-for="widget in widgets"
          :key="widget.id"
          v-animation="widget"
      >
        {{ widget.name }}
      </div>
    </section>
    
    <animation-timeline :widgets="widgets" :fields="fields" @onUpdate="handleUpdate" />
  </main>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue'

export default defineComponent({
  // vue2.x
  data () {
    return {
      widgets: [
        { id: 1, name: 'A', y: 32, x: 72, width: 84, height: 84 },
      ],
      fields: {
        name: 'name',
        width: 'width',
        height: 'height',
        top: 'y',
        left: 'x',
      }
    }
  },
  methods: {
    handleUpdate(widgets) {
      this.widgets = widgets;
    },
  },
  // vue3
  setup() {
    const widgets = ref([
      { id: 1, name: 'A', y: 32, x: 72, width: 84, height: 84 },
    ]);

    const fields = reactive({
      name: 'name',
      width: 'width',
      height: 'height',
      top: 'y',
      left: 'x',
    });
    
    const handleUpdate = (widgets) => {
      widgets.value = widgets;
    };
    
    return {
      widgets,
      fields,
      handleUpdate,
    }
  },
})
</script>
<style scoped>
.widgets {
  position: relative;
}

.widget {
  position: absolute;
}
</style>

🔧 Config

Properties

widgets: Element arrays

fields: Field mapping

Properties	Description
key	Unique identifier
name	Name field mapping，default 'name'
width	Width field mapping，default 'width'
height	Width field mapping，default 'width'
top	Absolute positioning top field mapping，default 'top'
left	Absolute positioning left field mapping，default 'left'

Instance Properties

$animate: animate instance

Function	Description
play	Execute animation
pause	Pause animation
restart	Restart animation
seek	Execute animation to a given time，example animate.seek(1000): execute animation to 1s

Shortcut Key

Key	Description
space	Play And Pause
⌘ + backspace	Back
⌘ + enter	Restart
←	Decrease 20ms
→	Increase 20ms
control + shift + ←	Jump To Previous Anchor
control + shift + →	Jump To Next Anchor

Event

onUpdate: Update current widget configs

onSelect: Select current widget

License

MIT

Copyright (c) 2021 Dong Xing