jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

css onChoice animate

Browse Source
This commit is contained in:
oc 2019-07-09 12:52:40 +08:00
parent bb28ba72b9
commit 0b5de8ccb1
4 changed files with 46 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libs/control.js
View File

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

2
libs/ui.js
View File

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

23
main.js
View File

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

25
styles.css
View File

@ -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%;
}
}
#_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; }
}