Vue.js + anime.js 人脑系统启动序列动画

Brain Boot Sequence，可用于系统检测、监控类应用。

vue, app

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 5233
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const StatusCodes = [
  {
    code: 2000,
    message: 'Operational'
  },
  {
    code: 5001,
    message: 'Decoupling failed'
  }
]

const checkStatusCodeRange = statusCode => {
  if (_.inRange(statusCode, 5000, 6000)) return 'error'
  if (_.inRange(statusCode, 4000, 5000)) return 'warning'
  if (_.inRange(statusCode, 2000, 3000)) return 'ok'
  return 'error'
}

const Icon = Vue.component('icon', {
  name: 'icon',
  props: {
    icon: {
      type: String,
      default: 'radio_button_unchecked'
    },
    size: {
      type: Number,
      default: 20
    }
  },
  template: `<i :class="classes.default" :style="styles.default" v-text="icon"></i>`,
  computed: {
    styles () {
      return {
        default: {
          fontSize: `${this.size}px`
        }
      }
    },
    classes () {
      return {
        default: `material-icons`
      }
    }
  }
})

const SystemsCheckItem = Vue.component('systems-check-item', {
  name: 'systems-check-item',
  props: {
    name: {
      type: String,
      default: 'Undefined'
    },
    statusCode: {
      type: Number,
      default: 5000
    },
    itemLabelClasses: {
      type: String,
      default: ''
    },
    iconSize: {
      type: Number,
      default: 20
    },
    itemContainerClasses: {
      type: String,
      default: ''
    },
    ready: {
      type: Boolean,
      default: false
    }
  },
  template: `
    <li :class="classes.item">
      <div :class="classes.container">
        <div>
          <span ref="itemLabel" :class="classes.itemLabel" v-text="name"></span>
        </div>
        <div class="flex items-center">
          <span v-text="ready ? getTypeLabel(statusCode) : 'Checking...'" class="h5 gray"></span>
          <icon :class="classes.statusIcon" :icon="ready ? itemIcon : 'radio_button_unchecked'" :size="iconSize"></icon>
        </div>
      </div>
      <slot></slot>
    </li>`,
  computed: {
    classes () {
      return {
        item: ``,
        itemLabel: `${this.itemLabelClasses}`,
        container: `flex items-center justify-between ${this.itemContainerClasses}`,
        statusIcon: `${this.ready ? this.getStatusColor(this.statusCode) : 'silver'} h2 ml2 transition-280ms transition-all`
      }
    },
    itemLabel () {
      return this.$refs.itemLabel
    },
    itemLabelCharacters () {
      return this.itemLabel.getElementsByTagName('span')
    },
    itemIcon () {
      if (_.eq(checkStatusCodeRange(this.statusCode), 'error')) return 'highlight_off'
      if (_.eq(checkStatusCodeRange(this.statusCode), 'warning')) return 'info_outline'
      return 'radio_button_unchecked'
    }
  },
  methods: {
    charm (target) {
      return Promise.resolve(charming(target, {
        classPrefix: 'inline-block invisible pre char'
      }))
    },
    animateItemLabel () {
      return anime({
        targets: this.itemLabelCharacters,
        opacity: [0, 1],
        translateX: [3, 0],
        delay: (el, i) => 50 * i
      })
    },
    getStatusColor (statusCode) {
      if (_.eq(checkStatusCodeRange(this.statusCode), 'ok')) return 'green'
      if (_.eq(checkStatusCodeRange(this.statusCode), 'error')) return 'red'
      if (_.eq(checkStatusCodeRange(this.statusCode), 'warning')) return 'orange'
      return 'silver'
    },
    getTypeLabel (statusCode) {
      const whereCodeEqualsStatusCode = c => _.eq(c.code, statusCode)
      const code = StatusCodes.find(whereCodeEqualsStatusCode)
      if (!_.isUndefined(code)) return code.message
      return 'Unknown problem detected'
    },
    check () {
      setTimeout(() => {
        this.ready = true
      }, _.random(100, 8000))
    }
  },
  mounted () {
    this.charm(this.itemLabel).then(this.animateItemLabel).then(this.check)
  },
  components: {
    Icon
  }
})

const SystemsCheck = Vue.component('systems-check', {
  name: 'systems-check',
  props: {
    systems: {
      type: Array,
      default: () => ([])
    }
  },
  template: `
    <ul class="list-reset">
      <systems-check-item 
       v-for="(system, systemIndex) of systems" 
       :key="systemIndex" 
       :name="system.name" 
       :status-code="system.status"
       item-label-classes="bold"
       item-container-classes="mt2">
         <systems-check-item 
          v-if="system.subsystems" 
          v-for="(subsystem, subsystemIndex) of system.subsystems" 
          :key="subsystemIndex"
          :name="subsystem.name"
          :status-code="subsystem.status"
          item-container-classes="h5 pl1 mb05"></systems-check-item>
      </systems-check-item>
    </ul>`,
  components: {
    SystemsCheckItem
  }
})

const StartupSequence = Vue.component('startup-sequence', {
  name: 'startup-sequence',
  props: {
    systems: {
      type: Array,
      default: () => ([])
    }
  },
  template: `
    <div>
      <systems-check :systems="systems"></systems-check>
    </div>`,
  components: {
    SystemsCheck
  }
})

