BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

キャンバス版体内時計の実装例

2022-01-11 14:30:07

ベテランのウェブユーザーはこの魔法の時計プラグインを覚えているかどうか。

十数年来のウェブサーファーとして、私は少し前にこの写真を見て、即座に防御を破り、直接10年前のQQ空間に夢想し、年月の浪費、時間の経過、若さがない、それは悲しくないです。 /実際の

まず、このような素晴らしい、そして楽しいプラグインを提供してくれた原作者に感謝します。{{a http://chabudai.org/blog/?p=59

今回は、便利な図にするために、それは直接pixi.jsがアニメーションを行うことであり、油管のビデオからアニメーション素材、PSフレームバイフレームキーイングとエクスポートを取得し、プロセスが詳細になることはありません。スプライトマップと対応するjsonファイルを合成した後、記事の最後に載せます。

コアAPIは PIXI.AnimatedSprite .

代码也是很短，就直接放到下面了。 

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>HoneHoneClock</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    html, body {
      Breite: 100%;
      Höhe: 100%;
    }
    body {
      background-color: lightcyan;
    }
    canvas {
      Position: absolut;
      links: 0;
      top: 0;
      Breite: 100%;
      Höhe: 100%;
      z-index: 1;
    }
  </style>
</head>
<body>
<canvas class="canvas"></canvas>
<script src="pixi_5.3.4.min.js"></script>
<script src="Stats.min.js"></script>
<script>

  (async function () {
    con stats = new Stats()
    document.body.appendChild(stats.domElement)

    let pageWidth = 0
    let pageHeight = 0

    let clockHour1, clockHour2
    let clockMin1, clockMin2
    let clockSec1, clockSec2
    const $canvas = document.querySelector('Leinwand')
    const renderer = new PIXI.Renderer({
      Ansicht: $canvas,
      width: pageWidth,
      height: pageHeight,
      transparent: true,
      autoDensity: wahr,
      antialias: true
    })

    // 人体时钟
    class Clock extends PIXI.Container {
      constructor (name) {
        super()
        constures = loader.resources[honeHoneClockJson].textures
        let frames = []
        let aniData = []
        if (this.frames) {
          frames = this.frames
          aniData = this.aniData
        }
        sonst {
          aniData = [
            {
              Präfix: '0',
              count: 6,
              frameFrom: -1,
              frameTo: -1,
            },
            {
              Präfix: '1',
              count: 9,
              frameFrom: -1,
              frameTo: -1,
            },
            {
              Präfix: '2',
              count: 7,
              frameFrom: -1,
              frameTo: -1,
            },
            {
              Präfix: '3',
              count: 6,
              frameFrom: -1,
              frameTo: -1,
            },
            {
              Präfix: '4',
              count: 9,
              frameFrom: -1,
              frameTo: -1,
            },
            {
              Präfix: '5',
              count: 14,
              frameFrom: -1,
              frameTo: -1,
            },
            {
              Präfix: '6',
              count: 7,
              frameFrom: -1,
              frameTo: -1,
            },
            {
              Präfix: '7',
              count: 10,
              frameFrom: -1,
              frameTo: -1,
            },
            {
              Präfix: '8',
              count: 7,
              frameFrom: -1,
              frameTo: -1,
            },
            {
              Präfix: '9',
              count: 9,
              frameFrom: -1,
              frameTo: -1,
            },
          ]
          let k = 0
          for (let i = 0; i < aniData.length; i++) {
            const data = aniData[i]
            data.frameFrom = k
            for (let j = 1; j <= data.count; j++) {
              k++
              frames.push(textures[`${data.prefix}(${j}).png`])
            }
            data.frameTo = k - 1
          }
          this.frames = frames
          this.aniData = aniData
        }
        const ani = new PIXI.AnimatedSprite(frames)
        ani.anchor.set(0.5, 1)
        ani.animationSpeed = 0.4

        this.stopAt = -1
        ani.onFrameChange = () => {
          if (ani.currentFrame === this.stopAt) {
            ani.stop()
          }
        }
        this.addChild(ani)
        this.name = name
        this.ani = ani
        this.num = -1
      }

      set Zahl (Zahl) {
        if (this.num !== number) {
          this.num = Zahl
          this.stopAt = this.aniData[Zahl].frameTo
          this.ani.gotoAndPlay(this.aniData[number].frameFrom)
        }
      }
    }

    const stage = new PIXI.Container()
    stage.name = 'stage'
    let clockWrap

    const ticker = new PIXI.Ticker()
    let now = new Datum()
    let lastTime = now.getTime()
    const loop = function () {
      stats.begin()
      jetzt = neues Datum()
      if (now.getTime() - lastTime >= 1000) {
        let hours = now.getHours()
        if (hours > 9) {
          clockHour1.number = Math.floor(hours / 10)
          UhrStunde2.Zahl = Stunden % 10
        }
        sonst {
          UhrStunde1.Zahl = 0
          UhrStunde2.Zahl = Stunden
        }

        let minutes = now.getMinutes()
        if (minutes > 9) {
          UhrMin1.Zahl = Math.floor(Minuten / 10)
          clockMin2.number = Minuten % 10
        }
        sonst {
          UhrMin1.Zahl = 0
          clockMin2.number = Minuten

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します