前言
重读《JavaScript高级程序设计》,温故而知新。
概述
引用类型:重点掌握数组,正则,字符串的相关使用。
在仅可输入英文字符的输入框内填写中文或其他语言的字符时,会给出报错。如果用户在复制进大段文字中夹杂了少许中文标点符,那么很难排查。因此,需要在原有校验基础上进行交互改进:失焦后标点符号自动转换,还有不能转换的给出提示框,同意则自动删除非法字符,取消则关闭提示框,用户手动修改。
这是结合jquery 的 validate 表单验证插件及已有的 UI 组件进行的表单输入框交互改进方案。因此,如果不是 validate 框架则要重写 js 方法,如果是自定义的提示框结构样式,则需要添加相应的钩子:.J-x2en-contianer/.J-x2en-feedback/.J-m-tip/.J-show-btn/.J-confirm-btn/.J-cancel-btn
。
接着上一篇三角碎片动效(四)——生成动画,这篇讲下具体应用示例:焦点图轮播。源码
关于焦点图轮播,大家是最常见到的,也是有大量资源的,例如网页端使用广泛的swiper。本篇也是实现这样的图片切换,只不过过渡动画是用三角剖分实现的三角碎片动画。
接着上一篇三角碎片动效(三)——get fragments,这篇讲下生成碎片fragments后,怎样生成动画。源码
关于动画,我之前也有介绍过JS动画(一)——定时器详解,其实现在各种场景都在或多或少的使用,入场动画动画一般会直接用css3,有一定逻辑的系列动画一般会用jquery animate或者一些流行的js动画库,例如非常流行强大的GSAP动画平台,或者Adobe家族的createJS,还有其他一些轻量的针对特定场景的,如svg,canvas,webgl的动画框架。这篇只作整个流程,动画部分与其他部分衔接介绍,因为对于动画部分也是相对独立的模块,不过是选用一种技术,实现大量dom的过渡动画。
接着上一篇三角碎片动效(二)——get vertices,这篇讲下两个核心之一生成碎片集(getFragments)。源码
有了端点集vertices就可以调用delaunay.js的方法生成三角点集triangles,正如第一篇里讲到的,这个值是一个需要绘制三角的端点索引集,每三个值对应vertices中的三个端点,然后就是运用canvas知识生成图片碎片集fragments。
接着上一篇三角碎片动效(一)——认识delaunay.js,这篇讲下两个核心之一生成端点集(getVertices)。源码
生成端点集的算法有很多种,我这里是参考网上整理的一种。这个功能块很重要,下一步的三角剖分就是根据这个值来的,这个端点集直接影响的就是整张图的分割效果(数量,大小,边界等)。