参考文档
可视化工具网站
https://www.desmos.com/calculator/k01p40v0ct?lang=zh-CN
基本介绍
java
import { curves } from '@kit.ArkUI'
curves.interpolatingSpring(10, 1, 228, 30) // 创建一个时长由弹簧参数决定的弹簧插值曲线
/**
代码核心功能：
该代码片段用于创建一个弹簧插值曲线，曲线的时长由弹簧参数决定。这在动画或界面过渡效果中非常有用，可以根据物理模拟的弹簧运动来平滑过渡。
代码逻辑走读：
1. 导入模块：代码首先从`@kit.ArkUI`模块中导入`curves`对象，这个对象包含了各种用于动画和过渡效果的函数和方法。
2. 创建弹簧插值曲线：调用`curves.interpolatingSpring`方法，传入四个参数：`10`（初始位置）、`1`（初始速度）、`228`（弹簧常数）和`30`（摩擦常数）。这个方法根据这些参数创建一个弹簧插值曲线，曲线的时长和形状由这些参数定义。
3. 曲线应用：生成的曲线可以用于界面元素的动画效果，使其在移动或变化时遵循弹簧运动的物理规律，从而实现平滑、自然的过渡。
本次解答由人工智能生成，仅供参考
*/- damping（阻尼）：控制弹簧震荡的衰减速度。
阻尼值越小，弹簧震荡次数越多，衰减越慢（如软弹簧，弹性强）；
阻尼值越大，震荡越快停止，甚至可能无明显回弹（如硬弹簧，接近刚性）。 - stiffness（刚度 / 劲度系数）：控制弹簧的 "硬度"。
刚度越大，弹簧越 "硬"，运动速度快、回弹幅度小（如金属弹簧）；
刚度越小，弹簧越 "软"，运动更平缓、回弹幅度大（如橡胶弹簧）。 - mass（质量）：模拟被弹簧拉动的物体质量（部分实现中默认固定值）。
质量越大，动画启动和停止的惯性越强，运动更迟缓；质量越小，响应越灵敏。 - initialVelocity（初始速度）：动画开始时的初始运动速度，影响初始震荡的幅度（如快速滑动后的惯性回弹）。
from（起始值） 与 to（目标值）：定义动画的起始状态和最终稳定的目标状态（如位置、大小、透明度等属性值）。
代码
弹簧曲线动画
py
import numpy as np
import matplotlib.pyplot as plt
from matplotlib.animation import FuncAnimation
from scipy.interpolate import make_interp_spline
import matplotlib.widgets as widgets
# 设置中文显示
plt.rcParams["font.family"] = ["SimHei", "Heiti TC", "Heiti TC"]
plt.rcParams["axes.unicode_minus"] = False # 正确显示负号
class ParametricSpringAnimation:
def __init__(self):
# 物理参数（默认值）
self.initial_velocity = -2.0 # 初始速度（负值表示向左运动）
self.mass = 1.0 # 质量
self.stiffness = 5.0 # 刚度（劲度系数）
self.damping = 0.5 # 阻尼系数
# 弹簧基本参数
self.start_point = np.array([2, 5]) # 弹簧固定端
self.equilibrium_pos = 8 # 平衡位置X坐标
self.spring_coils = 12 # 弹簧圈数
self.coil_height = 0.6 # 线圈高度
# 状态变量
self.current_pos = self.equilibrium_pos # 当前位置
self.current_vel = self.initial_velocity # 当前速度
self.time = 0.0 # 时间
# 动画参数
self.total_frames = 300 # 总帧数
self.fps = 60 # 帧率
self.dt = 1.0 / self.fps # 时间步长
# 创建图形和轴
self.fig = plt.figure(figsize=(12, 8))
self.ax = self.fig.add_axes([0.1, 0.3, 0.8, 0.6]) # 主绘图区
self.fig.suptitle('参数可控的插值弹簧曲线动画', fontsize=16)
# 设置主坐标轴范围
self.ax.set_xlim(0, 12)
self.ax.set_ylim(2, 12)
self.ax.set_xlabel('X轴')
self.ax.set_ylabel('Y轴')
self.ax.grid(True, alpha=0.3)
self.ax.set_aspect('equal', adjustable='box')
# 初始化绘图元素
self.spring_line, = self.ax.plot([], [], 'b-', linewidth=3) # 弹簧曲线
self.fixed_point, = self.ax.plot([], [], 'ro', markersize=10) # 固定端点
self.mass_point, = self.ax.plot([], [], 'go', markersize=15) # 重物
self.trace_line, = self.ax.plot([], [], 'r-', linewidth=1, alpha=0.3) # 轨迹线
# 轨迹记录
self.trace_points = []
# 信息文本
self.info_text = self.ax.text(0.02, 0.98, '', transform=self.ax.transAxes,
verticalalignment='top', bbox=dict(boxstyle='round', facecolor='white', alpha=0.8))
# 添加参数控制面板
self.add_parameter_controls()
def add_parameter_controls(self):
"""添加参数控制滑块"""
# 初始速度滑块
ax_vel = self.fig.add_axes([0.2, 0.2, 0.65, 0.03])
self.vel_slider = widgets.Slider(
ax=ax_vel,
label='初始速度',
valmin=-5.0,
valmax=5.0,
valinit=self.initial_velocity,
valstep=0.1
)
# 质量滑块
ax_mass = self.fig.add_axes([0.2, 0.15, 0.65, 0.03])
self.mass_slider = widgets.Slider(
ax=ax_mass,
label='质量',
valmin=0.1,
valmax=5.0,
valinit=self.mass,
valstep=0.1
)
# 刚度滑块
ax_stiff = self.fig.add_axes([0.2, 0.1, 0.65, 0.03])
self.stiff_slider = widgets.Slider(
ax=ax_stiff,
label='刚度',
valmin=1.0,
valmax=20.0,
valinit=self.stiffness,
valstep=0.5
)
# 阻尼滑块
ax_damp = self.fig.add_axes([0.2, 0.05, 0.65, 0.03])
self.damp_slider = widgets.Slider(
ax=ax_damp,
label='阻尼',
valmin=0.1,
valmax=2.0,
valinit=self.damping,
valstep=0.1
)
# 重置按钮
ax_reset = self.fig.add_axes([0.85, 0.05, 0.1, 0.04])
self.reset_btn = widgets.Button(ax_reset, '重置')
# 绑定事件处理函数
self.vel_slider.on_changed(self.update_parameters)
self.mass_slider.on_changed(self.update_parameters)
self.stiff_slider.on_changed(self.update_parameters)
self.damp_slider.on_changed(self.update_parameters)
self.reset_btn.on_clicked(self.reset_animation)
def init_animation(self):
"""初始化动画元素"""
self.spring_line.set_data([], [])
self.fixed_point.set_data([], [])
self.mass_point.set_data([], [])
self.trace_line.set_data([], [])
self.info_text.set_text('')
return self.spring_line, self.fixed_point, self.mass_point, self.trace_line, self.info_text
def update_parameters(self, val):
"""更新物理参数"""
self.initial_velocity = self.vel_slider.val
self.mass = self.mass_slider.val
self.stiffness = self.stiff_slider.val
self.damping = self.damp_slider.val
self.reset_animation(None) # 参数改变后重置动画
def reset_animation(self, event):
"""重置动画状态"""
self.current_pos = self.equilibrium_pos
self.current_vel = self.initial_velocity
self.time = 0.0
self.trace_points = []
def generate_spring_points(self, end_x):
"""生成弹簧上的点并进行插值平滑"""
end_point = np.array([end_x, self.start_point[1]])
# 计算弹簧总长度和方向
length = np.linalg.norm(end_point - self.start_point)
# 生成弹簧的控制点
t = np.linspace(0, 1, self.spring_coils * 2 + 1)
x = self.start_point[0] + t * (end_point[0] - self.start_point[0])
# 生成弹簧的波动形状
y = self.start_point[1] + np.sin(t * self.spring_coils * 2 * np.pi) * self.coil_height
# 使用三次样条插值使曲线更平滑
spl = make_interp_spline(t, np.column_stack((x, y)), k=3)
t_smooth = np.linspace(0, 1, 200) # 更密集的点
smooth_points = spl(t_smooth)
return smooth_points
def calculate_physics(self):
"""根据物理规律计算下一帧状态"""
# 胡克定律：F = -k(x - x0) - c*v
displacement = self.current_pos - self.equilibrium_pos
force = -self.stiffness * displacement - self.damping * self.current_vel
# 牛顿第二定律：a = F/m
acceleration = force / self.mass
# 更新速度和位置
self.current_vel += acceleration * self.dt
self.current_pos += self.current_vel * self.dt
# 限制位置范围，防止弹簧过度拉伸
if self.current_pos < self.start_point[0] + 1.0:
self.current_pos = self.start_point[0] + 1.0
self.current_vel = 0.0
if self.current_pos > 11.0:
self.current_pos = 11.0
self.current_vel = 0.0
self.time += self.dt
def update_animation(self, frame):
"""更新动画帧"""
# 计算物理状态
self.calculate_physics()
# 生成弹簧曲线点
spring_points = self.generate_spring_points(self.current_pos)
# 更新弹簧曲线
self.spring_line.set_data(spring_points[:, 0], spring_points[:, 1])
# 更新固定端点
self.fixed_point.set_data(self.start_point[0], self.start_point[1])
# 更新重物位置
self.mass_point.set_data(self.current_pos, self.start_point[1])
# 更新轨迹
self.trace_points.append([self.time, self.current_pos - self.equilibrium_pos])
if len(self.trace_points) > 1000: # 限制轨迹点数量
self.trace_points.pop(0)
# 绘制轨迹
if len(self.trace_points) > 1:
trace_array = np.array(self.trace_points)
self.trace_line.set_data(trace_array[:, 0], trace_array[:, 1] + self.equilibrium_pos)
# 更新信息文本
displacement = self.current_pos - self.equilibrium_pos
self.info_text.set_text(
f'时间: {self.time:.1f}s\n'
f'位移: {displacement:.2f}\n'
f'速度: {self.current_vel:.2f}'
)
return self.spring_line, self.fixed_point, self.mass_point, self.trace_line, self.info_text
def create_animation(self, save_path=None):
"""创建并显示动画"""
anim = FuncAnimation(
self.fig,
self.update_animation,
frames=self.total_frames,
init_func=self.init_animation,
interval=1000/self.fps, # 每帧间隔毫秒
blit=True,
repeat=True # 动画循环播放
)
# 修复matplotlib版本兼容性问题
anim._resize_id = None
# 如果提供了保存路径，则保存动画
if save_path:
try:
anim.save(save_path, writer='ffmpeg', fps=self.fps)
print(f"动画已保存至: {save_path}")
except Exception as e:
print(f"保存动画失败: {e}")
print("请确保已安装ffmpeg")
plt.show()
if __name__ == "__main__":
# 创建并显示弹簧动画
spring_anim = ParametricSpringAnimation()
# 如需保存动画，取消下面一行的注释并指定路径
spring_anim.create_animation('parametric_spring_animation.mp4')
# 显示动画
spring_anim.create_animation()贝塞尔曲线动画
python
import numpy as np
import matplotlib.pyplot as plt
from matplotlib.animation import FuncAnimation
import matplotlib.animation as animation
# 设置中文显示
plt.rcParams["font.family"] = ["SimHei", "WenQuanYi Micro Hei", "Heiti TC"]
plt.rcParams["axes.unicode_minus"] = False # 正确显示负号
class BezierAnimation:
def __init__(self):
# 初始化控制点 - 可以修改这些点来获得不同的曲线
self.controls = np.array([
[0, 0], # 起点
[2, 0], # 控制点1
[2, 5], # 控制点2
[5, 5] # 终点
])
self.num_points = 100 # 曲线上的点数量
self.t = np.linspace(0, 1, self.num_points) # 参数t从0到1
# 创建图形和轴
self.fig, self.ax = plt.subplots(figsize=(8, 6))
self.fig.suptitle('贝塞尔曲线动画演示', fontsize=15)
# 设置坐标轴范围
self.ax.set_xlim(-1, 6)
self.ax.set_ylim(-1, 5)
self.ax.set_xlabel('X轴')
self.ax.set_ylabel('Y轴')
self.ax.grid(True)
# 初始化绘图元素
self.control_line, = self.ax.plot([], [], 'r--', alpha=0.6) # 控制点连接线
self.control_points, = self.ax.plot([], [], 'ro', markersize=8) # 控制点
self.bezier_curve, = self.ax.plot([], [], 'b-', linewidth=2) # 贝塞尔曲线
self.animated_point, = self.ax.plot([], [], 'go', markersize=10) # 曲线上的动画点
# 添加控制点标签
self.control_labels = [self.ax.text(0, 0, '', fontsize=12) for _ in range(len(self.controls))]
# 动画帧数量
self.animation_frames = 100
def bezier_curve_calc(self, t):
"""计算贝塞尔曲线上的点"""
n = len(self.controls) - 1 # 曲线阶数 = 控制点数量 - 1
result = np.zeros(2)
for i in range(n + 1):
# 计算二项式系数
binom = np.math.comb(n, i)
# 计算贝塞尔基函数
basis = binom * (t ** i) * ((1 - t) ** (n - i))
# 累加计算曲线上的点
result += basis * self.controls[i]
return result
def init_animation(self):
"""初始化动画"""
self.control_line.set_data([], [])
self.control_points.set_data([], [])
self.bezier_curve.set_data([], [])
self.animated_point.set_data([], [])
for label in self.control_labels:
label.set_text('')
return (self.control_line, self.control_points, self.bezier_curve,
self.animated_point, *self.control_labels)
def update_animation(self, frame):
"""更新动画帧"""
# 计算当前帧对应的t值
current_t = frame / self.animation_frames
# 更新控制点显示
self.control_points.set_data(self.controls[:, 0], self.controls[:, 1])
self.control_line.set_data(self.controls[:, 0], self.controls[:, 1])
# 更新控制点标签
for i, label in enumerate(self.control_labels):
label.set_position((self.controls[i, 0] + 0.1, self.controls[i, 1] + 0.1))
label.set_text(f'P{i}')
# 计算当前t值范围内的贝塞尔曲线
curve_points = np.array([self.bezier_curve_calc(t) for t in self.t if t <= current_t])
if len(curve_points) > 0:
self.bezier_curve.set_data(curve_points[:, 0], curve_points[:, 1])
# 更新动画点（当前t对应的点）
current_point = self.bezier_curve_calc(current_t)
self.animated_point.set_data(current_point[0], current_point[1])
return (self.control_line, self.control_points, self.bezier_curve,
self.animated_point, *self.control_labels)
def create_animation(self, save_path=None):
"""创建并显示动画"""
anim = FuncAnimation(
self.fig,
self.update_animation,
frames=self.animation_frames + 1,
init_func=self.init_animation,
interval=50, # 每帧间隔毫秒
blit=True
)
# 如果提供了保存路径，则保存动画
if save_path:
# 需要安装ffmpeg才能保存为mp4
anim.save(save_path, writer='ffmpeg', fps=20)
plt.tight_layout()
plt.show()
if __name__ == "__main__":
# 创建并显示贝塞尔曲线动画
bezier_anim = BezierAnimation()
# 如需保存动画，取消下面一行的注释并指定路径
# 保存并显示动画
bezier_anim.create_animation('bezier_animation.mp4')
# 显示动画
bezier_anim.create_animation()弹簧动画模拟器
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>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
accent: '#8B5CF6',
dark: '#1E293B',
light: '#F8FAFC'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.card-shadow {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
}
.slider-thumb {
@apply appearance-none w-5 h-5 rounded-full bg-primary cursor-pointer;
}
.fixed-dimension {
width: 400px;
height: 200px;
flex-shrink: 0;
overflow: hidden;
}
}
input[type="range"]::-webkit-slider-thumb {
@apply slider-thumb;
}
input[type="range"]::-moz-range-thumb {
@apply slider-thumb;
}
</style>
</head>
<body class="bg-gray-50 font-sans text-dark">
<div class="container mx-auto px-4 py-8 max-w-5xl">
<header class="text-center mb-10">
<h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-2">弹簧曲线模拟器</h1>
<p class="text-gray-600 max-w-2xl mx-auto">调整参数以模拟不同弹簧特性，实时查看位移-时间曲线</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- 控制面板 -->
<div class="lg:col-span-1">
<div class="bg-white rounded-xl-6 card-shadowshadow">
<h2 class="text-xl font-semibold mb-6 flex items-center">
<i class="fa fa-sliders text-primary mr-2"></i>参数控制
</h2>
<div class="space-y-6">
<!-- 初始速度 -->
<div>
<div class="flex justify-between mb-1">
<label for="velocity" class="text-sm font-medium text-gray-700">初始速度</label>
<span id="velocity-value" class="text-sm font-medium text-primary">-10</span>
</div>
<input
type="range"
id="velocity"
min="-50"
max="50"
value="-10"
class="w-full h-2 bg-gray-200 rounded-lg"
>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>-50</span>
<span>0</span>
<span>50</span>
</div>
</div>
<!-- 质量 -->
<div>
<div class="flex justify-between mb-1">
<label for="mass" class="text-sm font-medium text-gray-700">质量</label>
<span id="mass-value" class="text-sm font-medium text-primary">1.0</span>
</div>
<input
type="range"
id="mass"
min="0.1"
max="5"
step="0.1"
value="1.0"
class="w-full h-2 bg-gray-200 rounded-lg"
>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>0.1</span>
<span>2.5</span>
<span>5.0</span>
</div>
</div>
<!-- 刚度 -->
<div>
<div class="flex justify-between mb-1">
<label for="stiffness" class="text-sm font-medium text-gray-700">刚度</label>
<span id="stiffness-value" class="text-sm font-medium text-primary">100</span>
</div>
<input
type="range"
id="stiffness"
min="10"
max="500"
value="100"
class="w-full h-2 bg-gray-200 rounded-lg"
>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>10</span>
<span>250</span>
<span>500</span>
</div>
</div>
<!-- 阻尼 -->
<div>
<div class="flex justify-between mb-1">
<label for="damping" class="text-sm font-medium text-gray-700">阻尼</label>
<span id="damping-value" class="text-sm font-medium text-primary">10</span>
</div>
<input
type="range"
id="damping"
min="0"
max="50"
value="10"
class="w-full h-2 bg-gray-200 rounded-lg"
>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>0</span>
<span>25</span>
<span>50</span>
</div>
</div>
<!-- 初始位置 -->
<div>
<div class="flex justify-between mb-1">
<label for="position" class="text-sm font-medium text-gray-700">初始位置</label>
<span id="position-value" class="text-sm font-medium text-primary">100</span>
</div>
<input
type="range"
id="position"
min="-200"
max="200"
value="100"
class="w-full h-2 bg-gray-200 rounded-lg"
>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>-200</span>
<span>0</span>
<span>200</span>
</div>
</div>
<!-- 动画速度 -->
<div>
<div class="flex justify-between mb-1">
<label for="speed" class="text-sm font-medium text-gray-700">动画速度</label>
<span id="speed-value" class="text-sm font-medium text-primary">1.0x</span>
</div>
<input
type="range"
id="speed"
min="0.1"
max="3"
step="0.1"
value="1.0"
class="w-full h-2 bg-gray-200 rounded-lg"
>
<div class="flex justify-between text-xs text-gray-500 mt-1">
<span>慢速</span>
<span>正常</span>
<span>快速</span>
</div>
</div>
<div class="pt-4">
<button id="simulate-btn" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-allduration-300 flex items-center justify-center">
<i class="fa fa-play mr-2"></i> 开始模拟
</button>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 mt-6 card-shadow">
<h2 class="text-xl font-semibold mb-4 flex items-center">
<i class="fa fa-info-circle text-accent mr-2"></i>参数说明
</h2>
<ul class="text-sm text-gray-600 space-y-2">
<li class="flex items-start">
<i class="fa fa-arrow-right text-primary mt-1 mr-2"></i>
<span><strong>初始速度</strong>：物体开始运动的速度，正值向右，负值向左</span>
</li>
<li class="flex items-start">
<i class="fa fa-arrow-right text-primary mt-1 mr-2"></i>
<span><strong>质量</strong>：物体的质量，越大惯性越大</span>
</li>
<li class="flex items-start">
<i class="fa fa-arrow-right text-primary mt-1 mr-2"></i>
<span><strong>刚度</strong>：弹簧的硬度，越大弹簧越硬</span>
</li>
<li class="flex items-start">
<i class="fa fa fa-arrow-right text-primary mt-1 mr-2"></i>
<span><strong>阻尼</strong>：阻力大小，越大震荡衰减越快</span>
</li>
<li class="flex items-start">
<i class="fa fa fa fa-arrow-right text-primary mt-1 mr-2"></i>
<span><strong>初始位置</strong>：物体的起始位置，偏离平衡位置的距离</span>
</li>
<li class="flex items-start">
<i class="fa fa-arrow-right text-primary mt-1 mr-2"></i>
<span><strong>动画速度</strong>：控制动画播放速度，1.0x为正常速度</span>
</li>
</ul>
</div>
</div>
<!-- 可视化区域 -->
<div class="lg:col-span-2">
<div class="bg-white rounded-xl p-6 card-shadow">
<!-- 弹簧动画动画演示（固定大小） -->
<div class="mb-6">
<h2 class="text-lg font-semibold mb-2 flex items-center">
<i class="fa fa-film text-secondary mr-2"></i>弹簧动画
</h2>
<div class="fixed-dimension border borderborderborderborderborder-gray-200 rounded-lg bg-gray-50 relative">
<div id="spring-container" class="absolute inset-0 flex items-center px-4">
<!-- 墙面 -->
<div class="w-3 h-12 bg-gray-400 rounded-sm"></div>
<!-- 弹簧 -->
<div id="spring" class="flex-1 h-3 flex justifyjustify-between items-centeritems-center mx-1">
<div class="h-full w-1 bg-primary"></div>
<div class="h-full w-1 bg-primary"></div>
<div class="h-full w-1 bg-primary"></div>
<div class="h-full w-1 bg-primary"></div>
<div class="h-full w-1 bg-primary"></div>
<div class="h-full w-1 bg-primary"></div>
<div class="h-full w-1 bg-primary"></div>
<div class="h-full w-1 bg-primary"></div>
<div class="h-full w-1 bg-primary"></div>
<div class="h-full w-1 bg-primary"></div>
<div class="h-full w-1 bg-primary"></div>
<div class="h-full w-1 bg-primary"></div>
<div class="h-full w-1 bg-primary"></div>
</div>
<!-- 物体 -->
<div id="mass-object" class="w-12 h-12 bg-accent rounded-full-full-fullflexitemsitemsitemsitems-centertext-white font-bold text-sm">
m
</div>
</div>
</div>
</div>
<!-- 曲线图 -->
<div>
<h2 class="text-lg font-semibold mb-2 flex items-center">
<i class="fa fa-line-chart text-primary mr-2"></i>位移-时间曲线
</h2>
<div class="fixed-dimension border border-gray-200 rounded-lg">
<canvas id="spring-chart"></canvas>
</div>
</div>
</div>
</div>
</div>
<footer class="mt-12 text-center text-gray-500 text-sm">
<p>弹簧曲线曲线模拟器基于胡克定律模拟：F = -kx - cv</p>
</footer>
</div>
<script>
// 获取DOM元素
const velocitySlider = document.getElementById('velocity');
const velocityValue = document.getElementById('velocity-value');
const massSlider = document.getElementById('mass');
const massValue = document.getElementById('mass-value');
const stiffnessSlider = document.getElementById('stiffness');
const stiffnessValue = document.getElementById('stiffness-value');
const dampingSlider = document.getElementById('damping');
const dampingValue = document.getElementById('damping-value');
const positionSlider = document.getElementById('position');
const positionValue = document.getElementById('position-value');
const speedSlider = document.getElementById('speed');
const speedValue = document.getElementById('speed-value');
const simulateBtn = document.getElementById('simulate-btn');
const massObject = document.getElementById('mass-object');
const springContainer = document.getElementById('spring-container');
// 更新显示的参数值
velocitySlider.addEventListener('input', () => {
velocityValue.textContent = velocitySlider.value;
});
massSlider.addEventListener('input', () => {
massValue.textContent = parseFloat(massSlider.value).toFixed(1);
});
stiffnessSlider.addEventListener('input', () => {
stiffnessValue.textContent = stiffnessSlider.value;
});
dampingSlider.addEventListener('input', () => {
dampingValue.textContent = dampingSlider.value;
});
positionSlider.addEventListener('input', () => {
positionValue.textContent = positionSlider.value;
});
speedSlider.addEventListener('input', () => {
speedValue.textContent = parseFloat(speedSlider.value).toFixed(1) + 'x';
// 如果模拟正在运行，实时时更新速度
if (simulation && simulation.isRunning) {
simulation.speedFactor = parseFloat(speedSlider.value);
}
});
// 初始化图表
const ctx = document.getElementById('spring-chart').getContext('2d');
let springChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: '位移',
data: [],
borderColor: '#3B82F6',
backgroundColor: 'rgba(59, 130, 246, 0.1)',
borderWidth: 2,
fill: true,
tension: 0.1,
pointRadius: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
title: {
display: true,
text: '时间 (ms)',
font: {
size: 10
}
},
ticks: {
font: {
size: 8
}
}
},
y: {
title: {
display: true,
text: '位移',
font: {
size: 10
}
},
min: -250,
max: 250,
ticks: {
font: {
size: 8
}
}
}
},
animation: false,
interaction: {
intersect: false,
mode: 'index'
},
plugins: {
legend: {
labels: {
font: {
size: 10
}
}
}
}
}
});
// 弹簧模拟类
class SpringSimulation {
constructor(params) {
// 物理参数
this.stiffness = params.stiffness; // 刚度
this.damping = params.damping; // 阻尼
this.mass = params.mass; // 质量
this.initialPosition = params.position; // 初始位置
this.initialVelocity = params.velocity; // 初始速度
this.speedFactor = params.speed || 1.0; // 动画速度因子
// 状态变量
this.position = params.position; // 当前位置
this.velocity = params.velocity; // 当前速度
this.time = 0; // 时间
this.history = []; // 历史数据
this.isRunning = false; // 模拟是否运行
this.animationFrameId = null; // 动画帧ID
this.lastTime = 0; // 上一帧时间
// 固定容器宽度（400px减去内边距和元素宽度）
this.containerWidth = 400 - 30 - 48; // 固定计算，不受窗口影响
this.centerX = this.containerWidth / 2; // 平衡位置
}
// 更新模拟状态
update(currentTime) {
if (!this.lastTime) this.lastTime = currentTime;
// 应用速度因子调整时间增量
const deltaTime = ((currentTime - this.lastTime) / 1000) * this.speedFactor;
this.lastTime = currentTime;
// 计算加速度: F = -kx - cv, a = F/m
const acceleration = (-this.stiffness * this.position - this.damping * this.velocity) / this.mass;
// 更新速度和位置
this.velocity += acceleration * deltaTime;
this.position += this.velocity * deltaTime;
// 记录时间和位置
this.time += (currentTime - (this.lastTime - (currentTime - this.lastTime))) / 1000 * 1000;
this.history.push({
time: this.time,
position: this.position
});
// 更新物体位置
const objectX = this.centerX + this.position;
massObject.style.transform = `translateX(${objectX}px)`;
// 检查是否应该停止模拟
if (Math.abs(this.velocity) < 0.1 && Math.abs(this.position) < 0.5) {
this.stop();
return false;
}
return true;
}
// 开始模拟
start() {
this.isRunning = true;
this.lastTime = 0;
this.history = [];
this.time = 0;
// 重置图表
springChart.data.labels = [];
springChart.data.datasets[0].data = [];
springChart.update();
// 初始位置
const initialX = this.centerX + this.initialPosition;
massObject.style.transform = `translateX(${initialX}px)`;
// 动画循环
const animate = (timestamp) => {
if (!this.isRunning) return;
const shouldContinue = this.update(timestamp);
// 更新图表
if (this.history.length % 2 === 0) {
springChart.data.labels.push(Math.round(this.time));
springChart.data.datasets[0].data.push(this.position);
// 限制图表数据点数量
if (springChart.data.labels.length > 100) {
springChart.data.labels.shift();
springChart.data.datasets[0].data.shift();
}
springChart.update();
}
if (shouldContinue) {
this.animationFrameId = requestAnimationFrame(animate);
}
};
this.animationFrameId = requestAnimationFrame(animate);
}
// 停止模拟
stop() {
this.isRunning = false;
if (this.animationFrameId) {
cancelAnimationFrame(this.animationFrameId);
}
}
}
// 模拟控制
let simulation = null;
simulateBtn.addEventListener('click', () => {
// 如果已有模拟在运行，先停止
if (simulation && simulation.isRunning) {
simulation.stop();
}
// 获取参数
const params = {
velocity: parseFloat(velocitySlider.value),
mass: parseFloat(massSlider.value),
stiffness: parseFloat(stiffnessSlider.value),
damping: parseFloat(dampingSlider.value),
position: parseFloat(positionSlider.value),
speed: parseFloat(speedSlider.value)
};
// 创建并启动新模拟
simulation = new SpringSimulation(params);
simulation.start();
// 更新按钮文本
simulateBtn.innerHTML = '<i class="fa fa-refresh mr-2"></i> 重新模拟';
});
// 初始位置设置
window.addEventListener('load', () => {
const containerWidth = 400 - 30 - 48; // 固定值
const centerX = containerWidth / 2;
const initialX = centerX + parseFloat(positionSlider.value);
massObject.style.transform = `translateX(${initialX}px)`;
});
// 移除窗口大小变化的影响
window.removeEventListener('resize', () => {});
</script>
</body>
</html>弹簧曲线curves.interpolatingSpring(10, 1, 228, 30)
python
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.patches as patches
# 设置中文显示
plt.rcParams["font.family"] = ["SimHei", "WenQuanYi Micro Hei", "Heiti TC"]
plt.rcParams["axes.unicode_minus"] = False # 正确显示负号
def calculate_spring_curve(mass, stiffness, damping, initial_velocity, duration=1.0, fps=100):
"""计算弹簧曲线的数值点"""
dt = 1.0 / fps
total_frames = int(duration * fps)
time_points = []
position_points = []
velocity_points = []
position = 0.0 # 初始位置在平衡位置
velocity = initial_velocity
for _ in range(total_frames):
time = len(time_points) * dt
# 计算力和加速度 (F = -kx - cv, a = F/m)
force = -stiffness * position - damping * velocity
acceleration = force / mass
# 更新速度和位置
velocity += acceleration * dt
position += velocity * dt
time_points.append(time)
position_points.append(position)
velocity_points.append(velocity)
return np.array(time_points), np.array(position_points), np.array(velocity_points)
# 计算ArkUI interpolatingSpring(10, 1, 228, 30)的曲线数据
mass = 10.0
stiffness = 1.0
damping = 228.0
initial_velocity = 16.0
time, position, velocity = calculate_spring_curve(
mass, stiffness, damping, initial_velocity, duration=1.0
)
# 创建图形
fig, ax = plt.subplots(figsize=(10, 6))
fig.suptitle('curves.interpolatingSpring(10, 1, 228, 30) 数值曲线', fontsize=16)
# 绘制位移曲线
ax.plot(time, position, 'b-', linewidth=2, label='位移')
ax.set_xlabel('时间 (秒)')
ax.set_ylabel('位移')
ax.grid(True, alpha=0.3)
ax.set_xlim(0, max(time))
ax.set_ylim(min(position)*1.1, max(position)*1.1)
# 标记关键 points
peak1_idx = np.argmax(position)
peak1_time = time[peak1_idx]
peak1_pos = position[peak1_idx]
trough1_idx = np.argmin(position)
trough1_time = time[trough1_idx]
trough1_pos = position[trough1_idx]
# 添加关键点标注
ax.plot(peak1_time, peak1_pos, 'ro', markersize=8)
ax.annotate(f'峰值: ({peak1_time:.2f}s, {peak1_pos:.2f})',
xy=(peak1_time, peak1_pos),
xytext=(peak1_time+0.05, peak1_pos+0.2),
arrowprops=dict(arrowstyle='->', color='red'))
ax.plot(trough1_time, trough1_pos, 'go', markersize=8)
ax.annotate(f'谷值: ({trough1_time:.2f}s, {trough1_pos:.2f})',
xy=(trough1_time, trough1_pos),
xytext=(trough1_time+0.05, trough1_pos-0.3),
arrowprops=dict(arrowstyle='->', color='green'))
# 添加参数说明
param_text = (f'参数: mass={mass}, stiffness={stiffness}\n'
f'damping={damping}, initialVelocity={initial_velocity}')
plt.figtext(0.15, 0.01, param_text, fontsize=10,
bbox=dict(facecolor='white', alpha=0.8, boxstyle='round,pad=0.5'))
# 添加图例
ax.legend()
plt.tight_layout(rect=[0, 0.05, 1, 0.95])
plt.show()