WoW.js插件

时间：2017.11.02----2017.11.04

author: gaoxuerong

先上效果图点击这里

这是我在看WoW.js源码的时候写的，自己也是不理解，所以是边看，边百度，把自己查的资料整理下，由于本人能力有限，不能很好的讲解，就只是粗略的写了下，

开始总体看起来是(function(){}).call(this)讲解详见https://segmentfault.com/q/1010000002519489

1. 其实[].indexOf和

1. function(item) {

1.   for (var i = 0, l = this.length; i < l; i++) {

1.     if (i in this && this[i] === item)

1.       return i;

1.   }return -1;

1. };的作用是一样的;你懂得；

1. Util = (function() {return Util;})()//立即执行函数

1. function Util() {}

1. Util.prototype.extend = function(custom, defaults) {

1. var key, value;

1. for (key in defaults) {

1. value = defaults[key];

1. if (custom[key] == null) {

1. custom[key] = value;

1. }

1. }

1. return custom;

1. };

1. WeakMap=this.WeakMap || this.MozWeakMap || (WeakMap = (function() {return WeakMap;})())

1. function WeakMap() {

1. this.keys = [];

1. this.values = [];

1. }

1. 然后在WeakMap原型上扩展了get set方法；

1. WeakMap.prototype.get(key)返回key关联对象, 或者 undefined(没有key关联对象时)。WeakMap.prototype.set(key, value)在WeakMap中设置一组key关联对象，返回这个 WeakMap对象。关于WeakMap详见http://es6.ruanyifeng.com/#docs/set-map

1. MutationObserver =(MutationObserver = (function() {

1. function MutationObserver() {}

1. return MutationObserver;

1. })());关于 MutationObserver

1. https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

1. getComputedStyle = this.getComputedStyle || function(el, pseudo) {

1. return this;

1. }

1. Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。关于getComputedStyle详见https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

1. http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/

1. this.WOW = (function() {

1. return WOW;

1. })()

1. WOW.prototype.defaults = {

1. boxClass: ‘wow‘,

1. animateClass: ‘animated‘,

1. offset: 0,

1. mobile: true,//手机是否支持

1. live: true,

1. callback: null,

1. scrollContainer: null

1. };

1. function WOW(options) {

1. if (options == null) {

1. options = {};

1. }

1. this.scrollCallback = bind(this.scrollCallback, this);

1. this.scrollHandler = bind(this.scrollHandler, this);

1. this.resetAnimation = bind(this.resetAnimation, this);

1. this.start = bind(this.start, this);

1. this.scrolled = true;

1. this.config = this.util().extend(options, this.defaults);

1. if (options.scrollContainer != null) {

1. this.config.scrollContainer = document.querySelector(options.scrollContainer);

1. }

1. this.animationNameCache = new WeakMap();

1. this.wowEvent = this.util().createEvent(this.config.boxClass);

1. }

1. 然后在Wow.prototype上扩展了方法init[初始化]; start ;stop ;sync[同步] ;doSync; show;applyStyle;animate;resetStyle;resetAnimation;customStyle;vendorSet;vendorCSS;animationName;cacheAnimationName;cachedAnimationName;scrollHandler;scrollCallback;offsetTop;isVisible;util;disabled；

WoW.js基本用法

详见：http://www.cnblogs.com/yangjunfei/p/6746926.html

具体动画效果，详见animate.css

具体css3动画效果详见：http://css.doyoe.com/

自己可以根据animate.css源码分析，只要了解css3动画的用法就好；

例如：1.   fadeInDown

在animate.css中有：

透明度从opacity:0到opacity:1;在外轴上平移：从-20px到0；

2.bounceInDown

3.rollIn

4.lightSpeedIn

5.bounceInRight 

6.flipInX

7.shake

8.swing

9.bounceInUp

10.pulse

11.bounce

12.flip

1. @keyframes flip {

1. 0% {

1. -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);

1. -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);

1. transform: perspective(400px) translateZ(0) rotateY(0) scale(1);

1. -webkit-animation-timing-function: ease-out;

1. animation-timing-function: ease-out;

1. }

1. 40% {

1. -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);

1. -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);

1. transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);

1. -webkit-animation-timing-function: ease-out;

1. animation-timing-function: ease-out;

1. }

1. 50% {

1. -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);

1. -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);

1. transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);

1. -webkit-animation-timing-function: ease-in;

1. animation-timing-function: ease-in;

1. }

1. 80% {

1. -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);

1. -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);

1. transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);

1. -webkit-animation-timing-function: ease-in;

1. animation-timing-function: ease-in;

1. }

1. 100% {

1. -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);

1. -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);

1. transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);

1. -webkit-animation-timing-function: ease-in;

1. animation-timing-function: ease-in;

1. }

1. }

13.tada

1. @keyframes tada {

1. 0% {

1. -webkit-transform: scale(1);

1. -ms-transform: scale(1);

1. transform: scale(1);

1. }

1. 10%, 20% {

1. -webkit-transform: scale(0.9) rotate(-3deg);

1. -ms-transform: scale(0.9) rotate(-3deg);

1. transform: scale(0.9) rotate(-3deg);

1. }

1. 30%, 50%, 70%, 90% {

1. -webkit-transform: scale(1.1) rotate(3deg);

1. -ms-transform: scale(1.1) rotate(3deg);

1. transform: scale(1.1) rotate(3deg);

1. }

1. 40%, 60%, 80% {

1. -webkit-transform: scale(1.1) rotate(-3deg);

1. -ms-transform: scale(1.1) rotate(-3deg);

1. transform: scale(1.1) rotate(-3deg);

1. }

1. 100% {

1. -webkit-transform: scale(1) rotate(0);

1. -ms-transform: scale(1) rotate(0);

1. transform: scale(1) rotate(0);

1. }

1. }