nanahira/taiko-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add failed animation

Browse Source
This commit is contained in:
LoveEevee 2019-01-01 06:04:49 +03:00
parent 06cdc1c7e2
commit fc92c55370
2 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/src/css/songbg.css
View File

@ -247,6 +247,14 @@
50%{transform: translateY(0)}
100%{transform: translateY(var(--low))}
}
@keyframes tetsuohana-failed1{
0%{transform: translateY(calc(10px * var(--scale)))}
50%{transform: translateY(0)}
}
@keyframes tetsuohana-failed2{
50%{transform: translateY(calc(5px * var(--scale)))}
100%{transform: translateY(calc(15px * var(--scale)))}
}
@keyframes tetsuohana-flowers{
0%{--frame: 0}
50%{--frame: 1}
@ -272,6 +280,7 @@
#tetsuohana.failed #tetsuo,
#tetsuohana.failed #hana{
--frame: 2;
transition: 0.5s transform cubic-bezier(0.2, 0.6, 0.4, 1.2);
transform: translateY(var(--low));
top: calc(26px * var(--scale));
transform: translateY(calc(46px * var(--scale)));
animation: 1.25s ease-out tetsuohana-failed1 both infinite, 1.25s ease-in tetsuohana-failed2 both infinite;
}

12
public/src/js/scoresheet.js
View File

@ -281,7 +281,7 @@ class Scoresheet{
var elapsed = 0
}
var gaugePercent = [Math.round(this.results.gauge / 2) / 50]
var gaugePercent = Math.round(this.results.gauge / 2) / 50
if(players === 2){
var gauge2 = Math.round(p2.results.gauge / 2) / 50
if(gauge2 > gaugePercent){
@ -296,17 +296,17 @@ class Scoresheet{
var results = this.results
if(p === 1){
results = p2.results
}else if(this.multiplayer){
ctx.translate(0, -290)
}
var resultGauge = Math.round(results.gauge / 2) / 50
var clear = resultGauge >= gaugeClear
var p1Offset = this.multiplayer && p === 0 ? 10 : 0
if(p === 1 || !this.multiplayer && clear){
ctx.translate(0, 290)
}
if(clear){
ctx.globalCompositeOperation = "lighter"
}
ctx.globalAlpha = Math.min(1, Math.max(0, (elapsed - (3100 + failedOffset)) / 500)) * 0.5
var grd = ctx.createLinearGradient(0, frameTop + 362, 0, frameTop + 658)
var grd = ctx.createLinearGradient(0, frameTop + 72, 0, frameTop + 368)
grd.addColorStop(0, "#000")
if(clear){
grd.addColorStop(1, "#ffffba")
@ -314,7 +314,7 @@ class Scoresheet{
grd.addColorStop(1, "transparent")
}
ctx.fillStyle = grd
ctx.fillRect(0, frameTop + 362, winW, 286)
ctx.fillRect(0, frameTop + 72, winW, 286)
ctx.restore()
}
}