微信HTML5活动动画页面开发笔记

一直在各种微信公共账号里面看到有很多营销手法都是靠这种特炫的活动页面来做宣传，虽然知道是它通过什么技术来实现的，但是一直没有亲手去开发过，正好帮朋友做了一个活动，这里就写篇文章做个笔记吧！

---

实现步骤：

一、编写HTML页面(根据PSD来制作H5的页面)

注意事项：编写移动端页面的时候需要考虑到很多分辨率的问题，页面布局所以我使用的都是rem方式，因为页面中会有很多页面块，我们写页面排版的时候需要写多个page-box块来区分不同的页面内容.

二、编写CSS3动画库(用于控制页面中元素的动画效果)

注意事项：编写css3的动画要靠keyframes来自定义各种动画动作，我们一般会看到微信里面的动画页面中会有各种的动画效果，其实这些都是通过keyframes来预先定义好的。这里看个代码片段:

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

这个就是自定义的一个动画,用于控制元素淡化效果的。我们还可以通过css3的transform属性中的translate3d、rotate3d、scale3d、cubic-bezier方法来自定义各种动画。

如果大家不想自己去写那么多的自定义动画组，那么我这里给大家推荐一个国外大侠写的一个开源的动画库.它的名字叫做animate.css

animate.css内置的动画有多种

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

2. fade（淡入或淡出）

3. flip（翻转）

4. rotate（旋转）

5. slide（滑动）

6. zoom（放大或缩小）

三、编写Js控制器(用于控制Touch相关滑动事件)

移动端的Js库我用的Zepto.js，它用来控制整个页面的执行流程。包括Touch的滑动，页面块的显示隐藏。

---

下面这个就是DEMO：

转载请注明出自：http://www.mrco.cn/article/58184119cf6935bd6dd1c0b3.html