高级网页动画制作

现今浏览器如此地强大,以至不同形式的网页形式缤纷而至,例如动画就是必不可少的一环。早期有全站 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的支持情况吗?这个网站可以帮你,还能获取具体某个语法的浏览器支持情况哦
展开阅读全文
©️2020 CSDN 皮肤主题: 岁月 设计师: pinMode 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值