検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >Vue 状態での監視に何を使用するか

Vue 状態での監視に何を使用するか

青灯夜游
青灯夜游オリジナル
2022-12-21 17:47:301796ブラウズ

Vue ステータスは、監視のためにリスナー「watch」を過剰に使用します。リスナーを通じて、任意の値プロパティの値の更新を監視できます。 Vue リスナーは、開発者が特定のデータの変更を監視し、これらのデータの変更に基づいて特定の操作を実行するために提供されます。リスナーは本質的に関数であることに注意してください。データの変化を監視する場合は、そのデータを関数名として使用します。

Vue 状態での監視に何を使用するか

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

状態遷移

状態は数値、色の値、属性値などを含むデータであるため、状態遷移とはデータそのものの遷移効果を指します。 。

Vue では、状態遷移を実現するために「データ駆動型の応答性の高い更新」アプローチを推奨しています。主なアイデアは、状態を応答変数に変換し、いくつかの動的ライブラリを使用して応答変数を更新することで、Vue の応答更新を駆動し、動的遷移効果を実現することです。

Vue のトランジション システムには、開始、終了、リストをアニメーション化するための簡単なメソッドが多数用意されています。次のようなデータ要素自体のアニメーションはどうでしょうか。

    数値と操作
  • カラー表示
  • SVG ノードの位置
  • 要素サイズおよびその他のプロパティ
これらのデータは、それ自体が数値形式で保存されるか、数値に変換できます。これらの値を念頭に置いて、Vue の応答性とコンポーネント システムを組み合わせ、サードパーティのライブラリを使用してスイッチング要素の遷移状態を実装できます。

1. ステータス アニメーションとリスナー

リスナーを通じて、数値プロパティの値の更新を監視できます。

Vue リスナーは、開発者が特定のデータの変更を監視し、これらのデータの変更に基づいて特定の操作を実行するために提供されます。

ただし、注意してください: リスナーは本質的に関数です。データの変化を監視したい場合は、そのデータを関数名として使用してください。

抽象的に聞こえるかもしれません。まず

GreenSock を使用した例を見てください: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>

<div id="animated-number-demo">
  <input v-model.number="number" type="number" step="20">
  <p>{{ animatedNumber }}</p>
</div>
<script>
new Vue({
  el: &#39;#animated-number-demo&#39;,
  data: {
    number: 0,
    tweenedNumber: 0
  },
  computed: {
    animatedNumber: function() {
      return this.tweenedNumber.toFixed(0);
    }
  },
  watch: {
    number: function(newValue) {
      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
    }
  }
})
</script>

##値を更新すると、アニメーションがトリガーされます。これは良いデモンストレーションですが、CSS の色の値など、数値のように直接保存できない値の場合、次の例では

Tween.js

と Color.js を使用します。 例を実装します: 

<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<script src="https://cdn.jsdelivr.net/npm/color-js@1.0.3"></script>
 
<div id="example-7">
  <input
    v-model="colorQuery"
    v-on:keyup.enter="updateColor"
    placeholder="Enter a color"
  >
  <button v-on:click="updateColor">Update</button>
  <p>Preview:</p>
  <span
    v-bind:style="{ backgroundColor: tweenedCSSColor }"
    class="example-7-color-preview"
  ></span>
  <p>{{ tweenedCSSColor }}</p>
</div>
<script>
var Color = net.brehaut.Color
 
new Vue({
  el: &#39;#example-7&#39;,
  data: {
    colorQuery: &#39;&#39;,
    color: {
      red: 0,
      green: 0,
      blue: 0,
      alpha: 1
    },
    tweenedColor: {}
  },
  created: function () {
    this.tweenedColor = Object.assign({}, this.color)
  },
  watch: {
    color: function () {
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }
 
      new TWEEN.Tween(this.tweenedColor)
        .to(this.color, 750)
        .start()
 
      animate()
    }
  },
  computed: {
    tweenedCSSColor: function () {
      return new Color({
        red: this.tweenedColor.red,
        green: this.tweenedColor.green,
        blue: this.tweenedColor.blue,
        alpha: this.tweenedColor.alpha
      }).toCSS()
    }
  },
  methods: {
    updateColor: function () {
      this.color = new Color(this.colorQuery).toRGB()
      this.colorQuery = &#39;&#39;
    }
  }
})
.example-7-color-preview {
  display: inline-block;
  width: 50px;
  height: 50px;
}
</script>

2. 動的状態遷移

