Anime+Vue<svg數字時鐘效果>

效果圖:

20200317.gif

參考效果地址:http://www.jq22.com/code3076

代碼如下:
<template>
  <div class="overall">
    <div class="clock" v-for="(i,index) in 6" :key="index" data-number="0">
      <svg viewBox="0 0 50 100">
        <path d="M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0" />
      </svg>
    </div>
  </div>
</template>

<script>
import anime from "animejs/lib/anime.es.js";
export default {
  data() {
    return {
      clockTags: null,
      paths: [
        // 0
        "M0,0 L50,0 L50,50 L50,100 L0,100 L0,25 L0,0",
        // 1
        "M50,0 L50,15 L50,30 L50,45 L50,60 L50,75 L50,100",
        // 2
        "M0,0 L50,0 L50,50 L25,50 L0,50 L0,100 L50,100",
        // 3
        "M0,0 L50,0 L50,100 L0,100 L50,100 L50,50 L0,50",
        // 4
        "M0,0 L0,50 L50,50 L50,0 L50,35 L50,70 L50,100",
        // 5
        "M50,0 L0,0 L0,50 L25,50 L50,50 L50,100 L0,100",
        // 6
        "M50,0 L0,0 L0,50 L0,100 L50,100, L50,50 L0,50",
        // 7
        "M0,0 L50,0 L50,20 L50,40 L50,60 L50,80 L50,100",
        // 8
        "M0,0 L50,0 L50,100 L0,100 L0,0 L0,50 L50,50",
        // 9
        "M0,100 L50,100 L50,50 L50,0 L0,0 L0,50 L50,50"
      ]
    };
  },
  mounted() {
    this.clockTags = document.getElementsByClassName("clock");
    this.setTime();
    //每隔一秒執行一次方法
    setInterval(this.setTime, 1000);
  },
  methods: {
    setTime() {
      let time_numbers = new Date()
        .toTimeString()
        .substr(0, 8)
        .split(":")
        .join("");
      // console.log(time_numbers);
      for (let i = 0; i < time_numbers.length; i++) {
        // .dataset.number 對應 html 上的 data-number
        // time_numbers.charAt(i) 下標位置
        if (this.clockTags[i].dataset.number !== time_numbers.charAt(i)) {
          this.clockTags[i].dataset.number = time_numbers.charAt(i);
          this.morphDigit(
            this.clockTags[i].querySelector("path"),
            this.paths[time_numbers.charAt(i)]
          );
        }
      }
    },
    //變換動畫
    morphDigit(tag, numberPath) {
      anime({
        targets: tag,
        d: [{ value: numberPath }],
        easing: "easeInOutExpo",
        duration: 800
      });
    }
  }
};
</script>

<style  scoped>
.overall {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(44, 121, 221);
}
svg {
  width: 100%;
  height: 100%;
}
path {
  stroke: #ffffff;
  stroke-width: 2px;
  fill: none;
}
.clock {
  margin: 0 10px;
  width: 50px;
  height: 100px;
}
.clock:nth-child(2n) {
  margin-right: 40px;
  position: relative;
}
.clock:nth-child(2n)::after {
  content: ":";
  position: absolute;
  color: #ffffff;
  font-size: 50px;
  top: 20px;
  right: -30px;
}
.clock:last-child {
  margin-right: 0px !important;
}
.clock:last-child::after {
  display: none !important;
}
</style>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 效果圖: 此篇文章是我根據效果,自己仿寫的效果,并沒有直接使用以上地址的代碼~~(主要是下了也看不懂??)這里大致告...
    誰在花里胡哨閱讀 2,254評論 1 16
  • 明天有可能會上臺去講課,這還是第一次講課,為了這次講課,我已經準備來好幾天了,認真的做好PPT,認真的查詢資料,想...
    弗心書里閱讀 207評論 0 0
  • 回顧十一月,感嘆時光匆匆,也是收獲多多! 在過去的十一月里,開啟了早上的晨讀,感覺很好,再次對《弟子規》有了深入了...
    霜霜_bb0c閱讀 259評論 1 0