new Vue({
  el: '#app',
  data () {
    return {
      systems: [
        {
          name: 'Rhombencephalon',
          status: 2000,
          subsystems: [
            { name: 'Myelencephalon', status: 2000 },
            { name: 'Metencephalon', status: 2000 }            
          ]
        },
        {
          name: 'Mesencephalon',
          status: 4000,
          subsystems: [
            { name: 'Tectum', status: 2000 },
            { name: 'Pretectum', status: 5001 },
            { name: 'Tegmentum', status: 2000 },
            { name: 'Cerebral peduncle', status: 2000 },
            { name: 'Mesencephalic cranial nerve nuclei', status: 2000 },
            { name: 'Mesencephalic duct', status: 2000 }
          ]          
        },
        {
          name: 'Prosencephalon',
          status: 2000,
          subsystems: [
            { name: 'Diencephalon', status: 2000 },
            { name: 'Epithalamus', status: 2000 },
            { name: 'Third ventricle', status: 2000 },
            { name: 'Thalamus', status: 2000 },
            { name: 'Hypothalamus', status: 2000 },
            { name: 'Subthalamus', status: 4001 },
            { name: 'Pituitary gland', status: 2000 },
            { name: 'Telencephalon', status: 2000 },
            { name: 'White matter', status: 4000 },
            { name: 'Subcortical', status: 2000 },
            { name: 'Rhinencephalon', status: 5000 },
            { name: 'Cerebral cortex', status: 2000 }
          ]
        },
        {
          name: 'Neural Pathways',
          status: 2000,
          subsystems: [
            { name: 'Superior longitudinal fasciculus', status: 2000 },
            { name: 'Motor Systems', status: 2000 },
            { name: 'Somatosensory system', status: 2000 },
            { name: 'Visual system', status: 5001 },
            { name: 'Auditory system', status: 2000 },
            { name: 'Nerves', status: 2000 }
          ]
        },
        {
          name: 'Neuro Endocrine Systems',
          status: 2000,
          subsystems: [
            { name: 'Hypothalamic-pituitary hormones', status: 2000 },
            { name: 'Hypothalamic–neurohypophyseal system', status: 2000 }
          ]
        },
        {
          name: 'Neuro Vascular Systems',
          status: 2000
        },
        {
          name: 'Dural Meningeal System',
          status: 2000
        }        
      ]
    }
  },
  components: {
    StartupSequence
  }
})

编译

CSS

*,
*::before,
*::after {
    position: relative;
    box-sizing: border-box;
}
html,
body,
main {
    height: 100%;
}
.fw-900 {
    font-weight: 900;
}
.fw-700 {
    font-weight: 700;
}
.ff-serif {
    font-family: 'Playfair Display', Georgia, serif;
}
.ff-sans {
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
.fill-height {
    height: 100%;
}
.rounded2 {
    border-radius: 6px;
}
.lh1 {
    line-height: 1;
}
.lh0 {
    line-height: 0;
}
.transition-all {
    transition-property: all;
}
.transition-100ms {
    transition-duration: 100ms;
}
.transition-200ms {
    transition-duration: 200ms;
}
.transition-600ms {
    transition-duration: 600ms;
}
.transition-ease-in-out {
    transition-timing-function: ease-in-out;
}
.transition-cubic {
    transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.transition-ease-in-out-back {
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.transition-delay-2s {
    transition-delay: 2s;
}
.z0 {
    z-index: 0;
}
.outline-none {
    outline: none;
}
.cursor-pointer {
    cursor: pointer;
}
.box-shadow {
    box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.18);
}
.box-shadow-bottom {
    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.22);
}
.min-width1 {
    min-width: 100px;
}
.mt2-not-last:not(last-child) {
    margin-top: 1rem;
}
.indent1,
.indent1-hover:hover {
    text-indent: 5px;
}
.bg-transparent {
    background-color: transparent;
}
.border-width2 {
    border-width: 2px;
}
.reset-skewY {
    transform: skewY(0);
}
.skewY {
    transform: skewY(5deg);
}
.skewY-neg {
    transform: skewY(-5deg);
}
.fill-half {
    width: 50%;
}
.bg-black-semitransparent {
    background-color: rgba(0, 0, 0, 0.65);
}
.opaque {
    opacity: 1;
}
.semi-transparent {
    opacity: .65;
}
.translucent {
    opacity: 0;
}
.pointer-events-none {
    pointer-events: none;
}
.perspective-1000 {
    perspective: 1000px;
}
#app {
    width: 500px;
}
.invisible {
    opacity: 0;
}
.min-width-05 {
    min-width: 5px;
}
.pre {
    white-space: pre;
}
.mb05 {
    margin-bottom: .125rem;
}
.transition-140ms {
    transition-duration: 140ms;
}
.transition-280ms {
    transition-duration: 280ms;
}
.transition-all {
    transition-property: all;
}

HTML

Brain Boot Sequence，可用于系统检测、监控类应用。

vue, app

编辑器支持Emmet

快捷键

Brain Boot Sequence，可用于系统检测、监控类应用。

vue, app

Vue.JS + Tailwind.CSS魔法巫师帽电商移动网页应用模板

使用Vue2.js实现的矩阵排序动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：