SVG制作不规则链接热点的最简版演示
作者:admin 日期:2019-02-28
这就是个最简演示,其它常用技术就不解释了。
演示地址 :
http://www.contactu.cn/2016/svg/qg.html
VUE+TWEENMAX+SVG动画,用来模拟流程控制
作者:admin 日期:2019-02-18
那种工厂中很多个管道、流水线、控制阀门的控制体系,如果用软件来控制的话,会要操作很多的动画。用普通的HTML+IMAGE方式,很难表现一些复杂的控制。早几年的FLASH,是这方面的强手,但现在适用的方案,应该只好用SVG了。
我一直想了解一下SVG的组织结构及动画控制,这次终于实践了一个小demo。
在Scss中直接使用px单位,通过gulp,自动转为rem单位
作者:admin 日期:2018-10-27
使用了https://www.npmjs.com/package/gulp-px2rem-plugin
注意width_design与pieces都要与ydui.flexible.js中的设定配合。
试着用css animation实现的逐帧动画
作者:admin 日期:2018-10-20
我的试验: 258754.cn/2018/tyfp/test.html
模仿对象是:http://www.101.com
开始学写微信小程序
作者:admin 日期:2018-09-23
跨域时遇到的一个顽症总结
作者:admin 日期:2018-02-01
在进行post跨域数据请求时(所有请求均header中带token),碰到一个奇怪的现象,postman测试可以通过,但是用页面进行调用时,总是报错。前后端忙活了大半天时间,最后找出问题。以下是程序员 “灰色头像”写的总结:
我常用的gulpfile.js配置与sublime组件列表
作者:admin 日期:2017-05-15
我自己的gulpfile.js代码:
这样运行:
gulp --u DIRNAME
--u是自定义参数,这样可以快速建立DIRNAME目录的虚拟站点,并启动所有监听服务。当你有很多不同的目录时,这样做很方便。
- var gulp = require('gulp'),
- // concat = require('gulp-concat'),
- // uglify = require('gulp-uglify'),
- // mock = require('n-mock'),
- browserSync = require('browser-sync').create(),
- // fileinclude = require('gulp-file-include'),
- // minifyCss = require('gulp-minify-css'),
- sass = require('gulp-sass')
- autoprefixer = require('gulp-autoprefixer')
- // directoryMap = require("gulp-directory-map")
- ;
- gulp.task('default', function() {
- var dir = gulp.env.u;
- console.log( "----------------当前处理目录为:/"+ dir +"----------------" );
- browserSync.init({
- server: {
- baseDir: dir,
- index: "index.html"
- }
- });
- // 自动刷新
- gulp.watch(dir+'/*.html', function() {browserSync.reload(); });
- gulp.watch(dir+'/scss/*.scss', function () {
- return gulp.src(dir+'/scss/*.scss')
- .pipe(autoprefixer({
- browsers: [
- "last 10 versions",
- "last 12 Chrome versions",
- "Firefox > 20",
- "ie 6-8"],
- cascade: true
- }))
- .pipe(sass().on('error', sass.logError))
- .pipe(gulp.dest(dir+"/css"));
- });
- gulp.watch(dir+'/css/*.css', function() {browserSync.reload(); });
- gulp.watch(dir+'/js/common.js', function() {browserSync.reload(); });
- });
我常用的sublime插件:
ColorPicker--色彩选择器
备案号不在的日子里,学到了不少的新知识
作者:admin 日期:2016-12-29
不知道咋的备案就失效了。好容易恢复了。备案号不在的这段半个月,学到了不少的新知识:
对父子对象使用手势时不同响应--AlloyFinger--swipe
作者:admin 日期:2016-07-16
具体使用场景是:
- var $t = $(evt.target); //当前点击的target
- if ($t.parents(".cols").length == 0) { //上溯查询所有“.cols" 父对象,如果存在 ,则length>0
- .....
- }
中小项目常用的前端技术选型方案
作者:admin 日期:2016-07-13
SVG滤镜的具体用法
作者:admin 日期:2016-07-06
- <defs xmlns="http://www.w3.org/2000/svg">
- <filter id="Gaussian_Blur">
- <feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
- </filter>
- </defs>
搭建了适合自己的前端自动流水线(gulp+browserSync+sass)
作者:admin 日期:2016-06-26
GSAP官网上的示例动画集,经过学习,我也能制作了
作者:admin 日期:2016-06-16
以下 GSAP官网上的示例动画集,经过学习,我也能制作这些SVG的遮罩、形变、路径类的动画,以设计师的创作提供更大的想象空间。
MorphSVGPlugin Examples
用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完美实现。