动态公告牌 - 使用 Vue 和 JavaScript 实现

本文介绍了一种... 极其无聊的 Vue 单页应用 —— 公告牌 —— 包含一个漂亮的动态渐变背景和动态数字大小的单页应用。可以用来计数,以及任何对外显示数字、简要信息的地方。关键是,动态渐变背景很漂亮。

JavaScript 是 Web 前端的核心,尤其是当你希望自己的 CSS 渐变背景能自己动,但是使用 CSS 内置的动画又无法完成的时候。从某种角度来看,这是 HTML 和 CSS 标准 —— 更多的是历史的问题。Web 文档陈旧、笨重,但是似乎不可或缺 —— 从来没有过这样的便捷性,在几乎任何设备上,通过网址就可访问一个应用程序 —— Java 试图做,但是失败了。

这个公告牌的展示如下所示:

面临的问题

背景问题

动态背景参照了 渐变精选 这个网站。但是,如何动态的展示渐变,让它有种流动的感觉,我开始想要使用的是 CSS 的 Translate 动画,当 hover 时自动触发背景的变换,但是发现渐变过渡是被当做 background-image 处理的,这意味着不能通过动画实现。

最后我解决方法是使用 JavaScript 定时器,定时重写 CSS 样式。

至于背景平铺的问题,因为 Vue 难以获取 HTML 元素,因此,我使用的是 Absolute 定位。

数字问题

至于垂直水平居中,这个问题,我使用的是 Flex 来解决的。同时为溢出的部分进行裁剪。

循环动画实现问题

因为动画是用 JavaScript 模拟的,因此,需要手动完成循环往复的动画效果,而不能每次动画完毕之后,立刻回到起始位置,我们想要有一种流畅感 —— 使用了一个中间状态来执行循环往复的判断。

根据屏幕自适应问题

中间的数字要根据屏幕大小自适应,这个不好办,我使用的简单粗暴的方法,直接通过 ComputedStyle 获取在 Window 显示的整个 div 高度,然后重写数字的大小。

最终的实现

代码如下:

<template>
  <div id="app">
    <div id="number">
      {{number()}}
    </div>
    <span class="link">
            Host by abc.mazhangjing.com
    </span>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  name: 'App',
  data() {
    return {
      a: 0,
      left_to_right: true
    }
  },
  methods: {
    number() {
      return moment().diff(moment('20180210','YYYYMMDD'), 'days');
    },
    updateBackground() {
      const app = document.querySelector("#app");
      if (this.a === 30) {
        this.left_to_right = false
      } else if (this.a === 0) {
        this.left_to_right = true
      }
      if (this.left_to_right) {
        this.a = this.a + 2;
      } else {
        this.a = this.a - 2;
      }
      app.style.background='linear-gradient(120deg, #a6c0fe ' + this.a + '%, #f68084 ' + (this.a + 100) + '%)';
    },
    setNumberSize() {
      const number = document.querySelector("#number");
      const appHeight = parseInt(window.getComputedStyle(document.querySelector("#app")).height);
      if (appHeight !== null && appHeight !== 0) number.style.fontSize = appHeight/2 + 'px'
    }
  },
  mounted() {
    setInterval(this.updateBackground, 500);
    this.setNumberSize();
  }
}
</script>

<style>
  #app {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
    overflow: hidden;
  }
  #number {
    font: 30em sans-serif;
    text-align: center;
    color: white;
    opacity: .5;
  }
  .link {
    color: white;
    opacity: 0.3;
    font: 1.2em sans-serif;
    letter-spacing: 1px;
  }
</style>

吐槽

没什么吐槽的,HTML 和 CSS 是 Web 标准,虽然,居中这种事情,在现代浏览器上已经很方便了,但是,动态调整高度,更加强大的动画,相比较客户端技术,比如 Qt/C++/Python 和 Flutter/Dart、JavaFx/Java/Scala/Kotlin/Conjure/Groovy 还是很差。