在现代网页开发中,动态效果的实现是一个必不可少的部分。GSAP(GreenSock Animation Platform)是一个非常流行的JavaScript动画库,可以轻松地实现各种动画效果,包括TweenMax,TimelineMax,Draggable等。在本文中,我们将使用GSAP.js实现一个简单的加减乘除计算器网页工具。

为了实现我们的计算器,我们需要创建一个HTML页面和一些基本的CSS样式。在本例中,我们将使用以下HTML和CSS代码:

<!DOCTYPE html>
<html>
<head>
	<title>Calculator</title>
	<style>
		#calculator {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			width: 400px;
			margin: 0 auto;
			padding: 20px;
			background-color: #f5f5f5;
			border: 2px solid #ccc;
			box-shadow: 0 0 10px #ccc;
			border-radius: 5px;
		}

		.calculator__button {
			width: 80px;
			height: 80px;
			margin-bottom: 20px;
			font-size: 24px;
			font-weight: bold;
			color: #333;
			background-color: #fff;
			border: 2px solid #ccc;
			border-radius: 5px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
		}

		.calculator__button:hover {
			background-color: #ccc;
			color: #fff;
			border-color: #666;
		}

		.calculator__input {
			width: 100%;
			padding: 10px;
			font-size: 24px;
			font-weight: bold;
			color: #333;
			background-color: #fff;
			border: 2px solid #ccc;
			border-radius: 5px;
			text-align: right;
		}
	</style>
</head>
<body>
	<div id="calculator">
		<input type="text" id="input" class="calculator__input" readonly>
		<button id="add" class="calculator__button">+</button>
		<button id="subtract" class="calculator__button">-</button>
		<button id="multiply" class="calculator__button">&times;</button>
		<button id="divide" class="calculator__button">&divide;</button>
		<button id="one" class="calculator__button">1</button>
		<button id="two" class="calculator__button">2</button>
		<button id="three" class="calculator__button">3</button>
		<button id="four" class="calculator__button">4</button>
		<button id="five" class="calculator__button">5</button>
		<button id="six" class="calculator__button">6</button>
		<button id="seven" class="calculator__button">7</button>
		<button id="eight" class="calculator__button">8</button>
		<button id="nine" class="calculator__button">9</button>
		<button id="zero" class="calculator__button">0</button>
		<button id="clear" class="calculator__button">C</button>
		<button id="equals" class="calculator__button">=</button>
	</div>
</body>
</html>

我们将使用GSAP.js实现计算器的动态效果。我们将创建一个JavaScript文件,并将其链接到我们的HTML页面中。在这个JavaScript文件中,我们将使用TweenMax和TimelineMax实现以下功能:

1、按钮点击效果

2、输入框数字更新效果

3、计算器清空效果

以下是完整的JavaScript代码:

const input = document.getElementById("input");
const add = document.getElementById("add");
const subtract = document.getElementById("subtract");
const multiply = document.getElementById("multiply");
const divide = document.getElementById("divide");
const one = document.getElementById("one");
const two = document.getElementById("two");
const three = document.getElementById("three");
const four = document.getElementById("four");
const five = document.getElementById("five");
const six = document.getElementById("six");
const seven = document.getElementById("seven");
const eight = document.getElementById("eight");
const nine = document.getElementById("nine");
const zero = document.getElementById("zero");
const clear = document.getElementById("clear");
const equals = document.getElementById("equals");

let num1 = "";
let num2 = "";
let operator = "";
let result = "";

// 创建Timeline
const tl = new TimelineMax();

// 按钮点击效果
function buttonClick(button) {
	tl.to(button, 0.1, { scale: 0.9 }).to(button, 0.1, { scale: 1 });
}

// 输入框数字更新效果
function updateInput() {
	tl.to(input, 0.2, { scale: 1.2 }).to(input, 0.2, { scale: 1 });
	input.value = result;
}

// 计算器清空效果
function clearInput() {
	tl.to(input, 0.5, { rotation: 360, opacity: 0 }).to(input, 0.5, { rotation: 0, opacity: 1 });
	num1 = "";
	num2 = "";
	operator = "";
	result = "";
	input.value = "";
}

// 数字按钮点击事件
one.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
		num1 += "1";
		result = num1;
	} else {
		num2 += "1";
		result = num2;
	}
	updateInput();
});

two.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
		num1 += "2";
		result = num1;
	} else {
		num2 += "2";
		result = num2;
	}
	updateInput();
});

three.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
		num1 += "3";
		result = num1;
	} else {
		num2 += "3";
		result = num2;
	}
	updateInput();
});

four.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
		num1 += "4";
		result = num1;
	} else {
		num2 += "4";
		result = num2;
	}
	updateInput();
});

five.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
		num1 += "5";
		result = num1;
	} else {
		num2 += "5";
		result = num2;
	}
	updateInput();
});

six.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
		num1 += "6";
		result = num1;
	} else {
		num2 += "6";
		result = num2;
	}
	updateInput
});

seven.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
	num1 += "7";
	result = num1;
	} else {
	num2 += "7";
	result = num2;
	}
	updateInput();
});

eight.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
	num1 += "8";
	result = num1;
	} else {
	num2 += "8";
	result = num2;
	}
	updateInput();
});

nine.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
	num1 += "9";
	result = num1;
	} else {
	num2 += "9";
	result = num2;
	}
	updateInput();
});

zero.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
	num1 += "0";
	result = num1;
	} else {
	num2 += "0";
	result = num2;
	}
	updateInput();
});

// 运算符按钮点击事件
add.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
	operator = "+";
	} else {
	calculate();
	operator = "+";
	}
});

subtract.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
	operator = "-";
	} else {
	calculate();
	operator = "-";
	}
});

multiply.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
	operator = "";
	} else {
	calculate();
	operator = "";
	}
});

divide.addEventListener("click", function() {
	buttonClick(this);
	if (operator === "") {
	operator = "/";
	} else {
	calculate();
	operator = "/";
	}
});

// 清空按钮点击事件
clear.addEventListener("click", function() {
	buttonClick(this);
	clearInput();
});

// 计算结果
function calculate() {
	let num1Float = parseFloat(num1);
	let num2Float = parseFloat(num2);

	switch(operator) {
		case "+":
			result = num1Float + num2Float;
			break;
		case "-":
			result = num1Float - num2Float;
			break;
		case "*":
			result = num1Float * num2Float;
			break;
		case "/":
			result = num1Float / num2Float;
			break;
		default:
			break;
	}

	num1 = result.toString();
	num2 = "";
}

// 等于号按钮点击事件
equals.addEventListener("click", function() {
	buttonClick(this);
	if (operator !== "") {
	calculate();
	operator = "";
	updateInput();
	}
});

我们已经成功实现了使用GSAP.js创建动态效果的计算器。我们使用了TweenMax和TimelineMax来创建按钮点击效果、输入框数字更新效果和计算器清空效果。我们还创建了点击数字和运算符按钮时的事件处理程序,并使用calculate函数计算结果。我们还创建了一个点击等于号按钮的事件处理程序来计算最终结果。我们可以在浏览器中打开HTML文件并尝试使用我们的动态计算器了。在本教程中,我们了解了如何使用GSAP.js创建动态效果,并在一个加减乘除计算器的实例中演示了它的用法。