阅读排行
首页 > 技术文章

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. 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. 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基本用法
技术分享
 
具体动画效果，详见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. }
 
文章来自：http://www.cnblogs.com/gaoxuerong123/p/7782695.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案：鲁ICP备09046678号-3