前言：
css Sprites指的是网页图片的一种处理技巧，通常是将一些体积小的不常更换的图片进行处理，目的是为了减少HTTP请求次数，也是优化必不可少的工作。
这里是对自己在gulp中合成雪碧图的一些的经验和总结！
gulp中用于合成雪碧图的模块有许多，我只是针对gulp-css-spriter和gulp.spritesmith这两个做了尝试，在尝试过程中发现写对css文件和images文件路径是关键问题，只有把路径配对了那几乎没有啥问题了。
gulp-css-sprite
tip:这个模块很久没有更新了，下载量也很小，了解一下即可，可以有时候也是可以用到的.
首页看一下目录结构方便对照观察了解：
var gulp=require("gulp"),
spriter=require('gulp-css-spriter');
gulp.task('sprite',function(){
var timestamp= + new Date();//生成时间戳
gulp.src('src/spriteTest/css/test.css')
.pipe(spriter({
// 生成的spriter的位置
'spriteSheet':'src/spriteTest/dist/images/sprite_'+timestamp+'.png',
// 生成样式文件图片引用地址的路径
'pathToSpriteSheetFromCSS':'../images/sprite_'+timestamp+'.png'
}))
//图片合并后css文件中图片名也响应替换掉输出的css文件的目的地址
.pipe(gulp.dest('src/spriteTest/dist/css/'));
/*.pipe(autoprefixer({
browsers:['last 2 Chrome versions', 'Safari >0', 'Explorer >0', 'Edge >0', 'Opera >0', 'Firefox >=20'],
cascade:false,
remove:false
}))*/
});
说明在编译css的时候背景图都加了一个参数用了说明是要css sprite的；
例如test.css文件中添加了"？__spriter"用来标识是要替换的
.icon1:after {
background: url("../images/icon1.png?__spriter") no-repeat center center;
}
.icon2:after {
background: url("../images/icon2.png?__spriter") no-repeat center center;
}
.icon3:after {
background: url("../images/icon3.png?__spriter") no-repeat center center;
}
.icon4:after {
background: url("../images/icon4.png?__spriter") no-repeat center center;
}当你在npm install gulp-css-sprite --save-dev下该模块时是默认不加标识的，从网上了解到修改该模块可以加上标识，这里就不具体说明了，可以参考如下博文自行修改：
博客园：
gulp.spritesmith
spritesmith的作用就是拼接图片并生成样式表，并且还能输出SASS,Stylus,LESS甚至是JSON。
这个模块不需要事先写一个css文件然后根据css去寻找图片进行合并，这个模块是将希望合并的小图先进行合并然后根据cssTemplate去生成css文件
先看文件目录：
//雪碧图gulp.spritesmith
gulp.task('spritesmith',['clean'],function(){
return gulp.src('src/spriteTest/images/*.png')
.pipe(spritesmith({
imgName:'images/sprite20161010.png', //保存合并后图片的地址
cssName:'css/sprite.css', //保存合并后对于css样式的地址
padding:20,
algorithm:'binary-tree',
cssTemplate:"src/spriteTest/handlebarsStr.css"
}))
.pipe(gulp.dest('//雪碧图gulp.spritesmithgulp.task('spritesmith',['clean'],function(){
return gulp.src('src/spriteTest/images/*.png')
.pipe(spritesmith({
imgName:'images/sprite20161010.png', //保存合并后图片的地址
cssName:'css/sprite.css', //保存合并后对于css样式的地址
padding:20,
algorithm:'binary-tree',
cssTemplate:"src/spriteTest/handlebarsStr.css"
}))
.pipe(gulp.dest('src/spriteTest/dist'));})'));
})说明一下路径问题：
1.imgName上写的路径是相对于输出路径（gulp.dest）,上述代码输出的路径实际是：
"src/spriteTest/dist/images/sprite20161010.png"
2.同理cssName的输出路径也是一样的：
"src/spriteTest/dist/css/sprite.css"
-~v~- 如果不注意这些路径会不容易找见生成的文件滴！
spritesmith的参数说明：
Template String:
{{#sprites}}
.icon-{{name}}:before {
display: block;
background-image: url({{{escaped_image}}});
background-position: {{px.offset_x}} {{px.offset_y}};
width: {{px.width}};
height: {{px.height}};
}
{{/sprites}} 输出的为：
.icon-fork:before {
display: block;
background-image: url(sprite.png);
background-position: 0px 0px;
width: 32px;
height: 32px;
}
.icon-github:before {
/* ... */Template function的demo：
// var yaml = require('js-yaml');
{
imgName: 'sprite.png',
cssName: 'sprite.yml',
cssTemplate: function (data) {
// Convert sprites from an array into an object
var spriteObj = {};
data.sprites.forEach(function (sprite) {
// Grab the name and store the sprite under it
var name = sprite.name;
spriteObj[name] = sprite;
// Delete the name from the sprite
delete sprite.name;
});
// Return stringified spriteObj
return yaml.safeDump(spriteObj);
}
}输出为：
fork:
x: 0
"y": 0
width: 32
height: 32
source_image: /home/todd/github/gulp.spritesmith/docs/images/fork.png
image: sprite.png
total_width: 64
total_height: 64
escaped_image: sprite.png
offset_x: -0.0
offset_y: -0.0
px:
x: 0px
"y": 0px
offset_x: 0px
offset_y: 0px
height: 32px
width: 32px
total_height: 64px
total_width: 64px
github:
# ...
前端制作动画的几种方式（css3，js，jquery）
前端制作动画的几种方式（css3，js，jquery）
制作动态的网页是是前端工程师必备的技能，很好的实现动画能够极大的提高用户体验，增强交互效果，那么动画有多少实现方式，一直对此有选择恐惧症的我就总结一下，以便在开发的时候选择最好的实现方式。
1.css的transition。
语法：
#mydiv2
{
width:100px;
transition: width 2s;
/*transition-property 规定设置过渡效果的 CSS 属性的名称
transition-duration 规定完成过渡效果需要多少秒或毫秒
transition-timing-function 规定速度效果的速度曲线。 1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
*/
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果。
indent是可以指定元素的某一个属性值。其对应的类型如下：
1、color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-color,border-color,color,outline-color等css属性；
2、length: 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性；
3、percentage:真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性；
4、integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生 如：outline-offset,z-index等属性；
5、number真实的（浮点型）数值，如：zoom,opacity,font-weight,等属性；
6、transform list:详情请参阅：《CSS3 Transform》
7、rectangle:通过x, y, width 和 height（转为数值）变换，如：crop
8、visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility
9、shadow: 作用于color, x, y 和 blur（模糊）属性,如：text-shadow
10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画,如：background-image
11、paint server (SVG): 只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似
12、space-separated list of above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化
13、a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化
具体什么css属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，大家可以点这里了解详情。这里需要提醒一点是，并不是什么属性改变都会触发transition动作效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。
2.css3的animation属性
@keyframes定义动画
@keyframes myfirst1
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst2 /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst3 /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst4 /* Opera */
{
from {background: red;}
to {background: yellow;}
}
/* 动画过程可以更加细腻，变量可更加丰富 */
@keyframes myfirst5
{
0% {background: red; left:0px; top:0px;} /*改变位置要求position不能为static*/
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
将动画绑定到元素上
#mydiv2
{
animation-name: myfirst5; /*规定 @keyframes 动画的名称。*/
animation-duration: 5s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
animation-timing-function: linear; /* 规定动画的速度曲线。默认是 "ease"。*/
animation-delay: 2s; /*规定动画何时开始。默认是 0。*/
animation-iteration-count: infinite; /*规定动画被 的次数。默认是 1。*/
animation-direction: alternate; /*规定动画是否在下一周期逆向地 。默认是 "normal"。*/
animation-play-state: running; /*规定动画是否正在运行或暂停。默认是 "running"。*/
/* Firefox:
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
*/
/* Safari 和 Chrome:
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
*/
/* Opera:
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
*/
}
动画属性简写
#div5
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
3.Jquery的animate函数
隐藏显示 hide/show(speed,callback),
$cr.hide(); //元素隐藏，会记住diaplay原始属性
$cr.css("display","none"); //元素隐藏，忘记diaplay原始属性
$cr.show(); //元素显示，回复diaplay原始属性
$cr.hide('slow'); //缩小到左上角，传递字符串型参数 'slow'600ms，'fast'200ms,'normal'400ms。没有参数表示立即实现
$cr.show(1000,function(){ //从左上角开始放大，传递整型参数，和回调函数
alert("显示结束");
});
$cr.toggle(); //改变元素可见性动画
淡入淡出 fadeIn/fadeOut(speed,easing,callback),
$cr.fadeOut('slow',"swing"); //元素淡出 "swing" - 在开头/结尾移动慢，在中间移动快,"linear" - 匀速移动
$cr.fadeIn(); //元素淡入，在元素消失下情况下有效
$cr.fadeTo(600,0.2); //改变元素不透明度动画，参数为时间和透蜜蒙都
$cr.fadeToggle(); //改变元素不透明度，实现元素可见性动画
滑动 slideUp/slideDown(speed,callback)会改变元素的display属性
$cr.slideUp(); //缩小到所上角
$cr.slideDown(); //由左上角扩大
$cr.slideToggle(); //改变元素消失或出现
自定义动画 animate({params},speed,callback);
if(!$cr.is(":animated")){ //判断元素是否处于动画状态
$cr.animate({ //一个animate内的动画为并行
left:'250px', //position属性必须设置成relative或absolute
height:'+=150px', //可以使用相对值+=或-=
width:'toggle' //可以把属性的动画值设置为 "show"、"hide" 或 "toggle"。opacity:'show'表示fadeIn， height:'show'表示slideDown，在属性上设置show表示出现
},'slow',function(){
alert("动画执行完成");
})
.delay(1000) //延迟时间，使用链式写法
.animate({fontSize:'3em'},"slow"); //多个animate之间是顺序执行的
}else{
//停止动画 stop(stopAll,goToEnd); stopAll表示是否清除后续所有动画，默认false，goToEnd表示当前动画是否立即执行完成，默认为false。
$cr.stop(); // 不带参数，会清除在被选元素上指定的当前动画
}
但是，animate函数只能够实现一些数值属性，能够实现的变化非常有限制，而且使用这个函数时还要配合stop来使用，在达到某条件时终止动画，设置比较复杂。
4.原生js动画
原生js动画利用js代码，将动画一步以函数的方式写出来，可以实现多种动画样式，而且可以自己做兼容性处理，自己设立每一步的动画效果，并且能够完成比较复杂的效果，但是代码量很大。如下面的例子：需要自己定义所有的动态函数，并进行计算、判断和处理
var startingTop=0;
var dom = document.getElementById("mydiv");
var animation = setInterval(function() { //设置周期实现元素样式变化，进而实现动画
startingTop += 20;
dom.style.top = startingTop+"px"; //要求position不能为static，可以在style中设置position:absolute; //dom.style.opacity
}, 100);
clearInterval(animation); //清除周期事件
//js设置显示属性的几种方法
//dom.style.cssText = "margin-top:50px"
//dom.className = "class2";
//dom.setAttribute("class", "class2");
//dom.setAttribute("title","mytitle");
5.插件
网上可以搜到很多封装好的动画插件，这些插件可以直接引入到页面中，通过初试话和配置的方式进行设定，直接在页面中展示动画。
如：waves，textillate.js等等。
6.使用canvas制作动画
我们还可以使用canvas在浏览器上画图，并且利用其api，制作动画。canvas使用的地方非常多，尤其是在制作h5小游戏上。
同样都是使用编码的方式由前端开发工程师完成动画效果，canvas要比原生js效率高的多，流畅的多。通过画笔的方式，能够轻松的实现更多的动画效果。
7.引用gif图片
如果在需求特别紧急，而且动画又特别复杂的情况下，自己没有把握按时实现效果，或者代价太大，真的，别犹豫，上gif图片吧，不要在技术上纠结了，虽然在工程师的角度上这样做很low，但是，用户的体验是没有影响的~所以，别纠结，就是要快！完成最重要了！
