预览模式: 普通 | 列表

GSAP官网上的示例动画集，经过学习，我也能制作了

作者:admin  日期:2016-06-16

以下 GSAP官网上的示例动画集，经过学习，我也能制作这些SVG的遮罩、形变、路径类的动画，以设计师的创作提供更大的想象空间。

MorphSVGPlugin Examples

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6311

用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完美实现。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5683

弄了个百度脑图，长沙这边公司一般招聘前端可以参考

作者:admin  日期:2016-06-12

未特别标记的，是基础要求，打了红色标记的是加分项。

 http://naotu.baidu.com/file/f1b1b650accd2fe18959f96fbb59ce80

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4445

greesnsock--GSAP以及AS3版本的所有收费插件--有偿分享

作者:admin  日期:2016-05-15

 我刚花646元人民币（99美元）购买了一个greesnsock（绿袜子） ShockinglyGreen帐号，得到MorphSVGPlugin等收费SVG插件包。------别找了，网上没有免费的。GSAP（HTML)以及AS3版本的所有收费插件，均包含在内。

 
很方便制作：矢量路径动画（沿复杂曲线开动的火车）、矢量变形动画（猫头 秒变 狗头）、旗帜飘扬、复杂的飞字等，
详细演示地址：http://greensock.com/club/（可能要翻墙）
 
以上动画都是完全基于HTML/svg/tweenmax，效果流畅，类似FLASH。
我是greensock（GSAP/TweenMax/TweenLite）的资深用户，也是天地会的老会员，目前GS平台产品的中文资料，很多都是来自我的推荐和翻译（天地会、本人博客blog.258754.cn）。
 
有需要分享的朋友，我开价200元人民币每套。技术方面问题，欢迎咨询本人。本人QQ 258754，接受QQ或邮件咨询。
 
分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5744

参加W3CTECH长沙技术交流会

作者:admin  日期:2016-04-16

交流会到会人数不是很多，个人介绍时，感觉大家讲得太简略（内向？谦虚？），除了多数参加工作的，到会还有三个商学院的没毕业的学生妹子。

德龙和志刚两位老师主讲，前者讲了一下node.js在前端的应用，后者描述芒果TV前端团队的一些架构和工具情况。总体感觉还是高冷，毕竟一般中小团队还没那么完整的建制和积累。中间请“没用过node”的同学举一下手，哗啦啦举起一大片。我自己也只用过node的极少数功能，比如建个本地袖珍服务器，以及使用gulp和compass的一些小流程工具，但好歹也算用过，厚着脸皮没举手，装有识之士。
从头到尾，除了三位老师在台前发言，听者中有三四个人（包括我）问了一些问题，但怎么也谈不上气氛热烈。我觉得懂多懂少，好歹也算是来了一趟，至少也混个脸熟不。但多数说是“来学习”的朋友，最终都没有问问题，也没有分享困惑。
其实我本人，倒是更关注小团队的架构，希望更多听到前端应用中，一些刀刀见血的问题。比如我终于在现场获知，如何用chrome进行跨域数据测试-----就这么一句设置，就值得这一下午的时间支出。
分类:培训与招聘 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 40384

纯CSS实现的菱形（斜方块）列表

作者:admin  日期:2016-04-07

DEMO地址：http://blog.258754.cn/2016/grid/

完全CSS3实现， 理所当然的用到了transform: rotate效果，但是真没有那么简单。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5151

gulp-changed插件实现文件拷贝--只拷贝变动过的文件

作者:admin  日期:2016-04-07

 近日工作需要，每天要将一个目录下编辑过的html文件，拷贝到另一个路径下。用win自带的拷贝功能，太麻烦了，而且每次要去清点哪些文件变动了-----不如搞个小程序，自动实现。

gulp就是实现这一功能的利器，它的安装过程网上很多，就不再赘述。

gulpfile.js工作代码如下：
 
Javascript代码
  1. var gulp = require('gulp');  
  2.   
  3. // 依赖gulp-changed插件  
  4. var changed = require('gulp-changed');  
  5.   
  6. // 起始目录和目标目录，据说只支持相对路径，不过也够用了 
  7. var SRC = '*.html';  
  8. var DEST = 'dist';  
  9.   
  10. gulp.task('t', function () {  
  11.     return gulp.src(SRC)  
  12.               .pipe(changed(DEST))  
  13.               .pipe(gulp.dest(DEST));  
  14. });  
 
 
