益米主页总结(1)

2015-04-30

在做益米的主页时，又学到了很多新知识：CSS3动画，SEO，JS事件处理等等。
设计师很给力，我也在努力重构出他想要的效果。
最终页面：益米，让校园生活轻松自在

开始

设计师是做好一个模块就丢给我。所以我刚开始也是一个模块一个模块的重构。做完5个模块后总设计图就发给我了。然后就是直接把HTML和LESS拼接在一起。大概的样子就出来了。不过第一次这么做也出现了一些问题，记录一下：

模块命名

最好在项目开始的时候就定义好各种基本模块的名字，比如：

1	<div class="module-container"></div>

然后确定好容器的宽度，以及在总页面中是怎么呈现。后来定义的是这样：

1	.module-container {width: 1110px;margin: 0 auto;}

实际中这个并不是最外层的容器。需要另外一个div来包裹，设置宽度啊背景啊什么的：

1	.w100p {width: 100%;min-width: 1200px;background-color: #EDF4F9;}

然后秉承着padding和宽度分离的原则，在w100p类之下再设置一个内边距，来控制内容在一整个区块中的上下距离：

1	.p100 {padding: 100px 0;}

其实我没有量设计图的距离…就让内容看起来是居中的。
不过让内容垂直居中其实有很多办法，以后再讲。

CSS3 动画

动画都单独放在一个CSS里面。

CSS3相关属性

页面上所有的动画基本就是用这几个属性：transform,transition,animation。

transform定义物体的变形：比如缩放scale,位置translate3D,旋转rotate等等
transition定义变形时的过渡：最重要的就是时间函数了，动画过渡的效果就靠这个属性：transition-timing-function。此外还有其他的，定义过渡的属性，延迟时间，持续时间。
简写：transition:all 0.5s ease-in-out 1s
代表所有属性都进行过渡，持续0.5秒，1s后执行，过渡效果是先快后慢。
时间函数有内置的，也可以自己定义，自己定义是用贝塞尔曲线（PS中也用到了贝塞尔曲线）然后从网上搜了一下，一些比较有趣的函数就是这样了：
cubic-bezier(0.52, 1.64, 0.37, 0.66)
百度百科的介绍：贝塞尔曲线。
详细的说明：CSS3:transform与transition背后的数学原理

animation就是自己定义整个动画的流程了。更加自由不过也相对复杂一点：

@-webkit-keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

这是比较简单的例子。了解了上面的transform这个也不难理解。

不过要做到完美的动画还是需要写很多很多很多东西的，如果贪方便可以百度CSS3动画框架，有很多方便的工具方便开发，可是生成的代码真的太多太多了。。这次在主页里大部分是自定义的动画，也只是用到了简单的几个属性，不过设计师和老板很喜欢的样子哈哈哈。

接下来要说说怎么组织代码。

代码组织

这次用到的动画的触发有这几种：鼠标移上去触发动画，页面滚动到目标位置触发动画，页面加载完成触发动画。
鼠标移上元素触发
处理方式是使用css中的hover，当元素hover的时候改变原有的属性：

.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active{
  -webkit-transform: translate3D(0,-20px,0);
          transform: translate3D(0,-20px,0);
}

当包含类hvr-buzz的元素被鼠标调戏的时候，这个元素会向上移动20像素。当然这样看好像这个元素就是生硬的移动上去了，其实不是，这个元素还定义了下面的属性：
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
这个时间函数让元素属性改变的时候非常”活泼”。具体效果可以上官网看。
页面滚动到目标位置触发
这个涉及到JS。后面写JS再具体写下来。JS主要是判断当前页面滚动的位置，当滚动到目标位置后，给父元素添加动画类。
这个我是从小米的官网上学到的。在没有看小米的官网之前，我先自己写了个时间轴的动画，然后动画一出来，哇，很酷，很炫，很*，但是一看页面的代码，几乎所有包含动画的元素都加上了类，简直不能忍。
后来看到了小米，发现卧槽动画的元素根本没有做DOM的操作啊！为什么！原来是把DOM操作都转移到一个父节点上了。。
具体的说，就是先把一个部分的模块包装起来，最后肯定有个父节点，然后给父节点添加类名，比如：.map-animation然后CSS这样定义：

/*module-map*/
.map-animation .target
{
  -webkit-transform: translate3D(0,0,0);
  transform: translate3D(0,0,0);
  opacity: 1;
}
.map-animation .target:hover
{
  -webkit-transform: translate3D(0,-10px,0);
  transform: translate3D(0,-10px,0);
}

当父元素添加了这个类，子元素也会自动应用这些样式了，从而触发动画。这样可以避免像之前单独定义一个动画类，然后涉及到JS的就进行大量的DOM操作。用这个方法只需要给一个父节点添加类名，然后动画也会自然出现，节省客户端资源。
页面加载完成触发
这个其实和第二种同理啦~

动画制作

动画效果
简单的几个效果：初始元素设置透明度为0，这样元素一开始是隐藏的，如果需要有移动的效果的话，使用translate3D来设置位置；动画完成的时候透明度变为1，位置变为0（即本来应该在的位置）。配合transition的时间函数，可以完成简单动画效果了。
另外控制元素一个接一个的出现是使用：transition-delay，给每个元素设置不同的延迟时间，这样元素就会延迟触发动画，有个顺序出来。

.item-1{transition:all 0.3s cubic-bezier(0.15,0.73,0.37,1.2) 0s};
.item-2{transition:all 0.3s cubic-bezier(0.15,0.73,0.37,1.2) 0.05s};
.item-3{transition:all 0.3s cubic-bezier(0.15,0.73,0.37,1.2) 0.1s};
.item-4{transition:all 0.3s cubic-bezier(0.15,0.73,0.37,1.2) 0.15s};
.item-5{transition:all 0.3s cubic-bezier(0.15,0.73,0.37,1.2) 0.2s};
.item-6{transition:all 0.3s cubic-bezier(0.15,0.73,0.37,1.2) 0.25s};
.item-7{transition:all 0.3s cubic-bezier(0.15,0.73,0.37,1.2) 0.3s};
.item-8{transition:all 0.3s cubic-bezier(0.15,0.73,0.37,1.2) 0.35s};
.item-9{transition:all 0.3s cubic-bezier(0.15,0.73,0.37,1.2) 0.4s};

额，这里可以单独写出来的。
也可以使用JS来控制。（最好不要了，只不过我第一次做的时候第一个动画就是用JS来控制的，使用计时器）

改进
如果使用hover来触发动画，有时候会有很鬼畜的效果出来。。
就是当使用translate3D改变时，鼠标刚移动进去目标元素，元素会开始动画，这时候如果随着元素移动或者鼠标已经在元素比较里面的位置还好，如果不幸的，刚好在元素边缘并且鼠标没有移动，那么由于元素已经移动了，元素就会不在鼠标的范围内，相当于元素不hover了，所以元素开始不hover的动画，也就是回到原来的位置。可是！回到原来的位置的时候鼠标还在那里！相当于又hover了！因此。。如果用户发现了这个有趣的BUG，继续玩，会发现如果鼠标在边缘慢慢玩会更鬼畜。。。嗯。。我已经玩过了。。
解决办法：不要直接在hover元素上加动画。在hover的子元素上加动画。相当于加一层套，鼠标移动进去套套的时候，子元素发生动画，父元素属性并不变，所以不会发生上面的情况。不好的地方就是增加了DOM节点，有时候动画触发范围略不一样。不过这比触发鬼畜效果要好多了。。
动画框架的解决办法是使用:before元素，在:before元素上添加动画。

Biousco

未分类