前言
网上看到一种图片播放的效果,类似玻璃片碎裂,于是深究下去,发现源头来自一个国外的示例,核心是用了一个开源的三角剖分算法的js库——delaunay.js。因为之前没接触过,因此从零开始好好学习了下,在此记录下学习心得。源码
概述
从我们动效应用层面的理解是,在一个平面内,产生有限的点集,根据算法,划分成若干个三角面,这些三角面的合集是散点集的凸包。具体详细的理论知识有兴趣的可以深究下去:三角剖分,Delaunay三角剖分算法,凸包。
网上看到一种图片播放的效果,类似玻璃片碎裂,于是深究下去,发现源头来自一个国外的示例,核心是用了一个开源的三角剖分算法的js库——delaunay.js。因为之前没接触过,因此从零开始好好学习了下,在此记录下学习心得。源码
从我们动效应用层面的理解是,在一个平面内,产生有限的点集,根据算法,划分成若干个三角面,这些三角面的合集是散点集的凸包。具体详细的理论知识有兴趣的可以深究下去:三角剖分,Delaunay三角剖分算法,凸包。
难度系数:简单
关键词:css print
处理前截图:
处理后截图:
第一次接到网页要提供打印,可能会有些不知所措,我这里只说下遇到表格、图像、列表项内容在尾部被断开的问题处理。
page-break-inside: avoid
,例如:1 | .vo-cnt-list{ |
需要了解更详细的,可以参考 web打印的几种方案 和打印样式设计 。
难度系数:简单
关键词:length outerHeight position
案例很简单,但是对于初学者可以延伸学习下jquery的相关知识点:
length
;在做动态创建目录的时候,选择的条目不在可视区域,如图:
默认情况滚动条都是在最上面的,导致超出可视区域的选择条目没有呈现在可视区域,因此要脚本处理下。代码很简单,如下:
1 | ul{ |
1 | function setSelectedInView(){ |
上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库。
jquery animate()+jquery.easing插件的使用:
1 | $(selector).animate(styles,speed,easing,callback) |
原生js使用:
张鑫旭同学的文章
什么是缓动函数?我的理解是动画参数与数学公式结合的函数。
各流行库缓动函数对比,以easeInQuad为例,如图:
Kute.js1
easingFn.easingQuadraticIn = function (t) { return t*t; };
基本数学公式是一样的,都是2次方;
缓动函数是独立的,与平台载体无关;
缓动函数反应的是动画进程与数值变化量的对应关系,具体分析如下:
GSAP Ease在线示例,动画进程每增加一格,数值变化量是增加量是越来越大的,效果就是由慢到快。
与定时器无关,具体演变代码分析如下:
左侧演示的是,由于算法二次方,进程每次等量增加1/5,但是变化量却越来越大;右侧演示的是,虽然定时器改变了(间隔减小一倍,由“滴答”执行五次改成十次),但是变化量的趋势是一样的,相同的进程增量,对应的变化量也是相同。
动画库做的事基本就是一下四点:1,定时器;2,各种属性变量处理的封装;3,过程控制;4,缓动函数。
实际运用中还是推荐大家用动画库,不满足业务需求的可以自己整合,当然学习的时候可以找个简单的读下源码,试着自己写下核心功能,深入理解动画库的本质,入门我推荐Kute.js。
jquery animate(插件jquery.easing.js)
Tween.js
GSAP
CreateJS
Kute.js
广义说:一切通过js改变的视觉呈现都叫动画;例如,按钮,链接等元素交互反馈。
狭义说:通过定时器连续调用js函数进行元素属性改变产生的视觉动画效果。
定时器是JavaScript动画的核心技术;
setTimeout(),setInterval()是大家熟知的,以前经常使用的;
一般都是做些辅助性,锦上添花的事;
细心的人可能会发现一个现象,从其他标签页切换到有循环动画页面会有卡顿和急速帧切换现象;
问题就在于他们的内在运行机制;
第一个参数推荐用函数形式,字符串形式会两次解析,还有eval一样的问题;
不止两个参数,可以更多,见示例1;
this指向问题,见示例2;
返回值是个整数;
clearTimeout(timer)取消定时器;
setInterval,clearInterval同上;
示例1:1
2
3setTimeout(function(a,b){
console.log(a+b);
},1000,1,1);
示例2:1
2
3
4
5
6
7
8
9var a = 0;
function foo(){
console.log(this.a);
};
var obj = {
a : 2,
foo:foo
}
setTimeout(obj.foo,100);
示例:
1 | setTimeout(function(){ |
原因:加入队列,阻塞执行。
setTimeout图例:
setInterval图例:
父子元素事件冒泡,需要先执行父元素,见示例3;
用户自定义的回调函数,通常在浏览器的默认动作之前触发,见示例4;
示例3:1
2
3
4
5
6
7
8
9
10
11<div id="myDiv" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
myDiv.onclick = function(){
setTimeout(function(){
alert(0);
})
}
document.onclick = function(){
alert(1);
}
</script>
示例4:
1 | <input type="text" id="myInput"> |
用法与setTimeout类似,只是不需要时间参数;
机制完全不同:
1, setTimeout是异步操作,加入任务队列( event loop ),当js引擎线程中同步代码执行完才会从任务队列中取出执行;
2,raf是用户代理(浏览器)专门针对动画开发的接口,用户代理会以合适的频率进行动画帧更新(一般同显示器刷新频率,1000/60ms),在隐藏或者非活动页面会停止帧更新,节省CPU资源;
3,raf示例
1 | window.requestAnimFrame = (function(){ |
前两篇介绍了入门相关知识及对keystonejs整体可用性评估,这篇介绍下开始实际运用中的页头页脚部分,因为马上项目忙了,这个先匆匆的作个收尾。
不管是用WordPress还是其他CMS系统,应用最宽泛的也是最基础的就是企业宣传类网站,我们就讲下keystonejs实现的头尾改造,效果如下图:
PC页头
PC页脚
移动页头
移动页脚
具体改造也很简单,首先找到H:\workspace\keystonejs-project\routes\middleware.js文件,然后增加navLinksCN
代码如下:
1 | exports.initLocals = function(req, res, next) { |
然后找到H:\workspace\keystonejs-project\templates\layouts\default.pug文件,复制一份,改名如main.pug,接下来就是具体的HTML+CSS部分了。
link(href="/styles/style.css", rel="stylesheet")
;添加header代码,如:
1 | //- HEADER |
添加footer部分代码,如:
1 | //- FOOTER |
1 | extends ../layouts/main |
好了,重启下应用看看效果吧。
备注:
pug模板引擎中文文档pug文档。