WoW.js插件

Posted 2020-10-15

时间：2017.11.02----2017.11.04

author: gaoxuerong

先上效果图点击这里

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

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

1. 其实[].indexOf和

2. function(item) {

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

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

5.       return i;

6.   }return -1;

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

 

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

2. function Util() {}

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

4.   var key, value;

5.   for (key in defaults) {

6.     value = defaults[key];

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

8.       custom[key] = value;

9.     }

10.   }

11.   return custom;

12. };

 

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

 

3. function WeakMap() {

4.   this.keys = [];

5.   this.values = [];

6. }

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

8. 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() {

2.   function MutationObserver() {}

3.   return MutationObserver;

4. })());关于 MutationObserver 

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

 

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

2. return this;

3. }

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

 

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

 

1. this.WOW = (function() {

2. return WOW;

3. })()

 

5. WOW.prototype.defaults = {

6.   boxClass: ‘wow‘,

7.   animateClass: ‘animated‘,

8.   offset: 0,

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

10.   live: true,

11.   callback: null,

12.   scrollContainer: null

13. };

 

15. function WOW(options) {

16.   if (options == null) {

17.     options = {};

18.   }

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

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

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

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

23.   this.scrolled = true;

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

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

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

27.   }

28.   this.animationNameCache = new WeakMap();

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

30. }

31. 然后在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 {

2.   0% {

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

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

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

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

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

8.   }

 

10.   40% {

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

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

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

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

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

16.   }

 

18.   50% {

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

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

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

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

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

24.   }

 

26.   80% {

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

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

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

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

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

32.   }

 

34.   100% {

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

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

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

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

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

40.   }

41. }

13.tada

 

1. @keyframes tada {

2.   0% {

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

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

5.     transform: scale(1);

6.   }

 

8.   10%, 20% {

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

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

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

12.   }

 

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

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

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

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

18.   }

 

20.   40%, 60%, 80% {

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

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

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

24.   }

 

26.   100% {

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

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

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

30.   }

31. }