遷移と同じようにVue コンポーネントと同様に、データの背後にある状態遷移がリアルタイムで更新されるため、プロトタイピングに非常に役立ちます。いくつかの変数を変更すると、単純な SVG ポリゴンであっても、想像を絶する多くの効果を実現できます。 

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic State Transitions</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenLite.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <style>
      svg {
        display: block;
      }
      polygon {
        fill: #41b883;
      }
      circle {
        fill: transparent;
        stroke: #35495e;
      }
      input[type="range"] {
        display: block;
        width: 100%;
        margin-bottom: 15px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <svg width="200" height="200">
        <polygon :points="points"></polygon>
        <circle cx="100" cy="100" r="90"></circle>
      </svg>
      <label>Sides: {{ sides }}</label>
      <input type="range" min="3" max="500" v-model.number="sides" />
      <label>Minimum Radius: {{ minRadius }}%</label>
      <input type="range" min="0" max="90" v-model.number="minRadius" />
      <label>Update Interval: {{ updateInterval }} milliseconds</label>
      <input type="range" min="10" max="2000" v-model.number="updateInterval" />
    </div>
 
    <script>
      new Vue({
        el: "#app",
        data: function() {
          var defaultSides = 10;
          var stats = Array.apply(null, { length: defaultSides }).map(
            function() {
              return 100;
            }
          );
          return {
            stats: stats,
            points: generatePoints(stats),
            sides: defaultSides,
            minRadius: 50,
            interval: null,
            updateInterval: 500
          };
        },
        watch: {
          sides: function(newSides, oldSides) {
            var sidesDifference = newSides - oldSides;
            if (sidesDifference > 0) {
              for (var i = 1; i <= sidesDifference; i++) {
                this.stats.push(this.newRandomValue());
              }
            } else {
              var absoluteSidesDifference = Math.abs(sidesDifference);
              for (var i = 1; i <= absoluteSidesDifference; i++) {
                this.stats.shift();
              }
            }
          },
          stats: function(newStats) {
            TweenLite.to(this.$data, this.updateInterval / 1000, {
              points: generatePoints(newStats)
            });
          },
          updateInterval: function() {
            this.resetInterval();
          }
        },
        mounted: function() {
          this.resetInterval();
        },
        methods: {
          randomizeStats: function() {
            var vm = this;
            this.stats = this.stats.map(function() {
              return vm.newRandomValue();
            });
          },
          newRandomValue: function() {
            return Math.ceil(
              this.minRadius + Math.random() * (100 - this.minRadius)
            );
          },
          resetInterval: function() {
            var vm = this;
            clearInterval(this.interval);
            this.randomizeStats();
            this.interval = setInterval(function() {
              vm.randomizeStats();
            }, this.updateInterval);
          }
        }
      });
 
      function valueToPoint(value, index, total) {
        var x = 0;
        var y = -value * 0.9;
        var angle = ((Math.PI * 2) / total) * index;
        var cos = Math.cos(angle);
        var sin = Math.sin(angle);
        var tx = x * cos - y * sin + 100;
        var ty = x * sin + y * cos + 100;
        return { x: tx, y: ty };
      }
 
      function generatePoints(stats) {
        var total = stats.length;
        return stats
          .map(function(stat, index) {
            var point = valueToPoint(stat, index, total);
            return point.x + "," + point.y;
          })
          .join(" ");
      }
    </script>
  </body>
</html>

3. 遷移をコンポーネントに配置します

状態遷移を管理しすぎると、Vue インスタンスの数がすぐに増加します。コンポーネントは複雑ですが、幸いなことに、多くのアニメーションを専用のサブコンポーネントに抽出できます。前の例を書き直してみます: 

<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
 
<div id="example-8">
  <input v-model.number="firstNumber" type="number" step="20"> +
  <input v-model.number="secondNumber" type="number" step="20"> =
  {{ result }}
  <p>
    <animated-integer v-bind:value="firstNumber"></animated-integer> +
    <animated-integer v-bind:value="secondNumber"></animated-integer> =
    <animated-integer v-bind:value="result"></animated-integer>
  </p>
</div>
<script>
// 这种复杂的补间动画逻辑可以被复用
// 任何整数都可以执行动画
// 组件化使我们的界面十分清晰
// 可以支持更多更复杂的动态过渡
// 策略。
Vue.component(&#39;animated-integer&#39;, {
  template: &#39;<span>{{ tweeningValue }}</span>&#39;,
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data: function () {
    return {
      tweeningValue: 0
    }
  },
  watch: {
    value: function (newValue, oldValue) {
      this.tween(oldValue, newValue)
    }
  },
  mounted: function () {
    this.tween(0, this.value)
  },
  methods: {
    tween: function (startValue, endValue) {
      var vm = this
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }
 
      new TWEEN.Tween({ tweeningValue: startValue })
        .to({ tweeningValue: endValue }, 500)
        .onUpdate(function () {
          vm.tweeningValue = this.tweeningValue.toFixed(0)
        })
        .start()
 
      animate()
    }
  }
})
 
// 所有的复杂度都已经从 Vue 的主实例中移除！
new Vue({
  el: &#39;#example-8&#39;,
  data: {
    firstNumber: 20,
    secondNumber: 40
  },
  computed: {
    result: function () {
      return this.firstNumber + this.secondNumber
    }
  }
})
</script>
コンポーネントと組み合わせて使用​​できます このセクションでは、さまざまなトランジション戦略と Vue

の組み込みトランジションについて説明します。システム＃＃＃。つまり、さまざまなトランジション効果を完成させるのにほとんど障害はありません。

4. デザインに命を吹き込む

たった 1 つのアニメーションで命を吹き込むことができます。残念ながら、デザイナーがアイコン、ロゴ、マスコットを作成する場合、多くの場合、それらは画像または静的な SVG として配信されます。そのため、GitHub のタコ猫、Twitter の鳥、その他多くのロゴは生き物に似ていますが、実際には生きているようには見えません。

Vue が役に立ちます。 SVG の性質はデータであるため、必要なのは、興奮している、考えている、または警戒している動物の例だけです。その後、Vue は、これらの状態間の遷移アニメーションを完了して、ウェルカム ページ、読み込み手順、およびより感情的なプロンプトを作成するのを支援します。

Sarah Drasner は、時間とインタラクション関連の状態変化を組み合わせた次のデモを披露しました:

出典:

  • https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js

  • https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js

HTML代码

