现今浏览器如此地强大，以至不同形式的网页形式缤纷而至，例如动画就是必不可少的一环。早期有全站 Flash 技术制成的，现今则是多种技术混合在内，包括 CSS3+Canvas + SVG，甚至利用 AE（Adobe After Effects）强大的滤镜所做的动画都可以搬到上来。关于 AE 技术的转换，笔者早期学习 Web 时就了解过，当时是 AE 转换为 Flash 动画的，体积比较大的说。
lottie.js
最近接触一个日本的网站 https://pogg-sweetpotatopie.com/， 动画效果很好，研究一下源码发现居然都是些新技术，典型如 Vue 负责制作组件，大量使用 CSS3，还有 SVG 矢量图的动画，不但如此，还有 lottie.js（http://airbnb.io/lottie/#/） 负责将 AE 文件导出 json 文件，然后使用 lottie.js 进行动画的控制。
相关 lottie.js 链接：
https://imweb.io/topic/5b23a745d4c96b9b1b4c4efc
https://segmentfault.com/a/1190000010935368
https://www.jianshu.com/p/c440eb16c685
http://ife.baidu.com/note/detail/id/602
https://www.jianshu.com/p/b207db1581a1
http://www.bootstrapmb.com/item/3006
https://www.jb51.net/jiaoben/625453.html
https://www.jb51.net/jiaoben/666463.html
https://wow.techbrood.com/fiddle/41062 （制作菜单）
新兴行业：交互动效
https://www.zhihu.com/topic/20031766/hot
http://www.ui.cn/detail/272279.html 所有的动效设计几乎都是这14个软件做出来的
https://www.jianshu.com/p/d55133bc6941 动效设计-交互设计的最后一公里
https://zhuanlan.zhihu.com/p/59794085 那些年被Lottie坑过的地方
GSAP
GSAP 全称是 GreenSock Animation Platform，是一个 JS 动画框架。https://greensock.com/get-started-js
GSAP有两个版本，一个为 ActionScript 版本，已经在 Flash 平台上运行多年，是一个“轻量级”、“高效率”、强大的2D动画引擎。学AS的人，没有一个说是不知道、没使用过 GSAP 的。
GSAP JS 顾名思义是指 GSAP 的 js 版本，GSAP JS 是 GreenSock 公司新出的一个 2D 动画引擎，可以说是 AS 版本的移植版，虽然功能还不够AS版本的完善，但是一样是非常强大、高效、好用的，据说它的运行速度是 jQuery 的20倍。
注意有效插件不是免费的！
并不是完全开源的，它的开源类似于国内的开源程序那样，有点儿像伪开源：在免费/收费的项目中使用是不用付费的，但是，对于多用户的项目，你就需要商业许可证了：每年150美刀或者永久性的费用750美刀，不便宜
使用 GSAP
TweenLite.js、TweenMax.js、TimelineLite.js和TimelineMax.js4个文件就是GSAP的一般引用库文件，不过，这几个文件还有一些重叠和包含的关系：
https://blog.csdn.net/weixin_39939012/article/details/80833073
- TweenLite：这是 GSAP 动画平台的核心部分，使用它可以用来实现大部分的动画效果，适合来实现一些元素的简单动画效果。
- TimelineLite：一个强大的、轻量级的序列工具，它就如一个存放补间动画的容器，可以很容易的整体控制补间动画，且精确管理补间动画彼此之间的时间关系。比如动画的各种状态，Pause，reverse，restart，speed up，slow down，seek time，add labels等。它适合来实现一些复杂的动画效果。
- TimelineMax：扩展 TimelineLite，提供完全相同的功能再加上有用的（但非必需）功能，如 repeat，repeatDelay，yoyo，currentLabel() 等。TimelineMax 的目标是成为最终的全功能工具，而不是轻量级的。
- TweenMax：可以完成 TimelineLite 做的每一件事，并附加非必要的功能，如 repeat，yoyo，repeatDelay(重复延迟)等。它也包括许多常见的插件，如 CSSPlugin，这样您就不需自行载入多个文件。侧重于全功能的，而不是轻量级的。
https://www.tweenmax.com.cn/（中文网）
http://www.topfe.cn/javascript/524.html
https://www.cnblogs.com/tujia/p/3217436.html
http://www.xgllseo.com/?cat=38
https://yq.aliyun.com/articles/682532
https://juejin.im/post/58d4f52544d9040068659edd
https://linshuizhaoying.gitbooks.io/gsap-/content/index.html （不错的文档）
https://techbrood.com/?q=gsap (资源库)
http://www.jq22.com/code1889
https://www.jb51.net/jiaoben/665608.html
https://www.jb51.net/jiaoben/672111.html
缓动原理
- 分享一个即插即用的私藏缓动动画JS小算法 https://www.zhangxinxu.com/wordpress/2017/01/share-a-animation-algorithm-js/
- https://github.com/aboodman/accelimation
- javascript动画对象支持加速、减速、缓入、缓出 http://www.cnblogs.com/rentj1/archive/2012/09/29/2708126.html
- 常见JS效果实现实现之图片减速度滚动 http://www.cnblogs.com/rentj1/archive/2011/12/06/2277878.html
- JavaScript菜单抖动 https://swordair.com/javascript-shake-menu-effect/
- web即时聊天有消息头像跳动 https://www.iteye.com/blog/czpae86-1474417
- HTML5 实现小车动画效果(Canvas/CSS3/JQuery) http://blog.csdn.net/yanghua_kobe/article/details/7226816
绘制
- 用CSS画圆 http://www.webhek.com/post/css-circles.html
- 用纯CSS实现的箭头 http://ourjs.com/detail/532bc9f36922aa7e1d000001
- “三角边”的那点事儿 https://www.cnblogs.com/hongru/archive/2010/11/07/1871264.html
组件
- jQuery实现幸运大转盘(php抽奖程序)抽奖程序 https://www.xttblog.com/?p=1864
- HTML5 Canvas圆盘抽奖应用DEMO演示 https://www.xttblog.com/?p=399
- jquery实现幸运大转盘抽奖程序代码,兼容多种浏览器 http://www.zuidaima.com/share/1779633798073344.htm
- 刮刮卡效果http://runjs.cn/detail/m6wzaqqi
- 摇一摇 https://github.com/w3cmark/demo/tree/master/shake
文件上传
- 用XHR2实现大文件的切割上传（分块上传）http://blog.sina.com.cn/s/blog_66b005600101dex8.html
- HTML5按比例缩略图片并上传的实例 http://blog.csdn.net/fdipzone/article/details/63687437
- resumable.js https://github.com/23/resumable.js
- 用HTML5的websocket技术实现的文件上传，支持断点续传 https://github.com/CCLooMi/FileUploadServer_2
Table
- js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）http://www.iteye.com/topic/376563
- guananddu/sTable: 一个简易的Table组件-支持子表、单元格合并、链式调用、事件代理、简易排序等功能 https://github.com/guananddu/sTable
- sTable - 一个支持子表、单元格合并、链式调用、事件代理功能的Mini表格组件 http://www.cnblogs.com/catprayer/archive/2012/12/21/2827792.html
- Web Responsive Table, 只需CSS使table在手机和平板中完美显示 http://blog.csdn.net/jennieji/article/details/22890597
HTML5模版私藏库
- http://html5up.net/ 一个非常棒的国外HTML5模版网站，Sunface倾情推荐！
- http://sc.chinaz.com/tag_moban/HTML5.html 这个网站虽然存量很多，但是质量层次不齐，可供参考
- http://html5test.com/ 还在担心浏览器对HTML5的支持情况吗？这个网站可以帮你，还能获取具体某个语法的浏览器支持情况哦
