diff --git a/libs/control.js b/libs/control.js index 8c672646..294a2adf 100644 --- a/libs/control.js +++ b/libs/control.js @@ -19,7 +19,7 @@ control.prototype._init = function () { this.registerAnimationFrame("totalTime", false, this._animationFrame_totalTime); this.registerAnimationFrame("autoSave", true, this._animationFrame_autoSave); this.registerAnimationFrame("globalAnimate", true, this._animationFrame_globalAnimate); - this.registerAnimationFrame("selector", false, this._animationFrame_selector); + //this.registerAnimationFrame("selector", false, this._animationFrame_selector); this.registerAnimationFrame("animate", true, this._animationFrame_animate); this.registerAnimationFrame("heroMoving", true, this._animationFrame_heroMoving); this.registerAnimationFrame("weather", true, this._animationFrame_weather); diff --git a/libs/ui.js b/libs/ui.js index e4e79e7d..7391eea5 100644 --- a/libs/ui.js +++ b/libs/ui.js @@ -640,7 +640,6 @@ ui.prototype._getPosition = function (content) { ui.prototype.drawWindowSelector = function(background, x, y, w, h) { w = Math.round(w), h = Math.round(h); var ctx = core.ui.createCanvas("_selector", x, y, w, h, 165); - ctx.canvas.style.opacity = 0.8; this._drawSelector(ctx, background, w, h); } @@ -662,7 +661,6 @@ ui.prototype._uievent_drawSelector = function (data) { var z = 136; if (core.dymCanvas.uievent) z = (parseInt(core.dymCanvas.uievent.canvas.style.zIndex) || 135) + 1; var ctx = core.createCanvas('_uievent_selector', x, y, w, h, z); - ctx.canvas.style.opacity = 0.8; this._drawSelector(ctx, background, w, h); } diff --git a/main.js b/main.js index fff02c79..32948c93 100644 --- a/main.js +++ b/main.js @@ -216,6 +216,7 @@ main.prototype.init = function (mode, callback) { })(span,value[1]); main.dom.levelChooseButtons.appendChild(span); }); + main.createOnChoiceAnimation(); main.loadJs('libs', main.loadList, function () { main.core = core; @@ -328,14 +329,32 @@ main.prototype.log = function (e) { } } +main.prototype.createOnChoiceAnimation = function () { + var borderColor = main.dom.startButtonGroup.style.caretColor || "rgb(255, 215, 0)"; + // get rgb value + var rgb = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d+\s*)?\)$/.exec(borderColor); + if (rgb != null) { + var value = rgb[1] + ", " + rgb[2] + ", " + rgb[3]; + var style = document.createElement("style"); + style.type = 'text/css'; + var keyFrames = "onChoice { " + + "0% { border-color: rgba("+value+", 0.9); } " + + "50% { border-color: rgba("+value+", 0.3); } " + + "100% { border-color: rgba("+value+", 0.9); } " + + "}"; + style.innerHTML = "@-webkit-keyframes " + keyFrames + " @keyframes " + keyFrames; + document.body.appendChild(style); + } +} + ////// 选项 ////// main.prototype.selectButton = function (index) { var select = function (children) { index = (index + children.length) % children.length; for (var i = 0;i < children.length; ++i) { - children[i].style.borderColor = 'transparent'; + children[i].classList.remove("onChoiceAnimate"); } - children[index].style.borderColor = main.dom.startButtonGroup.style.caretColor || '#FFD700'; + children[index].classList.add("onChoiceAnimate"); if (main.selectedButton == index) { children[index].click(); } diff --git a/styles.css b/styles.css index ccdb83cb..19d546ed 100644 --- a/styles.css +++ b/styles.css @@ -159,6 +159,11 @@ border-radius: 6px; } +.onChoiceAnimate { + animation: 2s ease-in-out 0s infinite normal none running; + animation-name: onChoice; +} + #floorMsgGroup { top: 3px; right: 3px; @@ -374,4 +379,22 @@ p#name { #inputNo { float:right; margin-right: 10%; -} \ No newline at end of file +} + +#_selector, #_uievent_selector { + animation: 2s ease-in-out 0s infinite normal none running; + animation-name: selector; +} + +@-webkit-keyframes selector { + 0% { opacity: 0.95; } + 50% { opacity: 0.55; } + 100% { opacity: 0.95; } +} + +@keyframes selector { + 0% { opacity: 0.95; } + 50% { opacity: 0.55; } + 100% { opacity: 0.95; } +} +