<div id="app" @mousemove="coordinates">
  <p>Move your mouse or tap</p>
  <svg id="walle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.4 129.4">
  <defs>
    <clipPath id="clip-path" transform="translate(-81.8 -924.4)">
      <circle cx="140.5" cy="978.2" r="4.3" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-2" transform="translate(-81.8 -924.4)">
      <path d="M148.5,976.5s1.3,5.2-3.2,6.7l3.4,3.6,9.3-2.1-5-8.3Z" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-3" transform="translate(-81.8 -924.4)">
      <circle cx="155.8" cy="983.6" r="4.3" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-4" transform="translate(-81.8 -924.4)">
      <path d="M130.4,1007.6s1.3-.4,1.9.7a1.5,1.5,0,0,1-.3,1.8c-.2.3-4.5,2.9-4.5,2.9l-20.6,13.7-3.5-6.4Z" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-5" transform="translate(-81.8 -924.4)">
      <path d="M150.6,1000s1.4.3,1.3,1.5a1.5,1.5,0,0,1-1.1,1.5c-.3.2-5.3.5-5.3.5l-24.6,2.3v-7.3Z" fill="none"/>
    </clipPath>
  </defs>
  <g id="Layer_3" data-name="Layer 3">
    <ellipse id="shadow" cx="71.5" cy="100.4" rx="26.5" ry="3.6" fill="#394848" opacity="0.35"/>
  </g>
  <g id="Layer_2" data-name="Layer 2">
    <g class="head" v-bind:class="{isFlipped: flip}">
    <g id="neck">
      <g id="neckb">
        <path d="M157.8,995.6a2.6,2.6,0,1,1-4.1-2.2,6.1,6.1,0,0,0-1.7-.3c-1-.2-.9-1.3-.8-1.8a1.6,1.6,0,0,1-.5-1.2,1.7,1.7,0,1,1,3.4,0,1.6,1.6,0,0,1-.5,1.2,5.8,5.8,0,0,0,1.7,1.8A2.6,2.6,0,0,1,157.8,995.6Z" transform="translate(-81.8 -924.4)" fill="#a2b2b3"/>
        <circle cx="70.6" cy="65.6" r="0.9" fill="#636767"/>
        <circle cx="73.3" cy="71.2" r="1.6" fill="none" stroke="#636767" stroke-miterlimit="10" stroke-width="0.5"/>
      </g>
      <g id="neckf">
        <path id="wire" d="M147.3,989.3s-2-1.9-.7-3.2l3.4-3.7.3.9s-2.6,2.5-3.2,3.3.9,2.5.9,2.5Z" transform="translate(-81.8 -924.4)" fill="#394848"/>
        <path fill="#a2b2b3" d="M64.6 67.1L65.3 67.6 69.3 67.5 69.6 67 64.6 67.1z"/>
        <path d="M149.8,983.4l.2,2.6-1.9,2.3-1.7.2s-2.5,1.9.3,3.1h4.8s-1.9-2,.5-2.8l-1.5-.2,2.4-2.3L152,983Z" transform="translate(-81.8 -924.4)" fill="#ddeced"/>
        <path d="M147,992l4.1-.2,1.1,1.3h2.1a3,3,0,0,0-1.7,2.4h-7.6a2.6,2.6,0,0,1,2.3-2.6Z" transform="translate(-81.8 -924.4)" fill="#ddeced"/>
      </g>
    </g>
    <g id="eyecontain">
    <g id="eyes" :style="{ transform:`translate3d(${x}px, ${y}px, 0)`}">
      <g id="lefteye">
        <path id="lefteyeb2" d="M143.8,972.7l-6.1,1.1a6.2,6.2,0,0,0-4.1,8s2.3,4.4,6.6,3.7l5.4-.6a5.7,5.7,0,0,0,4.4-6l-.6-4.1S148.7,971.8,143.8,972.7Z" transform="translate(-81.8 -924.4)" fill="#a2b2b3"/>
        <path id="lefteyeb1" d="M145.1,972.1l-8.1,1s-5.8,1.6-4.1,7.3a4.9,4.9,0,0,0,5.6,3.4l5.4-.6s4.6-.8,4.4-5.4l-.6-4.6S147.9,971.6,145.1,972.1Z" transform="translate(-81.8 -924.4)" fill="#ddeced"/>
        <g id="lefteyeball">
          <circle cx="58.7" cy="53.8" r="4.3" fill="#0c1112"/>
          <g clip-path="url(#clip-path)">
            <circle id="ball" cx="59.7" cy="54.8" r="4.3" fill="#394848"/>
          </g>
          <circle id="glimmer" cx="61.5" cy="51.2" r="1.4" fill="#fff"/>
        </g>
      </g>
      <g id="eyespace">
        <g clip-path="url(#clip-path-2)">
          <circle cx="66.4" cy="56.1" r="3.6" fill="#f49123"/>
        </g>
      </g>
      <g id="righteye">
        <path id="righteyeb2" d="M158.8,978.7l4.1,4.7a6.2,6.2,0,0,1-1.8,8.8s-4.5,2.1-7.4-1.2l-3.9-3.9a5.7,5.7,0,0,1,.2-7.4l3-2.8S155.5,974.9,158.8,978.7Z" transform="translate(-81.8 -924.4)" fill="#a2b2b3"/>
        <path id="righteyeb1" d="M156.4,976l5.4,6.1s3.3,5-1.8,8.2a4.9,4.9,0,0,1-6.4-1.2l-3.7-4s-2.9-3.6.3-7l3.5-3.1S154.7,973.8,156.4,976Z" transform="translate(-81.8 -924.4)" fill="#ddeced"/>
        <g id="righteyeball">
          <circle cx="74" cy="59.2" r="4.3" fill="#0c1112"/>
          <g clip-path="url(#clip-path-3)">
            <circle id="ball-2" data-name="ball" cx="75" cy="60.2" r="4.3" fill="#394848"/>
          </g>
          <circle id="glimmer-2" data-name="glimmer" cx="74.7" cy="56.1" r="1.4" fill="#fff"/>
        </g>
      </g>
    </g>
    </g>
    </g>
    <g class="body">
    <g id="backwheel">
      <path d="M149.9,1007.2l-4.8-.2s-.6-.2-2,1.2l-12.5,12.7s-1.4,2.3.3,3.5a3.9,3.9,0,0,0,3.1.8h7.1Z" transform="translate(-81.8 -924.4)" fill="#394848"/>
      <path d="M152.4,1009.2s-2-4.6-6.5-.1l-11,11.2s-3.8,4.1,1.4,4.8h16.2s7.8.2,5.5-7.4Z" transform="translate(-81.8 -924.4)" fill="#636767"/>
      <path d="M151.7,1010.8s-1.7-3.8-5.3-.1l-9,9.1s-3.1,3.3,1.2,3.9h13.3s6.4.1,4.6-6Z" transform="translate(-81.8 -924.4)" fill="#0c1112"/>
    </g>
    <path d="M148.7,1024h3.2a5,5,0,0,0,2.6,1.1h-4.2S148.9,1024.7,148.7,1024Z" transform="translate(-81.8 -924.4)" fill="#0c1112"/>
    <g id="rightarm">
      <path d="M140.9,999.3l-10.9,6.9a3.2,3.2,0,0,0-.4,4.5c1.9,2.6,5,.1,5,.1l9.2-5.1s3.8-2.3,1.9-5.1A3.8,3.8,0,0,0,140.9,999.3Z" transform="translate(-81.8 -924.4)" fill="#c6690c"/>
      <g clip-path="url(#clip-path-4)">
       
         <path id="newrightarm" d="M130.6,1008.4l10.8-6.2a.6.6,0,0,1,.8,0c.3.3.8.5.1,1.1s-10.8,6.5-10.8,6.5-.8.5-1,.4-.6-.9-.6-.9S129.6,1009.1,130.6,1008.4Z" transform="translate(-81.8 -924.4)" fill="#a2b2b3"/>
      </g>
      <circle cx="48.5" cy="85" r="1.3" fill="#636767"/>
      <g id="backhand">
        <path d="M131,1011.5c.9.6,1.6-.2,2.4-.4a3.8,3.8,0,0,1,1.5-.3c.1.8-.4,1.4-.5,2.1l-1.4.4c-1.5.7-2.8.7-3.9-.7a.9.9,0,0,0-.5-.7,2,2,0,0,1-.5-1.8c-.1-.7.5-.8.9-1s1.8.7,1.7,1.9A.5.5,0,0,0,131,1011.5Zm-1.1-.9c-.1-.3-.2-.6-.6-.6s-.6.1-.6.5a.7.7,0,0,0,.7.7C129.8,1011.2,129.9,1010.9,130,1010.7Z" transform="translate(-81.8 -924.4)" fill="#636767"/>
        <path d="M133.4,1016.1a3.9,3.9,0,0,1-4.3,3.6c-.9-.1-1.3-.9-1.8-1.6a5.5,5.5,0,0,1,.5-1.8c.2-.8.4-.6.8-.1a1.8,1.8,0,0,0,2.4.7Z" transform="translate(-81.8 -924.4)" fill="#424e4f"/>
        <path d="M129.1,1012.7c1.1,1.4,2.4,1.4,3.9.7l1.4-.4-.6,2.2-3,1.1a1.3,1.3,0,0,1-1.5-.4C128.2,1014.8,128.2,1014.1,129.1,1012.7Z" transform="translate(-81.8 -924.4)" fill="#424e4f"/>
        <path d="M129.1,1012.7c-1,1.4-.9,2.1.1,3.1a1.3,1.3,0,0,0,1.5.4l3-1.1-.3.9-2.4.7a1.8,1.8,0,0,1-2.4-.7c-.3-.5-.6-.7-.8.1a5.5,5.5,0,0,0-.5,1.8l-.5-.5a33.5,33.5,0,0,1,1.7-5.6A.9.9,0,0,1,129.1,1012.7Z" transform="translate(-81.8 -924.4)" fill="#394848"/>
        <path d="M128.7,1012a33.5,33.5,0,0,0-1.7,5.6,1.6,1.6,0,0,1-.5-2c.5-1.5.9-3,1.3-4.5v-.2a.6.6,0,0,1,.3-.6A2,2,0,0,0,128.7,1012Z" transform="translate(-81.8 -924.4)" fill="#424e4f"/>
        <path d="M130,1010.7c-.1.3-.2.6-.5.6a.7.7,0,0,1-.7-.7c0-.3.3-.5.6-.5S129.9,1010.3,130,1010.7Z" transform="translate(-81.8 -924.4)" fill="#424e4f"/>
      </g>
    </g>
    <g id="front">
      <path fill="#f49123" d="M55.1 73.1H76.6V92.91999999999999H55.1z"/>
      <path d="M136.3,1014.3h2.8s.9-.1.9,1,.1,1.8.1,1.8a.9.9,0,0,1-.8.8h-2s-1.2-.4-1.2-1.4A4,4,0,0,1,136.3,1014.3Z" transform="translate(-81.8 -924.4)" fill="#ddeced"/>
      <rect x="54.8" y="72.9" width="21.2" height="7.67" rx="1" ry="1" fill="#ddeced"/>
      <path d="M157.1,997.9h-20c-.3,0-.5-.1-.5-.3s.2-.2.5-.2h20c.3,0,.5.1.5.3S157.4,997.9,157.1,997.9Z" transform="translate(-81.8 -924.4)" fill="#636767" opacity="0.41"/>
      <rect x="57.8" y="81.5" width="1.3" height="6.42" rx="0.7" ry="0.7" fill="#f2791e"/>
      <rect x="71.5" y="81.4" width="1.3" height="6.42" rx="0.7" ry="0.7" fill="#f2791e"/>
      <rect x="64.8" y="81.5" width="1.3" height="6.42" rx="0.7" ry="0.7" fill="#f2791e"/>
      <rect x="53.6" y="71.2" width="23" height="1.92" rx="1" ry="1" fill="#ddeced"/>
      <path fill="#a2b2b3" d="M59.5 73.1H70.3V79.1H59.5z"/>
      <path fill="#bedb45" d="M66.2 74.1H68.4V77.92999999999999H66.2z"/>
      <path fill="#636767" d="M61.3 74H64.2V78H61.3z"/>
      <circle cx="62.4" cy="75.6" r="0.5" fill="#f76f6f"/>
    </g>
    <g id="back">
      <rect x="74.5" y="71.2" width="13" height="1.75" rx="0.9" ry="0.9" fill="#a2b2b3"/>
      <path fill="#f2791e" d="M86.3 80.4L86.3 83.1 81.2 83 76.5 87.3 76.4 80.3 86.3 80.4z"/>
      <path fill="#a2b2b3" d="M76.4 72.1H86.30000000000001V80.6H76.4z"/>
      <path d="M167.9,997.7h-9.5a.3.3,0,0,1,0-.5h9.5a.3.3,0,0,1,0,.5Z" transform="translate(-81.8 -924.4)" fill="#636767"/>
      <rect x="75.9" y="73" width="0.6" height="19.31" rx="0.3" ry="0.3" fill="#636767" opacity="0.34"/>
    </g>
    <g id="forwardwheel">
      <path fill="none" stroke="#0c1112" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.25" d="M68.1 100.7L90.6 100.7"/>
      <path d="M165.8,1007.5H161s-.6-.2-1.9,1.2l-12,12.2s-1.3,2.2.3,3.3a3.8,3.8,0,0,0,3,.8h6.8Z" transform="translate(-81.8 -924.4)" fill="#0c1112" opacity="0.41"/>
      <path d="M167.9,1007.2l-4.8-.2s-.6-.2-2,1.2l-12.5,12.7s-1.4,2.3.3,3.5a3.9,3.9,0,0,0,3.1.8h7.1Z" transform="translate(-81.8 -924.4)" fill="#394848"/>
      <path d="M170.4,1009.2s-2-4.6-6.5-.1l-11,11.2s-3.8,4.1,1.4,4.8h16.2s7.8.2,5.5-7.4Z" transform="translate(-81.8 -924.4)" fill="#a2b2b3"/>
      <path d="M169.7,1010.8s-1.7-3.8-5.3-.1l-9,9.1s-3.1,3.3,1.2,3.9h13.3s6.4.1,4.6-6Z" transform="translate(-81.8 -924.4)" fill="#636767"/>
      <path d="M173.6,1017.2l-3-1.7s-11.2.1-6,8.1h5.9Z" transform="translate(-81.8 -924.4)" fill="#394848" opacity="0.78"/>
      <path d="M165.1,1010l1.6,4.6s-1.3-.6-1.3,1.2-3.4,3.2-3.4,3.2-1.2-.3-1.4,1.2-2.6,3.4-2.6,3.4H155s-3.5-.1-.4-3h0Z" transform="translate(-81.8 -924.4)" fill="#394848" opacity="0.78"/>
      <g id="wheel">
        <circle cx="85.4" cy="87.6" r="2.9" fill="#a2b2b3"/>
        <circle cx="85.4" cy="87.6" r="2" fill="#ddeced"/>
        <ellipse cx="85.1" cy="87.6" rx="1.1" ry="0.8" fill="#394848"/>
        <circle cx="85.5" cy="87.6" r="0.8" fill="#a2b2b3"/>
      </g>
      <g id="wheel-2" data-name="wheel">
        <circle cx="81" cy="92.2" r="2.9" fill="#a2b2b3"/>
        <circle cx="81" cy="92.2" r="2" fill="#ddeced"/>
        <ellipse cx="80.7" cy="92.2" rx="1.1" ry="0.8" fill="#394848"/>
        <circle cx="81.1" cy="92.2" r="0.8" fill="#a2b2b3"/>
      </g>
      <g id="wheel-3" data-name="wheel">
        <circle cx="76.7" cy="96.5" r="2.9" fill="#a2b2b3"/>
        <circle cx="76.7" cy="96.5" r="2" fill="#ddeced"/>
        <ellipse cx="76.4" cy="96.5" rx="1.1" ry="0.8" fill="#394848"/>
        <circle cx="76.8" cy="96.5" r="0.8" fill="#a2b2b3"/>
      </g>
      <g id="wheel-4" data-name="wheel">
        <circle cx="88.9" cy="95.2" r="4.1" fill="#a2b2b3"/>
        <circle cx="88.9" cy="95.2" r="2.8" fill="#ddeced"/>
        <ellipse cx="88.5" cy="95.2" rx="1.6" ry="1.1" fill="#394848"/>
        <circle cx="89" cy="95.2" r="1.1" fill="#a2b2b3"/>
      </g>
    </g>
    <g id="leftarm">
      <g id="bicep">
        <path d="M165.2,998.3H151.2a3.5,3.5,0,0,0-2.7,4.2c.4,2.3,4.4,2.4,4.4,2.4l11.9-.3s4.2.8,3.9-2.8A3.5,3.5,0,0,0,165.2,998.3Z" transform="translate(-81.8 -924.4)" fill="#f2791e"/>
        <path d="M154.1,998.4h12.7s2.2.2,2.2,3.1c0,0,.3,2.8-1.8,3s-13.1.3-13.1.3Z" transform="translate(-81.8 -924.4)" fill="#ddeced"/>
        <path fill="#636767" d="M72.3 78L75.9 73.8 78.5 73.9 73.5 80.2 72.3 80.2 72.3 78z"/>
        <path fill="#636767" d="M76 80.2L81.4 73.9 84 73.9 79 80.1 76 80.2z"/>
        <path d="M163.9,1004.5l4.3-5.4a2.6,2.6,0,0,1,.6,1.9l-2.8,3.5Z" transform="translate(-81.8 -924.4)" fill="#636767"/>
      </g>
      <g clip-path="url(#clip-path-5)">
        <path id="newleftarm" d="M150.1,1000.7s-1.8-.3-2,.9,1.8,1,1.8,1l17-.2s1.1-.7.3-1.5S150.1,1000.7,150.1,1000.7Z" transform="translate(-81.8 -924.4)" fill="#a2b2b3"/>
      </g>
      <g id="hand">
        <ellipse cx="66.8" cy="77.3" rx="0.9" ry="0.9" fill="#636767"/>
        <path d="M146.1,998.7l4.5,4.9a.8.8,0,0,1-.3,1.1l-3.5,2.1s-.5,0-.4.8,1,1.5.1,2-5.7-2.6-5.7-2.6l-2-4.5a1.7,1.7,0,0,1,1.3-2Z" transform="translate(-81.8 -924.4)" fill="#a2b2b3"/>
        <path d="M147.2,1001.1l-4.3,1.1a1.6,1.6,0,0,0-1.1,2.1c.3,1.2,1,3.2,1,3.2" transform="translate(-81.8 -924.4)" fill="none" stroke="#636767" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.5" opacity="0.46"/>
      </g>
    </g>
    </g>
  </g>
