Brother Qiang saw the through-type OLED taillights of the new Audi A8L at station B one day, and was shocked~
https://www.bilibili.com/video/BV1ks411M7TLIt is estimated that only Audi can do it so ingeniously transplant the ambient lighting effect of the nightclub to the taillights!
Such an angry taillight effect animation is too cool, can we use Vue to achieve it? The answer is yes!
Fans must read it carefully and patiently. Really, I used the front-end code to realize the special effects of Audi A8L taillights!
(The finished effect is at the end of the article)
↓
Let's take a look at the cool look of this taillight (as expected of our lighting factory Audi → August Horch boss's long item!!!~)
This is what it looks like when the lights are out
Brother Qiang takes you to use Vue.js to realize the special effects of Audi A8L through-type OLED taillights
I cut out the taillights in Photoshop
These png images that I cut out, you can download them yourself
The hemp black strip in the black area is used by mask.png for the mask effect.
This short mask image is mask-short.png used for the short mask effect of the high penetrating taillights
Next, start laying out the taillights! on the code~
<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>
The operation effect is as follows:
how about it? Brother Qiang didn't disappoint the fans~ Can you leave a message in the comment area to say that this effect is realistic? ? ?
Effect online access address http://www.shuzhiqiang.com/projects/audiA8L-light/ https://www.shuzhiqiang.com/projects/audiA8L-light/
Source code download address
http://www.shuzhiqiang.com/projects/audiA8L-light.zip
PS: Although Brother Qiang failed to drive the Audi A8L, he firmly believes that as long as he reads more, learns more, explores more, and practices more , he can maintain a fearless, innocent, optimistic and curious mind like a baby . I believe that soon, every front-end partner will drive his own dreamcar.
If you think Brother Qiang's article is helpful to you, you can support his book by the way and help him promote it, thank you~
