フロントエンドの古いドライバーであるQiangは、Vue.jsを使用して、Audi A8Lテールライトの特殊効果を実現します〜ナンセンスな話をしないで、すぐに車に乗り込みます。

その他 2022-04-27 20:47:48 訪問数: null

強兄弟はある日、ステーションBで新しいアウディA8LのスルータイプのOLEDテールライトを見てショックを受けました〜

新しいアウディA8Ltaillights_bilibili不明なウェルカムライトエフェクトディスプレイ。TAIL機能のウェルカムモードhttps://www.bilibili.com/video/BV1ks411M7TL

アウディだけがそれを行うことができると推定されているので、ナイトクラブの周囲の照明効果をテールライトに巧みに移植します！ 

このような怒っているテールライト効果のアニメーションはクールすぎますが、Vueを使用してそれを実現できますか？答えはイエスです！ 

 ファンはそれを注意深くそして辛抱強く読まなければなりません。実際、私はフロントエンドコードを使用してアウディA8Lテールライトの特殊効果を実現しました！

（完成した効果は記事の最後にあります）

↓

このテールライトのかっこいい外観を見てみましょう（私たちの照明工場アウディ→オーガストホルヒボスの長いアイテムに期待されています!!!〜）

消灯時の様子です

ブラザー・チャンは、Vue.jsを使用して、アウディA8LスルータイプOLEDテールライトの特殊効果を実現するためにあなたを連れて行きます

Photoshopでテールライトを切り取りました

  私が切り取ったこれらのpng画像は、自分でダウンロードできます 

  

黒い領域の麻の黒い帯は、マスク効果のためにmask.pngによって使用されます。

この短いマスク画像は、高透過性テールライトの短いマスク効果に使用されるmask-short.pngです。

次に、テールライトのレイアウトを開始します。コード上〜

