分类: 前端研究预览模式: 普通 | 列表

SVG制作不规则链接热点的最简版演示

作者:admin  日期:2019-02-28
一朋友要做一个“战国地图”，不会做“不规则热点”。我给他做了这个最简版演示。SVG是我用ps描的，很粗略。响应用的是vue.js，其实用jquery也是一样的。

这就是个最简演示，其它常用技术就不解释了。

演示地址 ：
http://www.contactu.cn/2016/svg/qg.html

查看更多...

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

VUE+TWEENMAX+SVG动画，用来模拟流程控制

作者:admin  日期:2019-02-18

那种工厂中很多个管道、流水线、控制阀门的控制体系，如果用软件来控制的话，会要操作很多的动画。用普通的HTML+IMAGE方式，很难表现一些复杂的控制。早几年的FLASH，是这方面的强手，但现在适用的方案，应该只好用SVG了。

我一直想了解一下SVG的组织结构及动画控制，这次终于实践了一个小demo。

这个演示用到了SVG的symbol/pattern。动画控制用的tweenmax，状态控制用了vue.js。
绘制方面，用了一个ps插件，我用自己熟悉的ps直接导出了svg矢量图形。
 
演示地址 ：
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1912

在Scss中直接使用px单位，通过gulp，自动转为rem单位

作者:admin  日期:2018-10-27

 使用了https://www.npmjs.com/package/gulp-px2rem-plugin

使用这个gulp插件，可以在Scss中直接使用px单位，然后通过gulp的转换，自动转为rem单位，与我常用的ydui.flexible.js配合，最终完成px2rem的转换。
gulp语法如下：
.pipe(sass().on('error', sass.logError))
            .pipe(px2rem({'width_design':640,'pieces':6.4,'ignore_px':[1,2]}))
            .pipe(gulp.dest(dir+"/css"));

注意width_design与pieces都要与ydui.flexible.js中的设定配合。

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

试着用css animation实现的逐帧动画

作者:admin  日期:2018-10-20

我的试验： 258754.cn/2018/tyfp/test.html

模仿对象是：http://www.101.com

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

开始学写微信小程序

作者:admin  日期:2018-09-23
早就有朋友跟我建议：“你应该开始写小程序，很简单，跟VUE的路子很象”。九月份，有一段时间手头没有新单子，于是开始学习。机会不错，从我一个业务关系那里买到了一个慕课的视频，《纯正商业级应用-微信小程序开发实战》。课程不错，我想听的都讲了。我不想听的，基本都没有。
 
花二天时间听完课程，自己写代码实战了一下---果然跟VUE类似。第一感觉就是文件体系拆得太散了。虽然大家都是HTML/CSS/JS/JOSN这几样，但是小程序4个文件分开写，几个页面一起弄的话，感觉我的sublime的标签都不够用了。VUE的单页面组件多么的紧凑。
 
另外，组件的写法跟页面文件，两者有点不一样。比如小程序组件调用的开关还要在josn中定义、小程序的响应函数居然要放在methods:{}中，而页面又不需要。感觉小程序好粗糙。
 
第三方库，我找了有赞出品的vant-weapp，跟vant for vue一脉相承。
js工具库，小程序
 
SCSS写习惯了。可是小程序没有提供支持。在网上找到个由gulp驱动的workflow，还真好用。
 
编辑器这块儿，在Sublime中直接找了个小程序语法插件，配合原来使用的emmet，还挺好用。
 
总体来说，确实难度不大。熟悉VUE体系的不妨多学这一项技能。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1820

跨域时遇到的一个顽症总结

作者:admin  日期:2018-02-01

在进行post跨域数据请求时（所有请求均header中带token），碰到一个奇怪的现象，postman测试可以通过，但是用页面进行调用时，总是报错。前后端忙活了大半天时间，最后找出问题。以下是程序员 “灰色头像”写的总结：

总结下今天出现的问题，主要是在跨域CORS的时候出现这个问题
 
首先需要知道一些容易忽略的知识点，浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
具体看
 
http://www.ruanyifeng.com/blog/2016/04/cors.html
 
还有一点需要注意，头部字段只支持
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type
对于自定义的，比如我们头部传的token这个自定义头部会出现下面2种情况
 
1、axios对于跨域CORS正常会发送2次请求，第一次“预检”，我们这边有token自定义头部字段，虽然我们服务器设置了<add name="Access-Control-Allow-Headers" value="*" />但这个*虽然指所有，但只限制于上面所说的支持的，自定义的不会支持，所以就导致预检就失败，不会发送第二次请求
 
2、普通的ajax却可以支持，应该是没有做预检处理（这个还没详细了解）
 
所以主要还是服务器设置<add name="Access-Control-Allow-Headers" value="*" />要改为<add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" />，增加自定义的token，不能使用*这样的配置。这样对于做预检的，有什么自定义头部字段，这里就要额外增加。
 

 

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

我常用的gulpfile.js配置与sublime组件列表

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

我自己的gulpfile.js代码： 

这样运行：

gulp --u DIRNAME

--u是自定义参数，这样可以快速建立DIRNAME目录的虚拟站点，并启动所有监听服务。当你有很多不同的目录时，这样做很方便。

Javascript代码
  1. var gulp = require('gulp'),  
  2.     // concat = require('gulp-concat'),  
  3.     // uglify = require('gulp-uglify'),  
  4.     // mock = require('n-mock'),  
  5.     browserSync = require('browser-sync').create(),  
  6.     // fileinclude = require('gulp-file-include'),  
  7.     // minifyCss = require('gulp-minify-css'),  
  8.     sass = require('gulp-sass')  
  9.     autoprefixer = require('gulp-autoprefixer')  
  10.     // directoryMap = require("gulp-directory-map")  
  11. ;  
  12.   
  13.   
  14. gulp.task('default', function() {  
  15.     var dir = gulp.env.u;  
  16.     console.log( "----------------当前处理目录为：/"+ dir +"----------------" );  
  17.     browserSync.init({  
  18.         server: {  
  19.             baseDir: dir,  
  20.             index: "index.html"  
  21.         }  
  22.     });  
  23.   
  24.     // 自动刷新  
  25.     gulp.watch(dir+'/*.html', function() {browserSync.reload(); });  
  26.     gulp.watch(dir+'/scss/*.scss', function () {  
  27.         return gulp.src(dir+'/scss/*.scss')  
  28.             .pipe(autoprefixer({  
  29.                     browsers: [  
  30.                     "last 10 versions",  
  31.                     "last 12 Chrome versions",  
  32.                     "Firefox > 20",  
  33.                     "ie 6-8"],  
  34.                     cascade: true  
  35.                 }))  
  36.             .pipe(sass().on('error', sass.logError))  
  37.             .pipe(gulp.dest(dir+"/css"));  
  38.   
  39.     });  
  40.     gulp.watch(dir+'/css/*.css', function() {browserSync.reload(); });  
  41.     gulp.watch(dir+'/js/common.js', function() {browserSync.reload(); });  
  42.   
  43. });  

我常用的sublime插件：

ColorPicker--色彩选择器

查看更多...

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

备案号不在的日子里，学到了不少的新知识

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

不知道咋的备案就失效了。好容易恢复了。备案号不在的这段半个月，学到了不少的新知识：

  • * 完整的学习了git命令行，用命令行管理自己的仓库https://github.com/csdudu，并上传了几个小片段。建立gh-pages分支。以后需要演示的片段，全部都使用这个方法进行演示了。
  • * 完整的了解了npm包管理的机制，编辑package.json，更多的npm语法。并且通过实战，了解到npm的一些坑：比如node版本的影响、cnpm的优缺点。
  • * 基本搞懂了Webpack的运行机制，编辑webpack.config.js，常用loader。日常使用webpack-dev-server --inline --content-base .方式进行热更新。
  • * 基于Webpack搞清了es6的import/require语法，投入使用。用loader方式打包vue工程。
  • * 基本搞懂vue-router路由系统，开始制作一个SPA的demo，以用于以后PC端的仿FLASH类网站。
  • * 恶补了许多vue组件的知识。
  • * vue自定义指令的写法。
  • * 了解了前端AJAX模拟的一些知识，比如mock server的工具、搭建方式。顺便学习了LeanCloud这种把数据库抽象为API的工具的基本用法。
    •  
    接下来，要向VUE组件化开发、ES6语法，甚至React native的方向进军。微信小程序有时间也想试试。

    Tags: 学习新知识学习新知识

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

    对父子对象使用手势时不同响应--AlloyFinger--swipe

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

     具体使用场景是：

    1、移动端希望对body使用左右切换手势，
    2、内部的某个子div，也要使用左右切换，
    3、当对子切换时，希望body 对象不响应。
     
    解决方法：
    根据 event.target 不同写不同逻辑，根据这个前提，对父对象的响应代码如下：
     
    Javascript代码
    1. var $t = $(evt.target);     //当前点击的target  
    2. if ($t.parents(".cols").length == 0) {       //上溯查询所有“.cols" 父对象，如果存在 ，则length>0  
    3.     .....  
    4. }  
     
    在github中发issue，是一个解决疑难的途径，虽然官方指南不推荐这么做。但是这种小众插件没提供别的提问途径，只能这么干了。
     
    分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3970

    中小项目常用的前端技术选型方案

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

    昨晚给一个朋友的项目做的前端选型分析，主要就是在项目启动时，给技术老大们选择一下，前端要选用哪些技术，这样方便招聘人手，搭建前端团队（其实在长沙一般也就是1-2个人）。

    点击查看脑图

     

    ...废话，写的当然都是我自己熟悉的技术。我只会这么多啦，大牛们请无视。

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

    SVG滤镜的具体用法

    作者:admin  日期:2016-07-06
    以高斯模糊（Gaussian Blur）为例，
    <filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？
    <filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。
     
    XML/HTML代码
    1. <defs xmlns="http://www.w3.org/2000/svg">  
    2. <filter id="Gaussian_Blur">  
    3. <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>  
    4. </filter>  
    5. </defs>  
     
     
    几个注意点：
  • SVG结构代码要使用内联方式引入，否则外联CSS方式似乎不生效
  • 选择符搭配很自由，完全跟HTML一样，比如：svg#g1:hover g#gg{filter:url(#Gaussian_Blur)}
  • 如果是做按钮用途，按钮要设立一个透明的点击区域，否则鼠标只有点到有像素的位置才有效果。模糊效果要注意边缘与svg容器的边距。
    • 分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2573

    搭建了适合自己的前端自动流水线(gulp+browserSync+sass)

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

     很多前端小菜鸟们，还不知道啥是自动工作流。说白了，就是搭建一套自动机制，让前端码农变成无脑的流水线工人，摆脱琐碎的人工劳动。从此，你在开发环境做的东西，会自动的传送到生产环境....

    查看更多...

    Tags: gulpgulp

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

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

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

    以下 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 | 查看次数: 3600

    用SVG替代FLASH的三大要素-遮罩、路径动画、形变

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

     演示文件：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 | 查看次数: 3046
  • 1 | 2 | 3 | 4 | ›