方程图形的动画javascript
我被这个问题困住了，不知道该把手伸向何处。我必须用javascript绘制公式y=x^3的图形动画
我什么意思？
知道了y（例如y=10)，我想让图从（0；0）开始直到（x；10)，遵循等式y=x^3。我还想创建一个按钮，可以在动画过程中单击，并告诉我在那个精确的时刻y是图
现在，多亏了Chart.js，我设法做到了这一点：
JS
var ctx = document.getElementById("myChart");
var data = {
labels: [1, 2, 3, 4, 5],
datasets: [
{
function: function(x) { return x*x*x },
borderColor: "rgba(153, 102, 255, 1)",
data: [],
fill: true
}]
};
Chart.pluginService.register({
beforeInit: function(chart) {
var data = chart.config.data;
for (var i = 0; i < data.datasets.length; i++) {
for (var j = 0; j < data.labels.length; j++) {
var fct = data.datasets[i].function,
x = data.labels[j],
y = fct(x);
data.datasets[i].data.push(y);
}
}
}
});
var myBarChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
HTML
<canvas id="myChart"></canvas>
结果
现在我只有图形，没有动画，我不能选择最大y
我该怎么办？
共有1个答案
若要设置y轴上的最大数量，可以使用max属性，或者suggestedmax（如果要确保数据变大，则轴会自适应）。对于动画，您可以编写自定义逻辑，如下面的示例所示。我只是不知道如何在点击时得到它的值：
null
const labels = [1, 2, 3, 4, 5]
const totalDuration = 5000;
const delayBetweenPoints = totalDuration / labels.length;
const previousY = (ctx) => ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;
var options = {
type: 'line',
data: {
labels,
datasets: [{
label: '# of Votes',
data: [],
borderWidth: 1,
function: function(x) {
return x * x * x
},
borderColor: 'red',
backgroundColor: 'red'
}]
},
options: {
scales: {
y: {
max: 250
}
},
animation: {
x: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: NaN, // the point is initially skipped
delay(ctx) {
if (ctx.type !== 'data' || ctx.xStarted) {
return 0;
}
ctx.xStarted = true;
return ctx.index * delayBetweenPoints;
}
},
y: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: previousY,
delay(ctx) {
if (ctx.type !== 'data' || ctx.yStarted) {
return 0;
}
ctx.yStarted = true;
return ctx.index * delayBetweenPoints;
}
}
}
},
plugins: [{
id: 'data',
beforeInit: function(chart) {
var data = chart.config.data;
for (var i = 0; i < data.datasets.length; i++) {
for (var j = 0; j < data.labels.length; j++) {
var fct = data.datasets[i].function,
x = data.labels[j],
y = fct(x);
data.datasets[i].data.push(y);
}
}
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var chart = new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.1/chart.js" integrity="sha512-HJ+fjW1Hyzl79N1FHXTVgXGost+3N5d1i3rr6URACJItm5CjhEVy2UWlNNmFPHgX94k1RMrGACdmGgVi0vptrw==" crossorigin="anonymous"></script>
</body>-
在paint method中，只绘制那些图形，这是paint method的一部分，因为我想在paint method之外绘制形状。这个代码划清了界限，但它立即消失了，我不明白为什么会发生这种情况。请帮忙
-
骨骼动画和变形动画是非常常见的动画形式，对于Threejs三维引擎来说自然要支持。一般开发过程中都是加载3D美术绘制好的骨骼动画模型或者变形动画模型，不过为了大家更深入的理解这两种动画模型，课程12.1和12.3节用纯Threejs代码实现相应的动画模型创建，虽然怎增加了学习的难度，但是非常有助于从底层理解这两种动画模型。 这两种动画模型也是在上一章讲到的帧动画基础之上实现，学习本章之前最好先学习
-
到目前为止，我在codepen https://codepen.io/phfilly/pen/gxbmmo?editors=1100上有这个信息 从我的发现和研究来看，这似乎只能通过使用剪辑路径来实现，或者有更简单的方法吗？如果是这样的话，我不确定使用什么属性作为clipPath。 任何帮助或指导将非常感谢。
-
关于变形动画，你可以理解为多组顶点数据，从一个状态变化到另一个状态，比如人的面部表情，哭的表情用一系列的顶点表示，笑的表情用一系列的顶点表示，从哭的表情过渡到笑的表情，就是表情对应的两组顶点之间的过渡，几何体的顶点的位置坐标发生变化，从一个状态过渡到另一个状态自然就产生了变形动画。 一般项目开发，变形动画和骨骼动画一样，由3D美术编辑好变形动画的模型数据，然后程序员通过Threejs相关的API解
-
下面的函数几乎可以用来画所有的控件，这些函数画图非常精确，也非常快。他们可以在任何支持FLTK的平台上使用。 void fl_point(int x,int y) //画点函数 void fl_rectf(int x,int y,int w,int h) //画一个矩形并填充内部 void fl_rectf(int x,int y,int w,int h,uchar r,uchar g,uchar
-
当前为 5.4 版本，稍后将升级到 5.5。在 5.5 中，本节内容被拆分成了多个小节。 使用动画视图 在 Unity 中，动画视图用于预览和编辑游戏对象的动画剪辑。动画视图可以通过菜单 Window -> Animation 打开。 查看游戏对象上的动画 动画视图和层级视图、场景视图以及检视视图紧密耦合。类似于检视视图，动画视图将显示当前选中对象的动画的时间轴和关键帧。你也可以在层级视图或场景视