使用 Glorious JavaScript 库制作动画

Question

我一直在尝试使用图书馆为我的学生制作 material。

我想制作动画，但我不知道如何使用或在哪里使用库。我认为有必要从 html 文件中使用它。安装库，但在打开页面时，它只会创建我作为测试放置的文本。

我正在使用 WebStorm IDE，创建一个 node.js 项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="node_modules/@glorious/demo/dist/gdemo.min.css">
    <script src="node_modules/@glorious/demo/dist/gdemo.min.js"></script>
</head>
<body>

</body>
</html>

有人可以指导我使用什么程序或如何使用图书馆。第一次尝试用JavaScript.

做动画

Answer 1

能否请您详细说明一下问题。从您的示例中，您刚刚创建了一个空页面。你想在你的页面上放什么？表？

另外，如果您是从头开始一个 Js 项目，我建议您在 React 中使用像 Materials (https://material.io/components) 这样的框架，除非您在这个库中有一些您确实想要显示的特定内容。

Answer 2

如果您是 Web 技术的新手，这里有一个非常陡峭的曲线。就个人而言，我会退后一步并熟悉这些工具。如果您有时间，请查看 W3school's site. There is plenty of information to get you moving quickly with HTML/CSS/JS. Specifically focus on CSS selectors and Javascript，这会更有意义。

现在回答您提出的问题：

首先，NodeJS 不一定是实现您的目标所必需的。您可以创建一个简单的 HTML 文件并直接从 Web 引用 Glorious 库。看看我在下面的 <script> 和 <link> 元素中做了什么。

加载库后，您需要：

实例化库并将其分配给变量以供将来使用（参见const demo = new GDemo(...)）
告诉库您希望它在 HTML 中的哪个位置呈现动画。在这种情况下，它是 <div/> 和 id='container'。
告诉图书馆要渲染什么。这是 gDemo.openApp(...) 部分。我直接从该库的 GitHub 页面中提取了这个示例。

const gdemo = new GDemo('#container');

const code = 'console.log("Hello World!");'


gdemo
  .openApp('editor', {
    minHeight: '400px',
    windowTitle: 'demo.js'
  })
  .write(code, {
    onCompleteDelay: 2000
  })
  .openApp('terminal', {
    minHeight: '400px',
    promptString: '$'
  })
  .command('node ./demo')
  .respond('Hello World!')
  .command('')
  .end();

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdn.jsdelivr.net/npm/@glorious/demo/dist/gdemo.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/@glorious/demo/dist/gdemo.min.css" rel="stylesheet" />
</head>

<body>
  <div id="container"></div>
</body>

</html>

使用 Glorious JavaScript 库制作动画

Make an animation with the Glorious JavaScript library

javascript

animation

webstorm