用SVG替代FLASH的三大要素-遮罩、路径动画、形变
作者:admin 日期:2016-06-13演示文件：http://blog.258754.cn/2016/svg/test_svg2.html
注意看运动轨迹与“老鹰”的交汇处的表现。
演示文件2：http://blog.258754.cn/2016/svg/test_svg3.html
主要看形变动画。
我的目标就是用Svg来替代以前的FLASH，那么遮罩、矢量路径动画、形变动画这几大要素，是不可缺的。在这个演示中，可以看到前两者的解决方法。
1、遮罩就用SVG自带的clipPath标签解决。（半透明遮罩没找到办法）
2、矢量路径动画相当于FLASH的引导线动画，我用了GSAP的pathDataToBezier插件将线条变为路径 ，然后用tweenMax来实现bezier路径运动。
3、至于形变动画，用了GSAP的morphSVG，见演示2的那个音乐线条的变化 。
至此，几个FLASH的重点功能，都已经由SVG完美实现。
纯CSS实现的菱形（斜方块）列表
作者:admin 日期:2016-04-07gulp-changed插件实现文件拷贝--只拷贝变动过的文件
作者:admin 日期:2016-04-07近日工作需要，每天要将一个目录下编辑过的html文件，拷贝到另一个路径下。用win自带的拷贝功能，太麻烦了，而且每次要去清点哪些文件变动了-----不如搞个小程序，自动实现。
gulp就是实现这一功能的利器，它的安装过程网上很多，就不再赘述。
- var gulp = require('gulp');
- // 依赖gulp-changed插件
- var changed = require('gulp-changed');
- // 起始目录和目标目录，据说只支持相对路径，不过也够用了
- var SRC = '*.html';
- var DEST = 'dist';
- gulp.task('t', function () {
- return gulp.src(SRC)
- .pipe(changed(DEST))
- .pipe(gulp.dest(DEST));
- });
用Rxjs改写的的ajax函数--返回promise对象
作者:admin 日期:2016-03-16代码如下：
- function aj(url , type="GET" , data="json"){
- var final = Rx.Observable.fromPromise(
- $.ajax({
- type: type,
- url: url,
- dataType: data
- })
- .promise()
- );
- return final;
- }
- var aaa = aj("shopData/test.json");//把ajax结果赋给aaa,并做下一步处理
这段代码使用了rx.js及jquery3的库，目前为止，似乎还只有jquery支持在ajax返回promise对象，我到mui论坛提了问，答复mui.ajax暂不支持promise对象。可见promise对象还未普遍使用。
实践了手机淘宝团队推荐的淘宝的lib-flexible方法
作者:admin 日期:2016-03-11用到和准备学习的一些新工具
作者:admin 日期:2016-02-20- - 装一个json序列化插件--https://chrome.google.com/webstore/category/apps?hl=zh-cn
- - 总监推荐使用的github管理工具：sourceTree，官网可直接安装中文版，接下来学习使用
- - 总监推荐使用的leanCloud，可用于生成后端API接口数据，已经注册帐号，准备试用
- - 2016年刚推出的微信开发者工具---已经安装，但发现做CSS调试真机时，还是手续比较麻烦，因此对于普通的调试，还是用.css?id=***的老方法，只有一些实在需要精确调试，一定要看到CSS代码对应效果的地方，再使用这个。http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html
实测证明无用--网上流传的微信浏览器取消缓存的方法
作者:admin 日期:2016-02-15ajax多信号逻辑的promise写法实现
作者:admin 日期:2016-02-11ajax的这种多信号量情况经常遇上。比如：先从服务器得到一个信号变量A，如果A为真，再从服务器获取信号B,B为真，再......如果用传统的回调方式写，Ajax就是一大堆的callback堆叠，看得头疼，而且不好一层层用函数分开。
解决这个问题，用到jQuery的deferred对象（参见阮一峰原文）：$.ajax()操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是XHR对象，你没法进行链式操作；如果高于1.5.0版本，返回的是deferred对象，可以进行链式操作。
我写了个简化后的例子：
- $.ajax("/api-a")
- .done(function(data){
- console.log("第1步完成");
- // 如果第1步数据中的result允许,则第2步
- if(data.result){fun2(); }
- })
- .fail(function(){ console.log("第1步失败") });
- //第2步操作可以放到一个函数中，这样看起来代码更清晰
- function fun2() {
- $.ajax("/api-b" )
- .done(function(data){
- console.log("第2步完成");
- console.log(data);
- })
- .fail(function(){ console.log("第2步失败") });
- }
疑问已解决：vue.js在采用ajax方式读入数据后，无法激活slide插件的滑动行为已经解决
作者:admin 日期:2016-01-22在vue.js的git上面提交的issue:
- 以下是无法激活滑动的主要代码：
- <div id="slider" class="mui-slider" >
- <div class="mui-slider-group">
- <div class="mui-slider-item" v-for="el in list"><img :src="el.picUrl"> </div>
- </div>
- </div>
- <script>
- var vm = new Vue({
- el: '#slider',
- data: {list: [] }
- });
- // 读取图片slide
- mui.ajax({ url: "shopData/slidePic.json", dataType: "json",
- success: function(data){
- vm.list = data.list;
- mui("#slider").slider({
- interval: 3000
- });
- }
- });
- </script>
- ----------------------------------------------
- 以下是可以成功激活的代码：
- mui.ajax({ url: "shopData/slidePic.json", dataType: "json",
- success: function(data){
- for (var i = 0; i < data.list.length; i++) {
- $(".mui-slider-group").append(
- '<div class="mui-slider-item" ><img src="'+ data.list[i].picUrl + '"> </div>'
- );
- }
- mui("#slider").slider({
- interval: 3000
- });
- }
- });
- vm_slide.$nextTick(function () {
- // DOM 现在更新了
- mui("#slider").slider({
- interval: 3000
- });
- })
chrome调试器查找外部模块文件中的函数定义的方法
作者:admin 日期:2015-12-20我当前面临的问题是，当一个页面，引用了几十个外部的插件库时，有时候仅凭插件名称，并不知道页面中的一个函数调用，是引用的哪一个库文件。因此要借助一些调试手段，chrome调试器有如下一些手段：
- 在调试器的network面板中，能看到本页面内所有的js外部引用，但仅为“引用”，这些js不一定被实际调用了。
- 如果是查找一个dom对象的行为，比如click，可以直接在event listeners中查到js调用。
-
注意这里有两个重要选项：
.png)
Events Listeners的具体使用：ancestors（祖先元素）这个选项，是列出所有上级元素的事件，可以用来区别，是本身触发，还是父级元素触发framework listeners(框架事件），是选择，是否列出调用的js框架，如果未选中，会显示jquery.js为最终框架（一般我们不需要显示这个）
- 最复杂的情况，如果与行为无关，本页中只有一个函数钩子（比如查找上图中的aaa()定义部分 ），咱们需要查找“在其它模块的函数定义”时，则需要一步步的摸着石头过河：
- 当知道函数调用关系，可以设置断点时，使用f8为直接运行下一个断点。f10为从下一个断点处单步运行。
- 当不知道调用关系，只能步进调试---找到函数入口，然后用f11单步运行，shift+f11为越过当前函数（当前函数仍会执行）；
idangerous.swiper.js相关的学习笔记
作者:admin 日期:2015-12-13网站中使用中文个性字库字体--@font-face解决方案探索
作者:admin 日期:2015-11-03最近的项目有用到特别中文字体，最终效果如下图：
HTML中实现逐帧动画的思路-用tweenMax
作者:admin 日期:2015-06-19逐帧动画在FLASH中是很好实现的。但在HTML世界中，并没有一个很正统的方法。前两天看scrollmagic的示例文件，意外发现他用tweenMax实现的一个逐帧动画，把代码提炼出来做了以下这个DEMO：
http://blog.258754.cn/2015/test_frame/
知道了这个思路，那么就可以用其它的方法，比如setinterval等函数来实现了。
用timelineMax之类的强大工具，更可以实现各种播放控制，比如正反放、快进等。还可以用来做那种“拖动控制轴来转动物体”等控制动画。
---总之，只要能实现“时间线与图像”的结合，接下来如何控制时间线，就是tween类框架的强项了。
谢谢谢佳浩同学用css的方式实现了这个效果，使逐帧的方式更加丰富，主要代码如下。
点评：js优势是可以自由控制时间线，比如各种播放控制、事件响应等。css方式优点是渲染快，简便，css定义方便。
- .box{ width: 286px; height:222px; margin: 100px auto 0 ; animation: demo 1s infinite;}
- @keyframes demo{
- 0%{ background: url(img/1.png) center center no-repeat;}
- 20%{ background: url(img/2.png) center center no-repeat;}
- 40%{ background: url(img/3.png) center center no-repeat;}
- 60%{ background: url(img/4.png) center center no-repeat;}
- 80%{ background: url(img/5.png) center center no-repeat;}
- 100%{ background: url(img/6.png) center center no-repeat;}
- }
