使用Glorious javascript库制作动画

Question

我一直在尝试使用图书馆为我的学生做教材。

我想制作动画，但是我无法理解如何使用库或在哪里使用库。我认为有必要从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项目，除非您确实要显示此lib中的特定内容，否则我也建议在React中使用像Materials（https://material.io/components）这样的框架。

Answer 2

如果您是网络技术的新手，这里的曲线非常陡峭。就个人而言，我会退后一步并熟悉这些工具。如果有时间，请检查W3school的站点。有很多信息可以帮助您快速使用HTML / CSS / JS。特别关注CSS selectors和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库制作动画

问题描述投票：-1回答：2

2个回答

最新问题

使用Glorious javascript库制作动画

问题描述 投票：-1回答：2

2个回答

最新问题

问题描述投票：-1回答：2