css onChoice animate

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);

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);
 }
 

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();
         }

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;
@@ -375,3 +380,21 @@ p#name {
     float:right;
     margin-right: 10%;
 }
+
+#_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; }
+}
+