利用动画理解数学概念：泰勒展开与积分的面积
数学是抽象的，而动画是一种非常实用的工具，可以帮助我们更直观地理解复杂的数学概念。在本篇文章中，我分享了两个用来讲解数学概念的动画：泰勒级数展开 和 定积分的面积解释，这些动画生动地呈现了数学的核心原理并支持交互式探索。
一. 泰勒级数展开动画
泰勒展开是用多项式（即泰勒多项式）来逼近函数的一种方式。为帮助直观理解其逼近过程，我制作了一款针对 sin(x) 函数的泰勒展开动画。
功能与特点
1. 交互功能
- 阶数滑动条：通过滑动条，用户可实时调整泰勒级数的阶数（1-9阶）。
- 自动演示：点击按钮，动画自动展示从低阶到高阶的逐步逼近过程。
- 重置按钮：将展示重置到初始状态，方便重新演示或调整。
2. 可视化效果
- 蓝色曲线：代表原始函数 sin(x)。
- 红色曲线：显示泰勒多项式的逼近曲线，把函数的近似效果直观展现出来。
- 浅蓝色区域：动态显示逼近误差的范围，展示不同阶数的近似误差。
3. 数据展示
- 实时显示当前的阶数，使用户准确了解当前泰勒多项式的阶。
- 动态更新最大误差值，直观感受误差随展开阶数增加而逐渐减小的变化。
- 数学公式展示：实时显示泰勒展开的具体展开式。
4. 技术特点
- D3.js 动画效果：实现了平滑的曲线绘制和交互演示。
- 响应式设计：适用不同屏幕尺寸，确保所有用户都能获得一致的体验。
- 高精度计算：使用 JavaScript 精确计算泰勒级数和其误差。
使用说明
- 滑动阶数调节条，从1到9阶动态调整泰勒多项式的阶数，观察曲线逼近效果。
- 点击“自动演示”按钮，通过动画观看低阶逐渐逼近高阶的过程。
- 注意观察误差值的变化，体验泰勒多项式的收敛趋势。
- 当需要重新演示时，可点击 “重置” 按钮恢复初始状态。
动画改进建议
- 添加更多函数支持，例如 cos(x)、e^x 等。
- 提供不同展开点的自定义功能，便于观察不同点展开的影响。
- 提供误差曲线或收敛性图表进一步分析误差。
二. 定积分面积的动画解释
积分可以用来表示一个函数在某个区间下方的面积，在定积分的学习过程中，明确这一点至关重要。这款动画通过 数学曲线下的面积计算，帮助用户理解定积分的本质。
功能与特点
1. 函数选择
动画提供了 4 种常见函数供用户选择：
- x²: 二次函数
- sin(x): 三角函数
- e^x: 指数函数
- 2x + 1: 线性函数
2. 可视化特性
- 动态显示分割区间：分割区间数可由用户调整，展示函数曲线下方区域的积分细分。
- 矩形面积累加过程：直观地用矩形逼近实际的曲线面积，展示黎曼和的计算过程。
- 实时显示近似值：动态展示矩形逼近的面积值。
- 误差分析：显示当前逼近误差，帮助用户理解分割区间越细，逼近值越精确的特性。
3. 交互功能
- 分割数量调节：通过滑动条调整分割数量，从 1 到 50，观察分割数变化对近似值的影响。
- 自动动画演示：点击按钮，动画展示分割区间由少到多的渐进过程。
- 重置功能：将演示恢复到初始状态，便于重新观察或切换函数。
- 函数切换：提供不同函数供选择，便于探索不同曲线下的积分现象。
4. 计算展示
- 显示精确积分值：通过解析方法计算得到的目标积分值。
- 逐步显示近似值：通过矩形逼近逐步计算出近似积分值。
- 误差分析: 计算逼近值与目标值的相对误差，实时展示。
使用说明
- 从 函数选择菜单，选择希望研究的目标函数。
- 使用 滑动条调整分割数量，观察矩形面积的变化以及积分值的改进。
- 点击 动画演示，观察分割区间从少到多时近似值如何逼近精确值。
- 重新开始，可点击 重置按钮。
动画改进建议
- 增加更多函数支持，例如 ln(x)、arctan(x) 等。
- 添加自定义积分区间的功能，让用户能够自由选择上下限。
- 添加其他积分逼近方法，例如 梯形法 或 辛普森法。
- 提供缩放功能，让用户能够观察函数与矩形细节。
奉上两个动画的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多函数泰勒级数逼近演示</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
.function-line {
fill: none;
stroke-width: 2px;
}
.original-function {
stroke: #3b82f6;
}
.taylor-approximation {
stroke: #ef4444;
}
.error-area {
fill: #93c5fd;
opacity: 0.3;
}
.formula-block {
overflow-x: auto;
padding: 1rem;
background: #f8f9fa;
border-radius: 0.5rem;
}
</style>
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-4xl mx-auto">
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-4">多函数泰勒级数逼近演示</h2>
<div class="space-y-4">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="flex items-center gap-4 mb-4">
<label for="function-select" class="font-semibold">选择函数：</label>
<select id="function-select" class="p-2 border rounded">
<option value="sin">sin(x)</option>
<option value="cos">cos(x)</option>
<option value="exp">eˣ</option>
<option value="ln">ln(1+x)</option>
</select>
</div>
<div class="formula-block" id="taylor-formula">
<!-- 公式将动态更新 -->
</div>
</div>
<div class="animation-container" id="taylor-demo" style="height: 400px;">
<!-- 动画将在这里渲染 -->
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="control-panel bg-gray-50 p-4 rounded-lg">
<div class="flex items-center gap-2 mb-4">
<label for="order-slider" class="font-semibold">展开项数：</label>
<input type="range" id="order-slider" min="1" max="9" step="1" value="1"
class="w-32">
<span id="order-display" class="ml-2">1</span>
</div>
<div class="flex gap-2">
<button id="animate-button"
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
自动演示
</button>
<button id="reset-button"
class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
重置
</button>
</div>
</div>
<div class="error-display bg-yellow-50 p-4 rounded-lg">
<h4 class="font-semibold mb-2">误差分析</h4>
<p id="error-text">当前最大误差：<span id="error-value">0</span></p>
<p id="convergence-info" class="text-sm text-gray-600 mt-2">
<!-- 收敛信息将动态更新 -->
</p>
</div>
</div>
</div>
</div>
</div>
<script>
class TaylorSeriesVisualizer {
constructor() {
this.width = document.getElementById('taylor-demo').clientWidth;
this.height = 400;
this.margin = {top: 20, right: 20, bottom: 30, left: 40};
this.functions = {
sin: {
func: x => Math.sin(x),
taylor: this.sinTaylor.bind(this),
domain: [-Math.PI, Math.PI],
range: [-1.5, 1.5],
formula: "sin(x) = x - \\frac{x^3}{3!} + \\frac{x^5}{5!} - \\frac{x^7}{7!} + \\cdots",
convergenceInfo: "在整个实数域内收敛"
},
cos: {
func: x => Math.cos(x),
taylor: this.cosTaylor.bind(this),
domain: [-Math.PI, Math.PI],
range: [-1.5, 1.5],
formula: "cos(x) = 1 - \\frac{x^2}{2!} + \\frac{x^4}{4!} - \\frac{x^6}{6!} + \\cdots",
convergenceInfo: "在整个实数域内收敛"
},
exp: {
func: x => Math.exp(x),
taylor: this.expTaylor.bind(this),
domain: [-2, 2],
range: [-1, 8],
formula: "e^x = 1 + x + \\frac{x^2}{2!} + \\frac{x^3}{3!} + \\frac{x^4}{4!} + \\cdots",
convergenceInfo: "在整个实数域内收敛"
},
ln: {
func: x => Math.log(1 + x),
taylor: this.lnTaylor.bind(this),
domain: [-0.9, 2],
range: [-3, 2],
formula: "ln(1+x) = x - \\frac{x^2}{2} + \\frac{x^3}{3} - \\frac{x^4}{4} + \\cdots",
convergenceInfo: "收敛区间为(-1, 1]"
}
};
this.currentFunction = 'sin';
this.setupSVG();
this.setupScales();
this.setupAxes();
this.setupLines();
this.currentOrder = 1;
this.updateFormula();
}
setupSVG() {
d3.select('#taylor-demo').select('svg').remove();
this.svg = d3.select('#taylor-demo')
.append('svg')
.attr('width', this.width)
.attr('height', this.height);
}
setupScales() {
const funcInfo = this.functions[this.currentFunction];
this.xScale = d3.scaleLinear()
.domain(funcInfo.domain)
.range([this.margin.left, this.width - this.margin.right]);
this.yScale = d3.scaleLinear()
.domain(funcInfo.range)
.range([this.height - this.margin.bottom, this.margin.top]);
}
setupAxes() {
this.svg.selectAll('.axis').remove();
// X轴
this.svg.append('g')
.attr('class', 'axis')
.attr('transform', `translate(0,${this.yScale(0)})`)
.call(d3.axisBottom(this.xScale));
// Y轴
this.svg.append('g')
.attr('class', 'axis')
.attr('transform', `translate(${this.xScale(0)},0)`)
.call(d3.axisLeft(this.yScale));
}
setupLines() {
this.svg.selectAll('.function-line').remove();
const originalPoints = this.generatePoints(this.functions[this.currentFunction].func);
this.svg.append('path')
.datum(originalPoints)
.attr('class', 'function-line original-function')
.attr('d', d3.line()
.x(d => this.xScale(d.x))
.y(d => this.yScale(d.y)));
this.taylorPath = this.svg.append('path')
.attr('class', 'function-line taylor-approximation');
}
generatePoints(func, samples = 200) {
const points = [];
const domain = this.functions[this.currentFunction].domain;
const step = (domain[1] - domain[0]) / (samples - 1);
for (let i = 0; i < samples; i++) {
const x = domain[0] + i * step;
points.push({x: x, y: func(x)});
}
return points;
}
factorial(n) {
if (n === 0 || n === 1) return 1;
return n * this.factorial(n - 1);
}
sinTaylor(x, order) {
let result = 0;
for (let n = 0; n < order; n++) {
result += Math.pow(-1, n) * Math.pow(x, 2*n + 1) / this.factorial(2*n + 1);
}
return result;
}
cosTaylor(x, order) {
let result = 0;
for (let n = 0; n < order; n++) {
result += Math.pow(-1, n) * Math.pow(x, 2*n) / this.factorial(2*n);
}
return result;
}
expTaylor(x, order) {
let result = 0;
for (let n = 0; n < order; n++) {
result += Math.pow(x, n) / this.factorial(n);
}
return result;
}
lnTaylor(x, order) {
let result = 0;
for (let n = 1; n <= order; n++) {
result += Math.pow(-1, n-1) * Math.pow(x, n) / n;
}
return result;
}
updateFormula() {
const formula = this.functions[this.currentFunction].formula;
document.getElementById('taylor-formula').innerHTML = `\\[${formula}\\]`;
MathJax.typeset();
document.getElementById('convergence-info').textContent =
this.functions[this.currentFunction].convergenceInfo;
}
updateVisualization(order) {
this.currentOrder = order;
const taylorPoints = this.generatePoints(
x => this.functions[this.currentFunction].taylor(x, order)
);
this.taylorPath
.datum(taylorPoints)
.transition()
.duration(500)
.attr('d', d3.line()
.x(d => this.xScale(d.x))
.y(d => this.yScale(d.y)));
// 计算误差
let maxError = 0;
taylorPoints.forEach(point => {
const actualValue = this.functions[this.currentFunction].func(point.x);
const error = Math.abs(actualValue - point.y);
maxError = Math.max(maxError, error);
});
document.getElementById('error-value').textContent =
maxError.toFixed(4);
}
changeFunction(funcName) {
this.currentFunction = funcName;
this.setupScales();
this.setupAxes();
this.setupLines();
this.updateFormula();
this.updateVisualization(this.currentOrder);
}
animate() {
let order = 1;
const maxOrder = parseInt(document.getElementById('order-slider').max);
const animate = () => {
if (order > maxOrder) return;
this.updateVisualization(order);
document.getElementById('order-slider').value = order;
document.getElementById('order-display').textContent = order;
order++;
setTimeout(animate, 1000);
};
animate();
}
reset() {
this.updateVisualization(1);
document.getElementById('order-slider').value = 1;
document.getElementById('order-display').textContent = 1;
}
}
// 初始化可视化
document.addEventListener('DOMContentLoaded', () => {
const visualizer = new TaylorSeriesVisualizer();
// 绑定控件事件
document.getElementById('function-select').addEventListener('change', (e) => {
visualizer.changeFunction(e.target.value);
});
document.getElementById('order-slider').addEventListener('input', (e) => {
const order = parseInt(e.target.value);
document.getElementById('order-display').textContent = order;
visualizer.updateVisualization(order);
});
document.getElementById('animate-button').addEventListener('click', () => {
visualizer.animate();
});
document.getElementById('reset-button').addEventListener('click', () => {
visualizer.reset();
});
});
</script>
</body>
</html>
以上是泰勒展开的动画
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定积分的几何意义</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
.function-line {
fill: none;
stroke: #3b82f6;
stroke-width: 2px;
}
.rectangle {
fill: #93c5fd;
opacity: 0.5;
stroke: #1d4ed8;
stroke-width: 1px;
}
.partition-line {
stroke: #94a3b8;
stroke-dasharray: 4;
}
.area-sum {
font-weight: bold;
font-size: 1.1em;
}
</style>
</head>
<body class="bg-gray-100 p-8">
<div class="max-w-4xl mx-auto">
<div class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-2xl font-bold mb-4">定积分的几何意义</h2>
<div class="space-y-4">
<div class="bg-blue-50 p-4 rounded-lg">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="function-select" class="font-semibold">选择函数：</label>
<select id="function-select" class="p-2 border rounded w-full">
<option value="quadratic">f(x) = x²</option>
<option value="sin">f(x) = sin(x)</option>
<option value="exp">f(x) = eˣ</option>
<option value="linear">f(x) = 2x + 1</option>
</select>
</div>
<div>
<label for="partition-slider" class="font-semibold">分割数量：</label>
<input type="range" id="partition-slider"
min="1" max="50" value="4"
class="w-full">
<span id="partition-display">4</span>
</div>
</div>
<div class="mt-4">
<div id="integral-formula" class="text-center">
<!-- 积分公式将动态更新 -->
</div>
</div>
</div>
<div class="animation-container" id="integral-demo" style="height: 400px;">
<!-- 动画将在这里渲染 -->
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="control-panel bg-gray-50 p-4 rounded-lg">
<div class="flex gap-2">
<button id="animate-button"
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
动画演示
</button>
<button id="reset-button"
class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600">
重置
</button>
</div>
</div>
<div class="results bg-yellow-50 p-4 rounded-lg">
<h4 class="font-semibold mb-2">计算结果</h4>
<p>实际积分值：<span id="exact-value">0</span></p>
<p>近似值：<span id="approximate-value">0</span></p>
<p>相对误差：<span id="error-value">0</span>%</p>
</div>
</div>
</div>
</div>
</div>
<script>
class IntegralVisualizer {
constructor() {
this.width = document.getElementById('integral-demo').clientWidth;
this.height = 400;
this.margin = {top: 20, right: 20, bottom: 30, left: 40};
this.functions = {
quadratic: {
func: x => x * x,
latex: "\\int_0^2 x^2 dx",
domain: [0, 2],
range: [0, 4],
exactValue: 8/3
},
sin: {
func: x => Math.sin(x),
latex: "\\int_0^\\pi \\sin(x) dx",
domain: [0, Math.PI],
range: [-1.2, 1.2],
exactValue: 2
},
exp: {
func: x => Math.exp(x),
latex: "\\int_0^1 e^x dx",
domain: [0, 1],
range: [0, 3],
exactValue: Math.E - 1
},
linear: {
func: x => 2 * x + 1,
latex: "\\int_0^1 (2x + 1) dx",
domain: [0, 1],
range: [0, 4],
exactValue: 2
}
};
this.currentFunction = 'quadratic';
this.partitions = 4;
this.setupSVG();
this.setupScales();
this.drawFunction();
this.updateFormula();
this.calculateIntegral();
}
setupSVG() {
d3.select('#integral-demo').select('svg').remove();
this.svg = d3.select('#integral-demo')
.append('svg')
.attr('width', this.width)
.attr('height', this.height);
}
setupScales() {
const funcInfo = this.functions[this.currentFunction];
this.xScale = d3.scaleLinear()
.domain(funcInfo.domain)
.range([this.margin.left, this.width - this.margin.right]);
this.yScale = d3.scaleLinear()
.domain(funcInfo.range)
.range([this.height - this.margin.bottom, this.margin.top]);
// 绘制坐标轴
this.svg.selectAll('.axis').remove();
this.svg.append('g')
.attr('class', 'axis')
.attr('transform', `translate(0,${this.yScale(0)})`)
.call(d3.axisBottom(this.xScale));
this.svg.append('g')
.attr('class', 'axis')
.attr('transform', `translate(${this.xScale(0)},0)`)
.call(d3.axisLeft(this.yScale));
}
drawFunction() {
const funcInfo = this.functions[this.currentFunction];
const points = this.generatePoints(funcInfo.func);
this.svg.selectAll('.function-line').remove();
this.svg.append('path')
.datum(points)
.attr('class', 'function-line')
.attr('d', d3.line()
.x(d => this.xScale(d.x))
.y(d => this.yScale(d.y)));
}
generatePoints(func, samples = 200) {
const points = [];
const domain = this.functions[this.currentFunction].domain;
const step = (domain[1] - domain[0]) / (samples - 1);
for (let i = 0; i < samples; i++) {
const x = domain[0] + i * step;
points.push({x: x, y: func(x)});
}
return points;
}
drawPartitions() {
const funcInfo = this.functions[this.currentFunction];
const [a, b] = funcInfo.domain;
const dx = (b - a) / this.partitions;
// 清除旧的矩形
this.svg.selectAll('.rectangle').remove();
this.svg.selectAll('.partition-line').remove();
// 绘制分割线
for (let i = 0; i <= this.partitions; i++) {
const x = a + i * dx;
this.svg.append('line')
.attr('class', 'partition-line')
.attr('x1', this.xScale(x))
.attr('y1', this.yScale(0))
.attr('x2', this.xScale(x))
.attr('y2', this.yScale(funcInfo.func(x)))
.style('opacity', 0)
.transition()
.duration(500)
.style('opacity', 1);
}
// 绘制矩形
let sum = 0;
for (let i = 0; i < this.partitions; i++) {
const x = a + i * dx;
const height = funcInfo.func(x + dx/2);
sum += height * dx;
this.svg.append('rect')
.attr('class', 'rectangle')
.attr('x', this.xScale(x))
.attr('y', this.yScale(Math.max(0, height)))
.attr('width', this.xScale(x + dx) - this.xScale(x))
.attr('height', Math.abs(this.yScale(height) - this.yScale(0)))
.style('opacity', 0)
.transition()
.duration(500)
.delay(i * 100)
.style('opacity', 0.5);
}
// 更新近似值
document.getElementById('approximate-value').textContent =
sum.toFixed(4);
// 更新误差
const exactValue = funcInfo.exactValue;
const error = Math.abs((sum - exactValue) / exactValue * 100);
document.getElementById('error-value').textContent =
error.toFixed(2);
}
updateFormula() {
const formula = this.functions[this.currentFunction].latex;
document.getElementById('integral-formula').innerHTML = `\\[${formula}\\]`;
MathJax.typeset();
const exactValue = this.functions[this.currentFunction].exactValue;
document.getElementById('exact-value').textContent =
exactValue.toFixed(4);
}
calculateIntegral() {
this.drawPartitions();
}
animate() {
let n = 1;
const animate = () => {
if (n > 50) return;
this.partitions = n;
document.getElementById('partition-slider').value = n;
document.getElementById('partition-display').textContent = n;
this.calculateIntegral();
n *= 2;
if (n <= 50) setTimeout(animate, 1500);
};
animate();
}
reset() {
this.partitions = 4;
document.getElementById('partition-slider').value = 4;
document.getElementById('partition-display').textContent = 4;
this.calculateIntegral();
}
changeFunction(funcName) {
this.currentFunction = funcName;
this.setupScales();
this.drawFunction();
this.updateFormula();
this.calculateIntegral();
}
}
// 初始化可视化
document.addEventListener('DOMContentLoaded', () => {
const visualizer = new IntegralVisualizer();
// 绑定控件事件
document.getElementById('function-select').addEventListener('change', (e) => {
visualizer.changeFunction(e.target.value);
});
document.getElementById('partition-slider').addEventListener('input', (e) => {
visualizer.partitions = parseInt(e.target.value);
document.getElementById('partition-display').textContent = e.target.value;
visualizer.calculateIntegral();
});
document.getElementById('animate-button').addEventListener('click', () => {
visualizer.animate();
});
document.getElementById('reset-button').addEventListener('click', () => {
visualizer.reset();
});
});
</script>
</body>
</html>
以上是积分面积的动画
动画的意义
通过这两个动画演示，我希望能够帮助更多学生直观地理解数学背后的实际意义和计算方法：
- 泰勒展开：通过逐步逼近的形式，展示了如何用有限多项式逼近复杂函数的过程，同时直观地理解了“误差”这一概念。
- 定积分：通过矩形面积的直观展示，使抽象的积分变得生动，并让人理解“分割越多，逼近越精确”。
这两种方法都依赖于 渐进过程 的展示，让学习者逐步理解核心概念。
如果您感兴趣，我可以进一步基于这些动画开发更多数学相关的演示内容，例如：
- 微分的几何意义
- 多元函数的可视化（如偏导数与梯度）
- 统计学直观动画（如中心极限定理）
希望大家通过这些互动式动画，提升数学学习的趣味性与效率！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