</svg>
</div>

CSS代码 

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: &#39;Montserrat&#39;, sans-serif;
  background: #23a9e0;
  cursor: url(&#39;https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/cockroach%20(2).ico&#39;), default;
  -webkit-overflow-scrolling: touch;
}

#app {
  -webkit-tap-highlight-color: transparent;
}

svg {
  width: 100vw;
  height: 100vh;
  max-height: 400px;
  margin-left: 20vw;
}

p {
  font-size: 16px;
  color: white;
  text-align: center;
}

.isFlipped {
  transform: scaleX(-1);
  transform-origin: 50% 50%;
}

#leftarm {
  transform-origin: 100% 0;
}

@media screen and (max-width: 600px) {
  svg {
    max-height: 200px !important;
    margin-left: 0 !important;
  }
}

JavaScript代码 

new Vue({
  el: &#39;#app&#39;,
  data() {
    return {
      startX: 0,
      x: 0,
      y: 0,
      flip: false,
      audioPlay: false,
      startArms: 0
    }
  },
  methods: {
    armsTL() {
      let tl = new TimelineMax();
      tl.add(&#39;startarms&#39;)
      tl.to(&#39;#backhand&#39;, 2, {
        x: -16,
        rotation: 150,
        transformOrigin: &#39;50% 50%&#39;
      }, &#39;startarms&#39;);
      tl.to(&#39;#rightarm&#39;, 2, {
        rotation: 30,
        transformOrigin: &#39;100% 0&#39;
      }, &#39;startarms&#39;);
      tl.to(&#39;#newrightarm&#39;, 2, {
        x: -94,
        y: -918,
        rotation: 10,
        transformOrigin: &#39;100% 100%&#39;
      }, &#39;startarms&#39;);

      tl.to(&#39;#hand&#39;, 2, {
        x: -15,
        y: -7,
        rotation: 90,
        transformOrigin: &#39;50% 50%&#39;
      }, &#39;startarms&#39;);
      tl.to(&#39;#leftarm&#39;, 2, {
        rotation: 20,
        transformOrigin: &#39;100% 0&#39;
      }, &#39;startarms&#39;);
      tl.to(&#39;#newleftarm&#39;, 2, {
        x: -100,
        y: -924,
        transformOrigin: &#39;100% 100%&#39;
      }, &#39;startarms&#39;);

      return tl;
    },
    coordinates(e) {
      const audio = new Audio(&#39;https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/Whoa.mp3&#39;),
        walleBox = document.getElementById(&#39;walle&#39;).getBoundingClientRect(),
        walleCoords = walleBox.width / 2 + walleBox.left;

      if (this.startArms == 0) {
        this.startArms = this.armsTL();
      }

      this.y = e.clientY / 80 - 2;
      if (e.clientX > walleCoords) {
        this.x = -(e.clientX / 200);
        this.flip = true;
        if (this.audioPlay === false) {
          audio.play();
          this.audioPlay = true;
        }
      } else {
        this.audioPlay = false;
        this.x = e.clientX / 200 - 5;
        this.flip = false;

        TweenMax.set("#righteyeb2", {
          scaleX: 1 + (1 - e.clientX / walleCoords) / 5
        });
        TweenMax.set("#lefteyeb2", {
          scaleX: 1 + (1 - e.clientX / walleCoords) / 5
        });
        TweenMax.set("#walle", {
          x: ((e.clientX / walleCoords) * 50) - 40
        });

        this.startArms.progress(1 - (e.clientX / walleCoords)).pause();

      }
    },
  },
  mounted() {
    let tl = new TimelineMax({
      repeat: -1,
      repeatDelay: 2
    });

    tl.add(&#39;redo&#39;)
    tl.to(&#39;#lefteye&#39;, 0.5, {
      rotation: 5,
      repeat: 3,
      yoyo: true,
      transformOrigin: &#39;100% 50%&#39;,
      ease: Sine.easeOut
    }, &#39;redo&#39;);
    tl.to(&#39;#righteye&#39;, 0.5, {
      rotation: -5,
      repeat: 3,
      yoyo: true,
      transformOrigin: &#39;0% 30%&#39;,
      ease: Sine.easeOut
    }, &#39;redo+=0&#39;);
    tl.fromTo(&#39;#lefteyeball&#39;, 0.05, {
      scaleY: 1
    }, {
      scaleY: 0,
      repeat: 3,
      yoyo: true,
      transformOrigin: &#39;50% 50%&#39;,
      ease: Circ.easeOut
    }, &#39;redo+=4&#39;);
    tl.fromTo(&#39;#righteyeball&#39;, 0.05, {
      scaleY: 1
    }, {
      scaleY: 0,
      repeat: 3,
      yoyo: true,
      transformOrigin: &#39;50% 50%&#39;,
      ease: Circ.easeOut
    }, &#39;redo+=4&#39;);
    tl.to(&#39;#eyecontain&#39;, 0.4, {
      rotation: -15,
      repeat: 1,
      yoyo: true,
      transformOrigin: &#39;50% 50%&#39;,
      ease: Sine.easeInOut
    }, &#39;redo+=2&#39;);
  }
});

TweenMax.to(&#39;p&#39;, 0.5, {
  opacity: 0,
  delay: 2,
  ease: Sine.easeIn
});

【相关推荐：vuejs视频教程、web前端开发】

以上がVue 状態での監視に何を使用するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css ajax Property JS github https
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Reactで値を変更する方法次の記事：Reactで値を変更する方法

関連記事

続きを見る