编辑完后，在当前目录下的cmd命令行模式下，运行 gulp t，即可完成拷贝过程。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 7051

牛肉粉与编程

作者:admin  日期:2016-03-26

 早起写程序。

 
写半道被一个问题卡住了:
vue写法：<button class="aaa" disabled>请问这个disabled属性如何动态绑定？
 
试了几种方法不得正解，提问到QQ群，无人解，郁闷中，肚子都气饿了，下楼吃碗津市牛肉粉先。何以解忧，唯有牛肉...
没想到在粉馆有奇遇，技术问题被解决了，往下拉看答案：
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
QQ群里的大BOSS起床了，一句话解决了问题。
http://www.html-js.com/article/Vuejs-Chinese-introductory-tutorial-Vuejs-2-Directives-instruction
分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4256

寻求合作，为长沙企业提供前端支持、人员培训

作者:admin  日期:2016-03-20

首先声明：嘟站长前端水平不高，会的东西统共就那么几样，在这个技术博客上都有罗列。大牛们请直接无视我的存在 。

长沙前端总体水平不高，不少高水平的人，都跑去北上广挣大钱去了。留下的很多前端人员都是从旧式“切图仔”转来的（我也一样），这些“留守”的人，正是目前的主要技术力量。
在长沙招聘前端不易，因此我一般建议朋友们自力更生，招聘加培训。 我在长沙工作了多年，同行熟，朋友多，有一定项目经验，时间也比较自由--因此我来帮团队带新人，是比较合适的。
 
我自己提供的服务，包括几个层次：
培训：适合自有前端但水平欠缺的团队，可以选择让我进行短线培训，讲解一些重要的技术点。
支持：团队碰到解决不了的前端技术问题，由我帮助解决。一般是远程帮忙。
参与：直接做页面、做活儿。
 
以上三种方式，都按小时计酬，成本由低至高。有需要的朋友，可以跟我联系。 QQ 258754
 
分类:服务报价 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4660

用Rxjs改写的的ajax函数--返回promise对象

作者:admin  日期:2016-03-16

代码如下：

Javascript代码
  1. function aj(url , type="GET" , data="json"){  
  2.     var final = Rx.Observable.fromPromise(  
  3.         $.ajax({  
  4.         type: type,  
  5.         url: url,  
  6.         dataType: data  
  7.         })  
  8.         .promise()  
  9.     );  
  10.     return final;  
  11. } 
  12. var aaa = aj("shopData/test.json");//把ajax结果赋给aaa,并做下一步处理 

这段代码使用了rx.js及jquery3的库，目前为止，似乎还只有jquery支持在ajax返回promise对象，我到mui论坛提了问，答复mui.ajax暂不支持promise对象。可见promise对象还未普遍使用。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 8247

实践了手机淘宝团队推荐的淘宝的lib-flexible方法

作者:admin  日期:2016-03-11
改编自淘宝的lib-flexible，页面宽度任意变化。这种方式的优点是适合于团队协作，量出尺寸就可以做绝对定位。请点击：http://blog.258754.cn/2016/lib-flexible/
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4469

老刘求职记

作者:admin  日期:2016-02-24
老刘，吾前同事，.NET资深程序员。欲应聘某电商公司。老高，电商团队技术总监，年少成名，面试老刘。
 
二人会议室探讨技术良久，出。老高坦言老刘技术尚有缺陷，如“缓存穿越”、“缓存雪崩”云云。临行叮嘱，好好补习，假以时日，则心理价位可达，更高薪可期。老刘诺诺而退。
 
越两日，老刘于另一公司入职，薪水如其所期。老高闻之，笑而不语。 

 

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4430

用到和准备学习的一些新工具

作者: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
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4399

实测证明无用--网上流传的微信浏览器取消缓存的方法

作者:admin  日期:2016-02-15

 以下代码实测无用。可能是针对比较老版本的微信浏览器而言的。

 

XML/HTML代码
  1. <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
  2. <meta http-equiv="Pragma" content="no-cache" />  
  3. <meta http-equiv="Expires" content="0" />  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4623