以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行。

扫描下面的二维码,可以看到在线的demo页面:

如果对CSS3动画的一些基础概念不是很熟悉,可以参考《CSS3中的动画效果记录》。

 

一、animate.css库中的相关知识点

从github上面下载下来是一个css文件,文件里面有3000多行代码,大部分的代码还是能看懂的。

但里面的代码还是有很多耐人寻味的地方。

1. 关键帧的选定,不仅有整数,还有小数,并且也不是说有规律的,几的倍数。

2. 速度曲线的选定,使用的是cubic-bezier函数,自定义贝塞尔曲线,这里有个在线制作贝塞尔曲线的工具

3. 全程使用transform属性来实现动画效果,使用了大量的translate3d、rotate3d、scale3d,这样还能开启硬件加速。

4. 使用perspective属性设置镜头到元素平面的距离。

 

1)内置的动画有多种

1. bounce(跳动)、flash(闪光)、pulse(脉冲)、rubber band(橡皮筋)、shake(抖动)、swing(摇摆)、wobble(摇摆不定)

2. fade(淡入或淡出)

3. flip(翻转)

4. rotate(旋转)

5. slide(滑动)

6. zoom(放大或缩小)

 

2)translate3d、rotate3d、scale3d

上图就是一个3D坐标,人眼的正对面是z轴的正方向。可以在线调试这三个属性的效果。

1. translate3d语法如下:

据说tz轴位移向量的长度不能设置为百分比值,如果取值为百分比值,将会认为无效值。

2. rotate3d语法如下:

x,y,z是一个0到1之间的数值,主要用来描述元素围绕X轴或Y轴或Z轴旋转的矢量值

a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转。

下图中two到three是绕着X轴旋转,six到one是绕Y轴旋转。而绕Z轴就和2D的旋转效果类似。

3. scale3d语法如下:

 

二、页面开发过程

1)设计稿

踩到的第一个坑,我页面采用了flexible.js可伸缩布局,这样宽度就和设计稿一样了。设计稿的宽度是750px,也就是iPhone6的CSS像素。

我伸缩下也变成了750px,这样在设置边距的时候就可以直接用设计稿上面的了。关于屏幕适配可以参考《移动开发屏幕适配分析

宽度是搞好了,但是高度却不一样,手机上面是1198px,设计稿是1206px,chrome上的模拟器是1256px。

额,怪不得我按照设计稿的边距设置,在模拟器或手机上都达不到效果图的样子。

 

2)实现原理

在翻页的时候,将当前页面隐藏掉,给新页面加个样式,触发动画。

下图中的“li”就是在翻页后加一个样式“play”,触发整个动画开始执行。

“li”中的子元素就是img图片,发生动画的就是这些img标签:

CSS代码如下:

.img3 {
  width: 4.666667rem;
  height: 2.133333rem;
  left: 2.8rem;
  top: 4rem;
  z-index: 4;
}
.play .img3 {
  -webkit-animation: zoomInUp 1s 1.2s backwards;
  animation: zoomInUp 1s 1.2s backwards;
}

下图中,这个箭头其实是两个动画的结合体,不过在IOS可以实现两个动画,而在Android中只能实现一种。

先放大然后再用脉冲效果。

.arrow {
    animation: zoomIn 1s 5s backwards, pulse 1s 0s infinite;
}

 

3)animation-fill-mode的使用

一开始不太明白,这动画怎么才能触发,而且一开始各个元素是隐藏掉的,这咋做到的,后面参考了些页面,发现了下面这个属性。

animation-fill-mode规定对象动画时间之外的状态。

将其设置为“backwards”:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

在第一帧中设置为透明,然后就能达到一个一个出现的效果了。

左图所示,这个时候就可以在第一帧中设置透明,注意不能用display:none,来隐藏,display不会出现动画。

如果不设置为“backwards”,那就会像右图所示,先显示然后隐藏,再开始动画。

  

 

4)rem与CSS自动前缀

我现在是用SASS来写CSS,上面代码中的rem都是在编译的时候动态计算出来的。

-webkit的那个前缀也是在编译的时候动态添加的。

现在开发会使用前端自动化构建工具gulp。具体配置可以参考《前端自动化构建工具gulp记录

 

三、JavaScript部分

1)slider绑定

给“ul”绑定touchstarttouchmovetouchendtouch的相关概念可以参考《触屏touch事件记录

touchmove中计算偏移量,超过指定的偏移才在touchend触发滑动效果。

页面中动画很多,有的地方需要在动画结束后触发一些效果,所以要绑定“webkitTransitionEnd”事件。

 1 $slider.on("webkitTransitionEnd", 'li', function() {
 2   isSlide = false; //slide动画结束 防止暴力切换
 3 });
 4 $slider.on('touchstart', function(e) {
 5   var touch = e.touches[0];
 6   startX = touch.clientX;
 7   startY = touch.clientY;
 8   if (isSlide) {
 9     e.preventDefault();
10   }
11 }).on('touchmove', function(e) {
12   var touch = e.touches[0],
13     posY = touch.clientY,
14     posX = touch.clientX;
15   offsetY = posY - startY;
16   offsetX = posX - startX;
17   isMove = true;
18   e.preventDefault();
19 }).on("touchend", function(e) {
20   if (!offsetY || Math.abs(offsetY) < 30 || !isMove) {
21     return;
22   }
23   $this = $(e.target);
24   if ($this[0].tagName != 'LI') {
25     $this = $this.closest('li');
26   }
27   var current = $this.index();
28   $this.siblings('li').removeClass('play'); //防止出现重叠BUG
29   if (offsetY > 0) { //向下滑动
30     direction = "down";
31     $next = $this.prev();
32   } else { //向上滑动
33     direction = "up";
34     $next = $this.next();
35   }
36 
37   if (current == 0 && direction == 'down') {
38     return;
39   }
40   if (current == length - 1 && direction == 'up') {
41     return;
42   }
43 
44   if (direction == 'up') {
45     $this.addClass('move-up');
46   } else {
47     $this.addClass('move-down');
48   }
49   isSlide = true;
50   offsetY = 0;
51   offsetX = 0;
52   setTimeout(function() {
53     $this.removeClass('play move-up move-down');
54     $next.addClass('play').siblings('li').removeClass('play');
55   }, 300);
56 });

 

2)e.preventDefault

在“touchstart”和“touchmove”都调用了这个方法,这句话的意思是阻止默认行为。

第一个调用是为了防止在手指快速的上下滑动的时候触发“touchend”中的切换。

第二个是Android 4.0+的一个BUG,就是有时候不会触发“touchmove”事件,加了这个后就能触发。

不过加了这个后,相应位置的滚动就无效了,囧。

关于事件处理的相关概念可以参考《JavaScript中事件处理

 

 

参考资料:

CSS3 Transform的perspective属性

CSS3 3D Transform

 

 posted on 2016-04-11 10:11  咖啡机(K.F.J)  阅读(6928)  评论(4编辑  收藏  举报