init

4 years ago · 6587ea8751
12 changed files with 206 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+node_modules
+deploy.js
--- a/_coverpage.md
+++ b/_coverpage.md
@ -0,0 +1,8 @@
+# [GSAP🔗](https://greensock.com/)
+
+GSPA是一个老牌的，十分全面的动画引擎，感觉学会了之后可以只用这个制作所有类型的动画。  
+当然，canvas除外，它也声称是现代web动画的标准，现在让我们开始阅读怎么使用它吧，加油。  
+上帝与你同在！
+
+
+[开始阅读](/zh-cn/)
--- a/_navbar.md
+++ b/_navbar.md
@ -0,0 +1,3 @@
+<!-- - 多语言翻译
+  - [:cn: 中文](/zh-cn/)
+  - [:uk: English](/en-us/) -->
--- a/book.code-workspace
+++ b/book.code-workspace
@ -0,0 +1,19 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"files.exclude": {
+			"**/.git": true,
+			"**/.svn": true,
+			"**/.hg": true,
+			"**/CVS": true,
+			"**/.DS_Store": true,
+			"**/.meta": true,
+			"*.code-workspace": true
+		},
+		"explorerExclude.backup": null
+	}
+}
--- a/en-us/README.md
+++ b/en-us/README.md
@ -0,0 +1 @@
+There is no english doc.
--- a/en-us/_coverpage.md
+++ b/en-us/_coverpage.md
@ -0,0 +1 @@
+There is no english doc.
--- a/en-us/_navbar.md
+++ b/en-us/_navbar.md
@ -0,0 +1,3 @@
+- 多语言翻译
+  - [:cn: 中文](/zh-cn/)
+  - [:uk: English](/en-us/)
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>GSAP使用教程与案例</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="description" content="Description" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" />
+    <style>
+      :root {
+        --docsifytabs-border-color: #ededed;
+        --docsifytabs-tab-highlight-color: purple;
+      }
+      #gitalk-container {
+        padding-bottom: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">文档加载中</div>
+    <script>
+      var lang = location.hash.match(/#\/(en-us|zh-cn)\//);
+
+      if (lang) {
+        document.documentElement.setAttribute("lang", lang[1]);
+      }
+      window.$docsify = {
+        onlyCover: true, // 只在访问主页时加载封面。
+        search: {
+          // pathNamespaces: ['/en-us', '/zh-cn'],
+          noData: {
+            "/en-us/": "No results!",
+            "/zh-cn/": "没有结果!",
+            "/": "No results!",
+          },
+          paths: "auto",
+          placeholder: {
+            "/en-us/": "Search",
+            "/zh-cn/": "搜索",
+            "/": "Search",
+          },
+          depth: 3,
+          pathNamespaces: /^(\/(en-us|zh-cn))/,
+        },
+        name: "CSS揭秘",
+        coverpage: ["/", "/en-us/"],
+        executeScript: true,
+        loadSidebar: true,
+        loadNavbar: true,
+        alias: {
+          "/.*/_navbar.md": "/_navbar.md",
+          "/zh-cn/": "/zh-cn/首页.md",
+          "/en-us/(.*)/_sidebar.md": "/en-us/_sidebar.md",
+          "/en-us/(.*)/_navbar.md": "/en-us/_navbar.md",
+          "/zh-cn/(.*)/_sidebar.md": "/zh-cn/_sidebar.md",
+          "/zh-cn/(.*)/_navbar.md": "/zh-cn/_navbar.md",
+        },
+        maxLevel: 4,
+        subMaxLevel: 3,
+        auto2top: true,
+        themeColor: "#3F51B5",
+        mergeNavbar: true,
+        formatUpdated: "{MM}/{DD} {HH}:{mm}",
+        repo: "https://github.com/1549469775/for-docsify",
+        count: {
+          countable: true,
+          fontsize: "0.9em",
+          color: "rgb(90,90,90)",
+          language: "chinese",
+        },
+        plantuml: {
+          skin: "default",
+        },
+        tabs: {
+          persist: true, // default
+          sync: true, // default
+          theme: "classic", // default
+          tabComments: true, // default
+          tabHeadings: true, // default
+        },
+        pagination: {
+          previousText: "上一章节",
+          nextText: "下一章节",
+          crossChapter: true,
+          crossChapterText: true,
+        },
+        run: {
+          height: "600px",
+          themeColor: "green",
+          themeBorderColor: "#eee",
+          reverse: true,
+          jsLabs: [],
+          cssLabs: [],
+        },
+      };
+    </script>
+    <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
+    <script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
+    <script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
+    <script src="//unpkg.com/docsify-count/dist/countable.js"></script>
+    <!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/gitalk.min.js"></script> -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script> -->
+    <script src="//unpkg.com/docsify-plantuml/dist/docsify-plantuml.min.js"></script>
+    <!-- <script>
+      const gitalk = new Gitalk({
+        clientID: "ad87ab98d2c168181c8c",
+        clientSecret: "020dd52393b6d06b50b6b08d7996a8aeeecd6f8c",
+        repo: "CommentData",
+        owner: "npmrun",
+        admin: ["npmrun"],
+        body: location.href.split("?")[0],
+        // facebook-like distraction free mode
+        distractionFreeMode: false,
+      });
+    </script> -->
+  </body>
+</html>
--- a/zh-cn/_sidebar.md
+++ b/zh-cn/_sidebar.md
@ -0,0 +1,4 @@
+* [首页](/zh-cn/)
+* [几种常用方法](/zh-cn/几种常用方法)
+  <!-- * [半透明边框](/zh-cn/docs/border/border-alpha) -->
+  <!-- * [多重边框](/zh-cn/docs/border/border-many) -->
--- a/zh-cn/几种常用方法.md
+++ b/zh-cn/几种常用方法.md
@ -0,0 +1,31 @@
+### `gsap.to`
+
+#### 使用示例
+```
+gsap.to(".box.red", { x: 200, duration: 2 });
+```
+
+#### 参数
+
+|参数|描述|
+|---|---|
+|`targets`|css选择器，用于指定是哪个元素，可以是元素列表|
+|`vars`|包含要为您想要动画的所有属性/值的对象,以及任何特殊属性，如ease, duration, delay，或onComplete(下面列出)。|
+
+#### 可以指定的参数
+将这些添加到`vars`对象中，以赋予动画特殊的能力
+
+|参数|描述|
+|---|---|
+|`callbackScope`|用于所有回调(onStart, onUpdate, onComplete等)的范围。|
+|`data`|将任意数据赋给这个属性(一个字符串，一个对象的引用，等等)，它就会被附加到补间实例本身，这样你以后就可以像yourTween.data那样引用它。|
+|`delay`|动画开始前的延迟量(单位:秒)。|
+|`duration`|动画的持续时间(秒)。默认值:0.5。|
+|`ease`|控制在动画期间的变化速率，给它一个特定的感觉。例如，“elastic”或“strong.inOut”。请参阅[Ease Visualizer](https://greensock.com/docs/v3/Eases)以获得所有选项的列表。ease可以是String(最常见)或接受0到1之间的进度值并返回转换后的类似规范化值的函数。默认值:“power1.out”。|
+|`id`|允许你(可选)分配一个唯一的标识符给你的补间实例，这样你以后可以用gsap.getById()找到它，它将显示在GSDevTools的id。|
+|`immediateRender`|通常，补间会等待第一次呈现，直到下一个滴答(更新周期)，除非你指定了一个延迟。设置immediateRender: true强制它在实例化时立即呈现。默认值:false for to() tweens, true for from()和fromTo() tweens或任何应用scrollTrigger的东西。|
+|`inherit`|通常补间会继承父时间轴的默认对象(如果定义了默认对象)，但是你可以通过设置inherit: false来禁用它。|
+|`lazy`|当TWEEN渲染第一次并读取其起始值时，GSAP将尝试延迟值，直到当前的“勾选”的最终可以提高性能，因为它避免了读/写/读/写布局抖动 浏览器不喜欢。 要为特定的Tween禁用懒惰渲染，请设置懒惰：假。 在大多数情况下，没有必要设置懒惰。 要了解更多信息，请观看此视频。 默认值：true（零持续时间修补除外）。|
+|`onComplete`|当动画完成时要调用的函数。|
+
+
--- a/zh-cn/首页.md
+++ b/zh-cn/首页.md
@ -0,0 +1,8 @@
+### 资源
+
+* [🚓CDN](https://www.bootcdn.cn/gsap/)
+
+### CodePen示例
+
+* [几种最常用的方法创建盒子移动动画](https://codepen.io/dash9527/pen/YzVWpVx)  
+  使用几种最常用的方法执行盒子偏移动画