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)} 50%{transform: translateY(0)}
100%{transform: translateY(var(--low))} 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{ @keyframes tetsuohana-flowers{
0%{--frame: 0} 0%{--frame: 0}
50%{--frame: 1} 50%{--frame: 1}
@ -272,6 +280,7 @@
#tetsuohana.failed #tetsuo, #tetsuohana.failed #tetsuo,
#tetsuohana.failed #hana{ #tetsuohana.failed #hana{
--frame: 2; --frame: 2;
transition: 0.5s transform cubic-bezier(0.2, 0.6, 0.4, 1.2); top: calc(26px * var(--scale));
transform: translateY(var(--low)); 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 elapsed = 0
} }
var gaugePercent = [Math.round(this.results.gauge / 2) / 50] var gaugePercent = Math.round(this.results.gauge / 2) / 50
if(players === 2){ if(players === 2){
var gauge2 = Math.round(p2.results.gauge / 2) / 50 var gauge2 = Math.round(p2.results.gauge / 2) / 50
if(gauge2 > gaugePercent){ if(gauge2 > gaugePercent){
@ -296,17 +296,17 @@ class Scoresheet{
var results = this.results var results = this.results
if(p === 1){ if(p === 1){
results = p2.results results = p2.results
}else if(this.multiplayer){
ctx.translate(0, -290)
} }
var resultGauge = Math.round(results.gauge / 2) / 50 var resultGauge = Math.round(results.gauge / 2) / 50
var clear = resultGauge >= gaugeClear var clear = resultGauge >= gaugeClear
var p1Offset = this.multiplayer && p === 0 ? 10 : 0 if(p === 1 || !this.multiplayer && clear){
ctx.translate(0, 290)
}
if(clear){ if(clear){
ctx.globalCompositeOperation = "lighter" ctx.globalCompositeOperation = "lighter"
} }
ctx.globalAlpha = Math.min(1, Math.max(0, (elapsed - (3100 + failedOffset)) / 500)) * 0.5 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") grd.addColorStop(0, "#000")
if(clear){ if(clear){
grd.addColorStop(1, "#ffffba") grd.addColorStop(1, "#ffffba")
@ -314,7 +314,7 @@ class Scoresheet{
grd.addColorStop(1, "transparent") grd.addColorStop(1, "transparent")
} }
ctx.fillStyle = grd ctx.fillStyle = grd
ctx.fillRect(0, frameTop + 362, winW, 286) ctx.fillRect(0, frameTop + 72, winW, 286)
ctx.restore() ctx.restore()
} }
} }