<template>
  <div class="sg-body">
    <div class="audi-a8l">
      <div class="audi-lights" :hidden="hideAudiLights">
        <div class="mid-light mid-light1" :show="mid_light_show1"></div>
        <div class="mid-light mid-light2" :show="mid_light_show2"></div>
        <div class="mid-light mid-light3" :show="mid_light_show3"></div>
        <div class="mid-light mid-light4" :show="mid_light_show4"></div>
        <div class="left">
          <div
            class="left-high-light-1"
            :style="{ opacity: `${highLightOpacity1}` }"
          ></div>
          <div
            class="left-high-light-2"
            :style="{ opacity: `${highLightOpacity2}` }"
          ></div>
          <div
            class="left-high-light-3"
            :style="{ opacity: `${highLightOpacity3}` }"
          ></div>
          <div
            class="left-high-light-4"
            :style="{ opacity: `${highLightOpacity4}` }"
          ></div>
          <div class="left-yellow-light" :show="left_yellow_light_show"></div>
        </div>
        <div class="right">
          <div
            class="right-high-light-1"
            :style="{ opacity: `${highLightOpacity1}` }"
          ></div>
          <div
            class="right-high-light-2"
            :style="{ opacity: `${highLightOpacity2}` }"
          ></div>
          <div
            class="right-high-light-3"
            :style="{ opacity: `${highLightOpacity3}` }"
          ></div>
          <div
            class="right-high-light-4"
            :style="{ opacity: `${highLightOpacity4}` }"
          ></div>
          <div class="right-yellow-light" :show="right_yellow_light_show"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hideAudiLights: false,

      left_yellow_light_show: false,
      right_yellow_light_show: false,

      mid_light_show1: false,
      mid_light_show2: false,
      mid_light_show3: false,
      mid_light_show4: false,

      highLightOpacity1: 0,
      highLightOpacity2: 0,
      highLightOpacity3: 0,
      highLightOpacity4: 0,
    };
  },
  methods: {
    init() {
      this.init_left_yellow_light(); //左侧黄色尾灯
      this.init_right_yellow_light((d) => {
        setTimeout(() => {
          this.init_mid_light(); //顶部高位贯穿线条尾灯
        }, 500);
      }); //右侧黄色尾灯
    },
    init_left_yellow_light(d) {
      setTimeout(() => {
        this.left_yellow_light_show = true;
        setTimeout(() => {
          this.left_yellow_light_show = false;
          setTimeout(() => {
            this.left_yellow_light_show = true;
            setTimeout(() => {
              this.left_yellow_light_show = false;
            }, 600);
          }, 100);
        }, 600);
      }, 0);
    },
    init_right_yellow_light(cb) {
      setTimeout(() => {
        this.right_yellow_light_show = true;
        setTimeout(() => {
          this.right_yellow_light_show = false;
          setTimeout(() => {
            this.right_yellow_light_show = true;
            setTimeout(() => {
              this.right_yellow_light_show = false;
              cb && cb();
            }, 600);
          }, 100);
        }, 600);
      }, 0);
    },
    init_mid_light() {
      setTimeout(() => {
        this.mid_light_show1 = true;
        setTimeout(() => {
          this.mid_light_show2 = true;
          this.mid_light_show3 = true;
          setTimeout(() => {
            this.highLightOpacity1 = 0.5;
            setTimeout(() => {
              this.highLightOpacity2 = 0.5;
              setTimeout(() => {
                this.highLightOpacity3 = 0.5;
                this.mid_light_show4 = true;
                setTimeout(() => {
                  this.highLightOpacity4 = 0.5;
                  setTimeout(() => {
                    setTimeout(() => {
                      this.highLightOpacity1 = 1;
                      setTimeout(() => {
                        this.highLightOpacity2 = 1;
                        setTimeout(() => {
                          this.highLightOpacity3 = 1;
                          setTimeout(() => {
                            this.highLightOpacity4 = 1;
                            setTimeout(() => {
                              this.mid_light_show4 = true;

                              setTimeout(() => {
                                this.resetAminates();
                              }, 1000);
                            }, 150);
                          }, 150);
                        }, 150);
                      }, 150);
                    }, 150);
                  }, 300);
                }, 150);
              }, 150);
            }, 150);
          }, 600);
        }, 400);
      }, 0);
    },
    // 重置所有动画效果
    resetAminates(d) {
      this.left_yellow_light_show = false;
      this.right_yellow_light_show = false;

      this.mid_light_show1 = false;
      this.mid_light_show2 = false;
      this.mid_light_show3 = false;
      this.mid_light_show4 = false;

      this.highLightOpacity1 = 0;
      this.highLightOpacity2 = 0;
      this.highLightOpacity3 = 0;
      this.highLightOpacity4 = 0;

      this.hideAudiLights = true;
      setTimeout(() => {
        this.hideAudiLights = false;
        this.init(); //循环双闪
      }, 100);
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" >
html,
body {
  margin: 0;
  padding: 0;
  background-color: black;
}
</style>
<style lang='scss' scoped>
.sg-body {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 1920px;
  height: 1080px;
  .audi-a8l {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent url(~@/assets/audi-a8l.jpg) no-repeat center / cover; //汽车背景图
    .audi-lights {
      .mid-light {
        transition: 0.3s ease-out;
        /*背景图片*/
        width: 1366px;
        height: 108px;
        background: transparent url(~@/assets/mid-light.png) no-repeat center /
          cover;
        position: absolute;
        top: 340px;
        left: 275px;
        mask: url(~@/assets/mask.png) no-repeat center;
        mask-size: 0 200px;
        opacity: 0;
        &.mid-light1 {
          &[show] {
            opacity: 0.5;
            mask-size: 100% 200px;
          }
        }
        &.mid-light2 {
          mask: url(~@/assets/mask-short.png) no-repeat 45% center;
          opacity: 0.7;
          transition: 1s ease-in-out;
          visibility: hidden;
          &[show] {
            visibility: visible;
            mask-position: -20% center;
          }
        }
        &.mid-light3 {
          mask: url(~@/assets/mask-short.png) no-repeat 55% center;
          opacity: 0.7;
          transition: 1s ease-in-out;
          visibility: hidden;
          &[show] {
            visibility: visible;
            mask-position: 120% center;
          }
        }
        &.mid-light4 {
          &[show] {
            opacity: 1;
            transition: 0.6s ease-out;
            mask-size: 100% 200px;
          }
        }
      }
      .left {
        .left-high-light-1 {
          /*背景图片*/
          width: 91px;
          height: 92px;
          background: transparent url(~@/assets/left-high-light-1.png) no-repeat
            center / cover;
          position: absolute;
          top: 370px;
          left: 265px;
        }
        .left-high-light-2 {
          /*背景图片*/
          width: 126px;
          height: 89px;
          background: transparent url(~@/assets/left-high-light-2.png) no-repeat
            center / cover;
          position: absolute;
          top: 383px;
          left: 305px;
        }
        .left-high-light-3 {
          /*背景图片*/
          width: 113px;
          height: 63px;
          background: transparent url(~@/assets/left-high-light-3.png) no-repeat
            center / cover;
          position: absolute;
          top: 405px;
          left: 380px;
        }
        .left-high-light-4 {
          /*背景图片*/
          width: 125px;
          height: 62px;
          background: transparent url(~@/assets/left-high-light-4.png) no-repeat
            center / cover;
          position: absolute;
          top: 410px;
          left: 460px;
        }
        .left-yellow-light {
          transition: 0.01s;
          /*背景图片*/
          width: 320px;
          height: 118px;
          background: transparent url(~@/assets/left-yellow-light.png) no-repeat
            center / cover;
          position: absolute;
          top: 430px;
          left: 260px;
          mask: url(~@/assets/mask.png) no-repeat center right;
          mask-size: 0 200px;
          opacity: 0;
          &[show] {
            transition: 0.4s ease-out;
            opacity: 1;
            mask-size: 100% 200px;
          }
        }
      }
      .right {
        .right-high-light-1 {
          /*背景图片*/
          width: 91px;
          height: 92px;
          background: transparent url(~@/assets/right-high-light-1.png)
            no-repeat center / cover;
          position: absolute;
          top: 370px;
          right: 265px;
        }
        .right-high-light-2 {
          /*背景图片*/
          width: 126px;
          height: 89px;
          background: transparent url(~@/assets/right-high-light-2.png)
            no-repeat center / cover;
          position: absolute;
          top: 383px;
          right: 305px;
        }
        .right-high-light-3 {
          /*背景图片*/
          width: 113px;
          height: 63px;
          background: transparent url(~@/assets/right-high-light-3.png)
            no-repeat center / cover;
          position: absolute;
          top: 405px;
          right: 380px;
        }
        .right-high-light-4 {
          /*背景图片*/
          width: 125px;
          height: 62px;
          background: transparent url(~@/assets/right-high-light-4.png)
            no-repeat center / cover;
          position: absolute;
          top: 410px;
          right: 460px;
        }
        .right-yellow-light {
          transition: 0.01s;
          /*背景图片*/
          width: 320px;
          height: 118px;
          background: transparent url(~@/assets/right-yellow-light.png)
            no-repeat center / cover;
          position: absolute;
          top: 430px;
          right: 260px;
          mask: url(~@/assets/mask.png) no-repeat center left;
          mask-size: 0 200px;
          opacity: 0;
          &[show] {
            transition: 0.4s ease-out;
            opacity: 1;
            mask-size: 100% 200px;
          }
        }
      }
    }
  }
}
</style>

操作効果は以下のとおりです。 

どうですか？強兄弟はファンを失望させませんでした〜コメント欄にこの効果が現実的だというメッセージを残していただけませんか？？？ 

エフェクトオンラインアクセスアドレスhttp://www.shuzhiqiang.com/projects/audiA8L-light/https://www.shuzhiqiang.com/projects/audiA8L-light/

ソースコードのダウンロードアドレス

http://www.shuzhiqiang.com/projects/audiA8L-light.zip

PS：チャン兄弟はアウディA8Lを運転できませんでしたが、彼はもっと読んで、もっと学び、もっと探求し、もっと練習する限り、赤ちゃんのように恐れを知らず、無邪気で、楽観的で好奇心旺盛な心を維持できると固く信じています。間もなく、すべてのフロントエンドパートナーが自分のドリームカーを運転すると思います。

強兄弟の記事があなたに役立つと思うなら、ところで彼の本をサポートし、彼がそれを宣伝するのを手伝うことができます、ありがとう〜

おすすめ

転載: blog.csdn.net/qq_37860634/article/details/124424741
おすすめ
LFOSSA Yuanlaisusu オープン コース | クラウド ネイティブの未来をマスターする: CNCF 認定資格と試験準備のヒントの包括的なガイド
ランキング
[ブリックジャワ]学ぶための5分、算術演算子
英国のエッセイを書くには、次の点に注意してください。
【質疑応答シリーズ】バックエンドから返されるjsonの出力をフォーマットし、コードを強調表示する方法
イベントが発生したYunqi 2019会議、？
非常に使いやすいAndroid 6.0の許可申請ツールを推奨
インターセプトし、使用にVueの-CLI3 axiosルート
CentOS Stream 9 でピーナッツ シェルをインストールして使用し、イントラネットに侵入して Web サイトを構築する方法
CreditEaseマイクロタスクスケジューリングサービスプラットフォームの構築の練習|シェアを記録
WrapPanelのWPFのレイアウト
keras 深層学習フレームワークは、畳み込みニューラル ネットワーク cnn を通じて手書き数字認識を実現します
アーカイブ
もっと
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(31)

コードワールド

© 2018 codetd.com