预览模式: 普通 | 列表

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

MorphSVGPlugin Examples

  • Official MorphSVGPlugin Demo (at the top of this page) by Jack Doyle-----官方示例
  • SVG Pencil Download by Chris Gannon----铅笔变箭头
  • "!?" to GreenSock Logo by Chris Gannon----!?图形变成绿袜子小人
  • Send Email Success/Failure by Chris Gannon---邮件发送成功后变成对钩
  • Father & Son by Diaco--父亲和儿子的头像变换--烟雾动效
  • Count Down & Count Up by Chris Gannon-----10的倒计时
  • Life is Short by Chris Gannon----奶瓶变坟墓
  • Bow & Arrow by Chris Gannon-----开弓放箭
  • Simple Polyline Morphing by Jack---平板转五星转方块
  • Happy/Sad Face (click the face) by Chris Gannon----哭脸和笑脸
  • Bad Hair Day (click the face) by Chris Gannon-----电风吹把头发吹曲
  • Flame by Sarah Drasner-----烛火摇曳
  • Interchangeable Hipster by Sarah Drasner--胡子和眼镜变化 
  • Floating Duckie by Brad Larson----波浪上的鸭子
  • Power of GSAP (lightening) by Diaco--电灯灯丝发光
  • Animal Shapes by Carl Schooff-----动物形状变化 
  • 分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3414

     演示文件:http://contactu.cn/2016/svg/test_svg2.html

    注意看运动轨迹与“老鹰”的交汇处的表现。


     演示文件2:http://contactu.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 | 查看次数: 2810

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

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

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

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

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

    参加W3CTECH长沙技术交流会

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

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

    纯CSS实现的菱形(斜方块)列表

    DEMO地址:http://contactu.cn/2016/grid/

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

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

     近日工作需要,每天要将一个目录下编辑过的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 | 查看次数: 4131

    牛肉粉与编程

     早起写程序。

     
    写半道被一个问题卡住了:
    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 | 查看次数: 1954

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

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

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

    代码如下:

    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. var aaa = aj("shopData/test.json");//把ajax结果赋给aaa,并做下一步处理 

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

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

    老刘求职记

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

     

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

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

  • - 装一个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 | 查看次数: 2041

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

     

    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 | 查看次数: 2221
  • | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | | »