svg导航菜单动画特效
代码语言：html
所属分类：菜单导航
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> - SVG Hamburger Menu Icon Animation Collection</title>
<style>
#container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.box {
width: 33.3333%;
height: 50%;
float: left;
}
.icon {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
fill: none;
stroke-width: 6;
stroke-linecap: round;
stroke-linejoin: round;
cursor: pointer;
}
/******** PALETTES ********/
/*** Faint Grays ***/
/* #b1 { background: #FFFFFF; }
#b2 { background: #F8F8F8; }
#b3 { background: #EFEFEF; }
#b4 { background: #E8E8E8; }
#b5 { background: #DFDFDF; }
#b6 { background: #D8D8D8; }
.icon { stroke: #000000; opacity: .65; } */
/*** Peach ***/
#b1 { background: #fc5c65; }
#b2 { background: #fd9644; }
#b3 { background: #fed330; }
#b4 { background: #eb3b5a; }
#b5 { background: #fa8231; }
#b6 { background: #f7b731; }
.icon { stroke: #FFFFFF; opacity: .95; }
/*** Lime ***/
/* #b1 { background: #76F5A7; }
#b2 { background: #93E87B; }
#b3 { background: #DFE87B; }
#b4 { background: #87FF94; }
#b5 { background: #D1FF93; }
#b6 { background: #FFF687; }
.icon { stroke: #FFFFFF; opacity: 1; } */
/*** Rainbow & Whites ***/
/* #b1 { background: #f1c40f; }
#b2 { background: #1fe0ba; }
#b3 { background: #3ebb2a; }
#b4 { background: #2980b9; }
#b5 { background: #e74c3c; }
#b6 { background: #8e44ad; }
.icon { stroke: #FFFFFF; opacity: .9; } */
/*** Rainbow & Darks ***/
/* #b1 { background: #f1c40f; }
#b2 { background: #1fe0ba; }
#b3 { background: #3ebb2a; }
#b4 { background: #2980b9; }
#b5 { background: #e74c3c; }
#b6 { background: #8e44ad; }
.icon { stroke: #000000; opacity: .5; } */
</style>
</head>
<body translate="no">
<div id="container">
<div id="b1" class="box">
<svg id="i1" class="icon" viewBox="0 0 100 100">
<path id="top-line-1" d="M30,37 L70,37 Z"></path>
<path id="middle-line-1" d="M30,50 L70,50 Z"></path>
<path id="bottom-line-1" d="M30,63 L70,63 Z"></path>
</svg>
</div>
<div id="b2" class="box">
<svg id="i2" class="icon" viewBox="0 0 100 100">
<path id="top-line-2" d="M30,37 L70,37 Z"></path>
<path id="middle-line-2" d="M30,50 L70,50 Z"></path>
<path id="bottom-line-2" d="M30,63 L70,63 Z"></path>
</svg>
</div>
<div id="b3" class="box">
<svg id="i3" class="icon" viewBox="0 0 100 100">
<path id="top-line-3" d="M30,37 L70,37 Z"></path>
<path id="middle-line-3" d="M30,50 L70,50 Z"></path>
<path id="bottom-line-3" d="M30,63 L70,63 Z"></path>
</svg>
</div>
<div id="b4" class="box">
<svg id="i4" class="icon" viewBox="0 0 100 100">
<polyline id="top-line-4" points="30 37 50 37 70 37"></polyline>
<path id="middle-line-4" d="M30,50 L70,50 Z"></path>
<path id="bottom-line-4" d="M30,63 L70,63 Z"></path>
</svg>
</div>
<div id="b5" class="box">
<svg id="i5" class="icon" viewBox="0 0 100 100">
<path id="top-line-5" d="M30,37 L70,37 Z"></path>
<path id="middle-line-5" d="M30,50 L70,50 Z"></path>
<path id="bottom-line-5" d="M30,63 L70,63 Z"></path>
</svg>
</div>
<div id="b6" class="box">
<svg id="i6" class="icon" viewBox="0 0 100 100">
<path id="top-line-6" d="M30,37 L70,37 Z"></path>
<path id="middle-line-6" d="M30,50 L70,50 Z"></path>
<path id="bottom-line-6" d="M30,63 L70,63 Z"></path>
</svg>
</div>
</div>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/animateAnything.js"></script>
<script>
/////////////////////////////////////////////////////
///////////////////// ICON 1 //////////////////////
/////////////////////////////////////////////////////
///Initiation Variables
var icon_1 = document.getElementById("b1");
var topLine_1 = document.getElementById("top-line-1");
var middleLine_1 = document.getElementById("middle-line-1");
var bottomLine_1 = document.getElementById("bottom-line-1");
var state_1 = "menu"; // can be "menu" or "arrow"
var topLineY_1;
var middleLineY_1;
var bottomLineY_1;
var topLeftY_1;
var topRightY_1;
var bottomLeftY_1;
var bottomRightY_1;
var topLeftX_1;
var topRightX_1;
var bottomLeftX_1;
var bottomRightX_1;
///Animation Variables
var segmentDuration_1 = 15;
var menuDisappearDurationInFrames_1 = segmentDuration_1;
var arrowAppearDurationInFrames_1 = segmentDuration_1;
var arrowDisappearDurationInFrames_1 = segmentDuration_1;
var menuAppearDurationInFrames_1 = segmentDuration_1;
var menuDisappearComplete_1 = false;
var arrowAppearComplete_1 = false;
var arrowDisappearComplete_1 = false;
var menuAppearComplete_1 = false;
var currentFrame_1 = 1;
///Menu Disappear
function menuDisappearAnimation_1() {
currentFrame_1++;
if (currentFrame_1 <= menuDisappearDurationInFrames_1) {
window.requestAnimationFrame(() => {
//top line
topLineY_1 = AJS.easeInBack(37, 50, menuDisappearDurationInFrames_1, currentFrame_1);
topLine_1.setAttribute("d", "M30," + topLineY_1 + " L70," + topLineY_1);
//bottom line
bottomLineY_1 = AJS.easeInBack(63, 50, menuDisappearDurationInFrames_1, currentFrame_1);
bottomLine_1.setAttribute("d", "M30," + bottomLineY_1 + " L70," + bottomLineY_1);
//recursion
menuDisappearAnimation_1();
});
} else {
middleLine_1.style.opacity = "0";
currentFrame_1 = 1;
menuDisappearComplete_1 = true;
openMenuAnimation_1();
}
}
///Cross Appear
function arrowAppearAnimation_1() {
currentFrame_1++;
if (currentFrame_1 <= arrowAppearDurationInFrames_1) {
window.requestAnimationFrame(() => {
//top line
topLeftX_1 = AJS.easeOutBack(30, 35, arrowAppearDurationInFrames_1, currentFrame_1);
topLeftY_1 = AJS.easeOutBack(50, 35, arrowAppearDurationInFrames_1, currentFrame_1);
bottomRightX_1 = AJS.easeOutBack(70, 65, arrowAppearDurationInFrames_1, currentFrame_1);
bottomRightY_1 = AJS.easeOutBack(50, 65, arrowAppearDurationInFrames_1, currentFrame_1);
topLine_1.setAttribute("d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1);
//bottom line
bottomLeftX_1 = AJS.easeOutBack(30, 35, arrowAppearDurationInFrames_1, currentFrame_1);
bottomLeftY_1 = AJS.easeOutBack(50, 65, arrowAppearDurationInFrames_1, currentFrame_1);
topRightX_1 = AJS.easeOutBack(70, 65, arrowAppearDurationInFrames_1, currentFrame_1);
topRightY_1 = AJS.easeOutBack(50, 35, arrowAppearDurationInFrames_1, currentFrame_1);
bottomLine_1.setAttribute("d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1);
//recursion
arrowAppearAnimation_1();
});
} else {
currentFrame_1 = 1;
arrowAppearComplete_1 = true;
openMenuAnimation_1();
}
}
///Combined Open Menu Animation
function openMenuAnimation_1() {
if (!menuDisappearComplete_1) {
menuDisappearAnimation_1();
} else if (!arrowAppearComplete_1) {
arrowAppearAnimation_1();
}
}
///Cross Disappear
function arrowDisappearAnimation_1() {
currentFrame_1++;
if (currentFrame_1 <= arrowDisappearDurationInFrames_1) {
window.requestAnimationFrame(() => {
//top line
topLeftX_1 = AJS.easeInBack(35, 30, arrowDisappearDurationInFrames_1, currentFrame_1);
topLeftY_1 = AJS.easeInBack(35, 50, arrowDisappearDurationInFrames_1, currentFrame_1);
bottomRightX_1 = AJS.easeInBack(65, 70, arrowDisappearDurationInFrames_1, currentFrame_1);
bottomRightY_1 = AJS.easeInBack(65, 50, arrowDisappearDurationInFrames_1, currentFrame_1);
topLine_1.setAttribute("d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1);
//bottom line
bottomLeftX_1 = AJS.easeInBack(35, 30, arrowDisappearDurationInFrames_1, currentFrame_1);
bottomLeftY_1 = AJS.easeInBack(65, 50, arrowDisappearDurationInFrames_1, currentFrame_1);
topRightX_1 = AJS.easeInBack(65, 70, arrowDisappearDurationInFrames_1, currentFrame_1);
topRightY_1 = AJS.easeInBack(35, 50, arrowDisappearDurationInFrames_1, currentFrame_1);
bottomLine_1.setAttribute("d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1);
//recursion
arrowDisappearAnimation_1();
});
} else {
middleLine_1.style.opacity = "1";
currentFrame_1 = 1;
arrowDisappearComplete_1 = true;
closeMenuAnimation_1();
}
}
///Menu Appear
function menuAppearAnimation_1() {
currentFrame_1++;
if (currentFrame_1 <= menuAppearDurationInFrames_1) {
window.requestAnimationFrame(() => {
//top line
topLineY_1 = AJS.easeOutBack(50, 37, menuDisappearDurationInFrames_1, currentFrame_1);
topLine_1.setAttribute("d", "M30," + topLineY_1 + " L70," + topLineY_1);
//bottom line
bottomLineY_1 = AJS.easeOutBack(50, 63, menuDisappearDurationInFrames_1, currentFrame_1);
bottomLine_1.setAttribute("d", "M30," + bottomLineY_1 + " L70," + bottomLineY_1);
//recursion
menuAppearAnimation_1();
});
} else {
currentFrame_1 = 1;
menuAppearComplete_1 = true;
closeMenuAnimation_1();
}
}
///Close Menu Animation
function closeMenuAnimation_1() {
if (!arrowDisappearComplete_1) {
arrowDisappearAnimation_1();
} else if (!menuAppearComplete_1) {
menuAppearAnimation_1();
}
}
///Events
icon_1.addEventListener("click", () => {
if (state_1 === "menu") {
openMenuAnimation_1();
state_1 = "arrow";
arrowDisappearComplete_1 = false;
menuAppearComplete_1 = false;
} else if (state_1 === "arrow") {
closeMenuAnimation_1();
state_1 = "menu";
menuDisappearComplete_1 = false;
arrowAppearComplete_1 = false;
}
});
/////////////////////////////////////////////////////
///////////////////// ICON 2 //////////////////////
/////////////////////////////////////////////////////
///Initiation Variables
var icon_2 = document.getElementById("b2");
var topLine_2 = document.getElementById("top-line-2");
var middleLine_2 = document.getElementById("middle-line-2");
var bottomLine_2 = document.getElementById("bottom-line-2");
var state_2 = "menu"; // can be "menu" or "cross"
var topLineY_2;
var middleLineY_2;
var bottomLineY_2;
var topLeftY_2;
var topRightY_2;
var bottomLeftY_2;
var bottomRightY_2;
var topLeftX_2;
var topRightX_2;
var middleLeftX_2;
var middleRightX_2;
var bottomLeftX_2;
var bottomRightX_2;
///Animation Variables
var segmentDuration_2 = 25;
var menuDisappearDurationInFrames_2 = segmentDuration_2;
var crossAppearDurationInFrames_2 = Math.round(segmentDuration_2 * 0.35);
var crossDisappearDurationInFrames_2 = Math.round(segmentDuration_2 * 0.6);
var menuAppearDurationInFrames_2 = segmentDuration_2;
var menuDisappearComplete_2 = false;
var crossAppearComplete_2 = false;
var crossDisappearComplete_2 = true;
var menuAppearComplete_2 = true;
var currentFrame_2 = 0;
var lineDisappearDelay_2 = segmentDuration_2 * 0.2;
var lineAppearDelay_2 = lineDisappearDelay_2;
var lineDisappearDurationInFrames_2 = segmentDuration_2 - lineDisappearDelay_2 * 2;
var lineAppearDurationInFrames_2 = lineDisappearDurationInFrames_2;
var topLineOpacity_2 = 1;
var middleLineOpacity_2 = 1;
var bottomLineOpacity_2 = 1;
///Menu Disappear
function menuDisappearAnimation_2() {
currentFrame_2++;
if (currentFrame_2 <= menuDisappearDurationInFrames_2) {
window.requestAnimationFrame(() => {
//top line
if (currentFrame_2 <= lineDisappearDurationInFrames_2) {
topLeftX_2 = AJS.easeInBack(30, 130, lineDisappearDurationInFrames_2, currentFrame_2);
topRightX_2 = AJS.easeInBack(70, 170, lineDisappearDurationInFrames_2, currentFrame_2);
topLine_2.setAttribute("d", "M" + topLeftX_2 + ",37 L" + topRightX_2 + ",37 Z");
topLineOpacity_2 = AJS.linear(1, 0, lineDisappearDurationInFrames_2 * 0.85, currentFrame_2);
topLine_2.style.opacity = topLineOpacity_2;
}
//middle line
if (currentFrame_2 > lineDisappearDelay_2 && currentFrame_2 <= lineDisappearDurationInFrames_2 + lineDisappearDelay_2) {
middleLeftX_2 = AJS.easeInBack(30, 130, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2);
middleRightX_2 = AJS.easeInBack(70, 170, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2);
middleLine_2.setAttribute("d", "M" + middleLeftX_2 + ",50 L" + middleRightX_2 + ",50 Z");
middleLineOpacity_2 = AJS.linear(1, 0, lineDisappearDurationInFrames_2 * 0.85, currentFrame_2 - lineDisappearDelay_2);
middleLine_2.style.opacity = middleLineOpacity_2;
}
//bottom line
if (currentFrame_2 > lineDisappearDelay_2 * 2) {
bottomLeftX_2 = AJS.easeInBack(30, 130, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2 * 2);
bottomRightX_2 = AJS.easeInBack(70, 170, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2 * 2);
bottomLine_2.setAttribute("d", "M" + bottomLeftX_2 + ",63 L" + bottomRightX_2 + ",63 Z");
bottomLineOpacity_2 = AJS.linear(1, 0, lineDisappearDurationInFrames_2 * 0.85, currentFrame_2 - lineDisappearDelay_2 * 2);
bottomLine_2.style.opacity = bottomLineOpacity_2;
}
//recursion
menuDisappearAnimation_2();
});
} else {
currentFrame_2 = 0;
menuDisappearComplete_2 = true;
openMenuAnimation_2();
}
}
///Cross Appear
function crossAppearAnimation_2() {
currentFrame_2++;
if (currentFrame_2 <= crossAppearDurationInFrames_2) {
window.requestAnimationFrame(() => {
//top line
topLeftX_2 = AJS.easeInQuad(-30, 35, crossAppearDurationInFrames_2, currentFrame_2);
topLeftY_2 = AJS.easeInQuad(-30, 35, crossAppearDurationInFrames_2, currentFrame_2);
bottomRightX_2 = AJS.easeInQuad(0, 65, crossAppearDurationInFrames_2, currentFrame_2);
bottomRightY_2 = AJS.easeInQuad(0, 65, crossAppearDurationInFrames_2, currentFrame_2);
topLine_2.setAttribute("d", "M" + topLeftX_2 + "," + topLeftY_2 + " L" + bottomRightX_2 + "," + bottomRightY_2);
topLineOpacity_2 = AJS.easeInExpo(0, 1, crossAppearDurationInFrames_2, currentFrame_2);
topLine_2.style.opacity = topLineOpacity_2;
//bottom line
bottomLeftX_2 = AJS.easeInQuad(-30, 35, crossAppearDurationInFrames_2, currentFrame_2);
bottomLeftY_2 = AJS.easeInQuad(130, 65, crossAppearDurationInFrames_2, currentFrame_2);
topRightX_2 = AJS.easeInQuad(0, 65, crossAppearDurationInFrames_2, currentFrame_2);
topRightY_2 = AJS.easeInQuad(100, 35, crossAppearDurationInFrames_2, currentFrame_2);
bottomLine_2.setAttribute("d", "M" + bottomLeftX_2 + "," + bottomLeftY_2 + " L" + topRightX_2 + "," + topRightY_2);
bottomLineOpacity_2 = AJS.easeInExpo(0, 1, crossAppearDurationInFrames_2, currentFrame_2);
bottomLine_2.style.opacity = bottomLineOpacity_2;
//recursion
crossAppearAnimation_2();
});
} else {
currentFrame_2 = 0;
crossAppearComplete_2 = true;
openMenuAnimation_2();
}
}
///Combined Open Menu Animation
function openMenuAnimation_2() {
if (!menuDisappearComplete_2) {
menuDisappearAnimation_2();
} else if (!crossAppearComplete_2) {
crossAppearAnimation_2();
}
}
///Cross Disappear
function crossDisappearAnimation_2() {
currentFrame_2++;
if (currentFrame_2 <= crossDisappearDurationInFrames_2) {
window.requestAnimationFrame(() => {
//top line
topLeftX_2 = AJS.easeInBack(35, -30, crossDisappearDurationInFrames_2, currentFrame_2);
topLeftY_2 = AJS.easeInBack(35, -30, crossDisappearDurationInFrames_2, currentFrame_2);
bottomRightX_2 = AJS.easeInBack(65, 0, crossDisappearDurationInFrames_2, currentFrame_2);
bottomRightY_2 = AJS.easeInBack(65, 0, crossDisappearDurationInFrames_2, currentFrame_2);
topLine_2.setAttribute("d", "M" + topLeftX_2 + "," + topLeftY_2 + " L" + bottomRightX_2 + "," + bottomRightY_2);
topLineOpacity_2 = AJS.linear(1, 0, crossDisappearDurationInFrames_2, currentFrame_2, crossDisappearDurationInFrames_2 * 0.75);
topLine_2.style.opacity = topLineOpacity_2;
//bottom line
bottomLeftX_2 = AJS.easeInBack(35, -30, crossDisappearDurationInFrames_2, currentFrame_2);
bottomLeftY_2 = AJS.easeInBack(65, 130, crossDisappearDurationInFrames_2, currentFrame_2);
topRightX_2 = AJS.easeInBack(65, 0, crossDisappearDurationInFrames_2, currentFrame_2);
topRightY_2 = AJS.easeInBack(35, 100, crossDisappearDurationInFrames_2, currentFrame_2);
bottomLine_2.setAttribute("d", "M" + bottomLeftX_2 + "," + bottomLeftY_2 + " L" + topRightX_2 + "," + topRightY_2);
bottomLineOpacity_2 = AJS.linear(1, 0, crossDisappearDurationInFrames_2, currentFrame_2, crossDisappearDurationInFrames_2 * 0.75);
bottomLine_2.style.opacity = bottomLineOpacity_2;
//recursion
crossDisappearAnimation_2();
});
} else {
middleLine_2.style.opacity = "1";
currentFrame_2 = 0;
crossDisappearComplete_2 = true;
closeMenuAnimation_2();
}
}
///Menu Appear
function menuAppearAnimation_2() {
currentFrame_2++;
if (currentFrame_2 <= menuAppearDurationInFrames_2) {
window.requestAnimationFrame(() => {
//top line
if (currentFrame_2 <= lineAppearDurationInFrames_2) {
topLeftX_2 = AJS.easeOutBack(130, 30, lineAppearDurationInFrames_2, currentFrame_2);
topRightX_2 = AJS.easeOutBack(170, 70, lineAppearDurationInFrames_2, currentFrame_2);
topLine_2.setAttribute("d", "M" + topLeftX_2 + ",37 L" + topRightX_2 + ",37 Z");
topLineOpacity_2 = AJS.linear(-2, 1, lineAppearDurationInFrames_2, currentFrame_2);
topLine_2.style.opacity = topLineOpacity_2;
}
//middle line
if (currentFrame_2 > lineAppearDelay_2 && currentFrame_2 <= lineAppearDurationInFrames_2 + lineAppearDelay_2) {
middleLeftX_2 = AJS.easeOutBack(130, 30, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2);
middleRightX_2 = AJS.easeOutBack(170, 70, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2);
middleLine_2.setAttribute("d", "M" + middleLeftX_2 + ",50 L" + middleRightX_2 + ",50 Z");
middleLineOpacity_2 = AJS.easeOutBack(-2, 1, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2);
middleLine_2.style.opacity = middleLineOpacity_2;
}
//bottom line
if (currentFrame_2 > lineAppearDelay_2 * 2) {
bottomLeftX_2 = AJS.easeOutBack(130, 30, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2 * 2);
bottomRightX_2 = AJS.easeOutBack(170, 70, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2 * 2);
bottomLine_2.setAttribute("d", "M" + bottomLeftX_2 + ",63 L" + bottomRightX_2 + ",63 Z");
bottomLineOpacity_2 = AJS.easeOutBack(-2, 1, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2 * 2);
bottomLine_2.style.opacity = bottomLineOpacity_2;
}
//recursion
menuAppearAnimation_2();
});
} else {
currentFrame_2 = 0;
menuAppearComplete_2 = true;
}
}
///Close Menu Animation
function closeMenuAnimation_2() {
if (!crossDisappearComplete_2) {
crossDisappearAnimation_2();
} else if (!menuAppearComplete_2) {
menuAppearAnimation_2();
}
}
///Events
icon_2.addEventListener("click", () => {
if (state_2 === "menu") {
openMenuAnimation_2();
state_2 = "cross";
crossDisappearComplete_2 = false;
menuAppearComplete_2 = false;
} else if (state_2 === "cross") {
closeMenuAnimation_2();
state_2 = "menu";
menuDisappearComplete_2 = false;
crossAppearComplete_2 = false;
}
});
/////////////////////////////////////////////////////
///////////////////// ICON 3 //////////////////////
/////////////////////////////////////////////////////
///Initiation Variables
var icon_3 = document.getElementById("b3");
var topLine_3 = document.getElementById("top-line-3");
var middleLine_3 = document.getElementById("middle-line-3");
var bottomLine_3 = document.getElementById("bottom-line-3");
var state_3 = "menu"; // can be "menu" or "cross"
var topLineY_3;
var middleLineY_3;
var bottomLineY_3;
var topLeftX_3;
var topRightX_3;
var middleLeftX_3;
var middleRightX_3;
var bottomLeftX_3;
var bottomRightX_3;
var topLeftY_3;
var topRightY_3;
var middleLeftY_3;
var middleRightY_3;
var bottomLeftY_3;
var bottomRightY_3;
///Animation Variables
var segmentDuration_3 = 20;
var menuDisappearDurationInFrames_3 = segmentDuration_3;
var crossAppearDurationInFrames_3 = segmentDuration_3 * 1.5;
var crossDisappearDurationInFrames_3 = segmentDuration_3 * 1.5;
var menuAppearDurationInFrames_3 = segmentDuration_3;
var menuDisappearComplete_3 = false;
var crossAppearComplete_3 = false;
var crossDisappearComplete_3 = true;
var menuAppearComplete_3 = true;
var currentFrame_3 = 0;
var cPt_3 = { x: 50, y: 50 }; // center point
var tlPt_3 = { x: 30, y: 37 }; // top right point
var trPt_3 = { x: 70, y: 37 }; // top left point
var mlPt_3 = { x: 30, y: 50 }; // middle right point
var mrPt_3 = { x: 70, y: 50 }; // middle left point
var blPt_3 = { x: 30, y: 63 }; // bottom right point
var brPt_3 = { x: 70, y: 63 }; // bottom left point
var topLineOpacity_3 = 1;
var middleLineOpacity_3 = 1;
var bottomLineOpacity_3 = 1;
///Position Rotation
function positionRotation(centerPoint, orbitPoint, angleInRads) {
var distance = Math.sqrt(Math.pow(orbitPoint.x - centerPoint.x, 2) + Math.pow(orbitPoint.y - centerPoint.y, 2));
orbitPoint.x = centerPoint.x + Math.cos(angleInRads) * distance;
orbitPoint.y = centerPoint.y + Math.sin(angleInRads) * distance;
}
///Menu Disappear
function menuDisappearAnimation_3() {
currentFrame_3++;
if (currentFrame_3 <= menuDisappearDurationInFrames_3) {
window.requestAnimationFrame(() => {
var rotation = Math.PI * 0.5;
//top line
var tlAng = AJS.easeInBack(3.7179, 3.7179 + rotation, menuDisappearDurationInFrames_3, currentFrame_3);
var trAng = AJS.easeInBack(5.7068, 5.7068 + rotation, menuDisappearDurationInFrames_3, currentFrame_3);
positionRotation(cPt_3, tlPt_3, tlAng);
positionRotation(cPt_3, trPt_3, trAng);
topLine_3.setAttribute("d", "M" + tlPt_3.x + "," + tlPt_3.y + " L" + trPt_3.x + "," + trPt_3.y + " Z");
//middle line
var mlAng = AJS.easeInBack(Math.PI, Math.PI + rotation, menuDisappearDurationInFrames_3, currentFrame_3);
var mrAng = AJS.easeInBack(0, rotation, menuDisappearDurationInFrames_3, currentFrame_3);
positionRotation(cPt_3, mlPt_3, mlAng);
positionRotation(cPt_3, mrPt_3, mrAng);
middleLine_3.setAttribute("d", "M" + mlPt_3.x + "," + mlPt_3.y + " L" + mrPt_3.x + "," + mrPt_3.y + " Z");
//bottom line
var blAng = AJS.easeInBack(2.5652, 2.5652 + rotation, menuDisappearDurationInFrames_3, currentFrame_3);
var brAng = AJS.easeInBack(0.5763, 0.5763 + rotation, menuDisappearDurationInFrames_3, currentFrame_3);
positionRotation(cPt_3, blPt_3, blAng);
positionRotation(cPt_3, brPt_3, brAng);
bottomLine_3.setAttribute("d", "M" + blPt_3.x + "," + blPt_3.y + " L" + brPt_3.x + "," + brPt_3.y + " Z");
//recursion
menuDisappearAnimation_3();
});
} else {
currentFrame_3 = 0;
menuDisappearComplete_3 = true;
openMenuAnimation_3();
}
}
///Cross Appear
function crossAppearAnimation_3() {
currentFrame_3++;
if (currentFrame_3 <= crossAppearDurationInFrames_3) {
tlPt_3 = { x: 50, y: 28.7867 };
trPt_3 = { x: 50, y: 71.2132 };
mlPt_3 = { x: 28.7867, y: 50 };
mrPt_3 = { x: 71.2132, y: 50 };
window.requestAnimationFrame(() => {
var rotation = Math.PI * 0.75;
//top line
var tlAng = AJS.easeOutBack(Math.PI, Math.PI + rotation, crossAppearDurationInFrames_3, currentFrame_3);
var trAng = AJS.easeOutBack(0, rotation, crossAppearDurationInFrames_3, currentFrame_3);
positionRotation(cPt_3, tlPt_3, tlAng);
positionRotation(cPt_3, trPt_3, trAng);
topLine_3.setAttribute("d", "M" + tlPt_3.x + "," + tlPt_3.y + " L" + trPt_3.x + "," + trPt_3.y + " Z");
//center line
var mlAng = AJS.easeOutBack(Math.PI * 1.5, Math.PI * 1.5 + rotation, crossAppearDurationInFrames_3, currentFrame_3);
var mrAng = AJS.easeOutBack(Math.PI * 0.5, Math.PI * 0.5 + rotation, crossAppearDurationInFrames_3, currentFrame_3);
positionRotation(cPt_3, mlPt_3, mlAng);
positionRotation(cPt_3, mrPt_3, mrAng);
middleLine_3.setAttribute("d", "M" + mlPt_3.x + "," + mlPt_3.y + " L" + mrPt_3.x + "," + mrPt_3.y + " Z");
//bottom line
bottomLine_3.style.opacity = 0;
//recursion
crossAppearAnimation_3();
});
} else {
currentFrame_3 = 0;
crossAppearComplete_3 = true;
openMenuAnimation_3();
}
}
///Combined Open Menu Animation
function openMenuAnimation_3() {
if (!menuDisappearComplete_3) {
menuDisappearAnimation_3();
} else if (!crossAppearComplete_3) {
crossAppearAnimation_3();
}
}
///Cross Disappear
function crossDisappearAnimation_3() {
currentFrame_3++;
if (currentFrame_3 <= crossDisappearDurationInFrames_3) {
window.requestAnimationFrame(() => {
var rotation = Math.PI * 0.75;
//top line
var tlAng = AJS.easeInBack(Math.PI * 1.75, Math.PI * 1.75 + rotation, crossDisappearDurationInFrames_3, currentFrame_3);
var trAng = AJS.easeInBack(Math.PI * 0.75, Math.PI * 0.75 + rotation, crossDisappearDurationInFrames_3, currentFrame_3);
positionRotation(cPt_3, tlPt_3, tlAng);
positionRotation(cPt_3, trPt_3, trAng);
topLine_3.setAttribute("d", "M" + tlPt_3.x + "," + tlPt_3.y + " L" + trPt_3.x + "," + trPt_3.y + " Z");
//center line
var mlAng = AJS.easeInBack(Math.PI * 2.25, Math.PI * 2.25 + rotation, crossDisappearDurationInFrames_3, currentFrame_3);
var mrAng = AJS.easeInBack(Math.PI * 1.25, Math.PI * 1.25 + rotation, crossDisappearDurationInFrames_3, currentFrame_3);
positionRotation(cPt_3, mlPt_3, mlAng);
positionRotation(cPt_3, mrPt_3, mrAng);
middleLine_3.setAttribute("d", "M" + mlPt_3.x + "," + mlPt_3.y + " L" + mrPt_3.x + "," + mrPt_3.y + " Z");
//bottom line
bottomLine_3.style.opacity = 0;
//recursion
crossDisappearAnimation_3(.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0