https://www.m-daihatsu.co.jp/js/wavify.js

1/*
2 *   Wavify
3 *   JavaScript library to make some nice waves
4 *   by peacepostman @ potion
5 */
6function wavify(wave_element, options) {
7  if ("undefined" === typeof options) options = {};
8
9  //  Options
10  //
11  //
12  var settings = Object.assign(
13    {},
14    {
15      container: options.container ? options.container : "body",
16      // Height of wave
17      height: 200,
18      // Amplitude of wave
19      amplitude: 100,
20      // Animation speed
21      speed: 0.15,
22      // Total number of articulation in wave
23      bones: 3,
24      // Color
25      color: "rgba(255,255,255, 0.20)"
26    },
27    options
28  );
29
30  var wave = wave_element,
31    width = document.querySelector(settings.container).getBoundingClientRect()
32      .width,
33    height = document.querySelector(settings.container).getBoundingClientRect()
34      .height,
35    points = [],
36    lastUpdate,
37    totalTime = 0,
38    animationInstance = false,
39    tweenMaxInstance = false;
40
41  //  Allow new settings, avoid setting new container for logic purpose please :)
42  //
43  function rebuilSettings(params) {
44    settings = Object.assign({}, settings, params);
45  }
46
47  function drawPoints(factor) {
48    var points = [];
49
50    for (var i = 0; i <= settings.bones; i++) {
51      var x = (i / settings.bones) * width;
52      var sinSeed =
53        (factor + (i + (i % settings.bones))) * settings.speed * 100;
54      var sinHeight = Math.sin(sinSeed / 100) * settings.amplitude;
55      var yPos = Math.sin(sinSeed / 100) * sinHeight + settings.height;
56      points.push({ x: x, y: yPos });
57    }
58
59    return points;
60  }
61
62  function drawPath(points) {
63    var SVGString = "M " + points[0].x + " " + points[0].y;
64
65    var cp0 = {
66      x: (points[1].x - points[0].x) / 2,
67      y: points[1].y - points[0].y + points[0].y + (points[1].y - points[0].y)
68    };
69
70    SVGString +=
71      " C " +
72      cp0.x +
73      " " +
74      cp0.y +
75      " " +
76      cp0.x +
77      " " +
78      cp0.y +
79      " " +
80      points[1].x +
81      " " +
82      points[1].y;
83
84    var prevCp = cp0;
85    var inverted = -1;
86
87    for (var i = 1; i < points.length - 1; i++) {
88      var cpLength = Math.sqrt(prevCp.x * prevCp.x + prevCp.y * prevCp.y);
89      var cp1 = {
90        x: points[i].x - prevCp.x + points[i].x,
91        y: points[i].y - prevCp.y + points[i].y
92      };
93
94      SVGString +=
95        " C " +
96        cp1.x +
97        " " +
98        cp1.y +
99        " " +
100        cp1.x +
101        " " +
102        cp1.y +
103        " " +
104        points[i + 1].x +
105        " " +
106        points[i + 1].y;
107      prevCp = cp1;
108      inverted = -inverted;
109    }
110
111    SVGString += " L " + width + " " + height;
112    SVGString += " L 0 " + height + " Z";
113    return SVGString;
114  }
115
116  //  Draw function
117  //
118  //
119  function draw() {
120    var now = window.Date.now();
121
122    if (lastUpdate) {
123      var elapsed = (now - lastUpdate) / 1000;
124      lastUpdate = now;
125
126      totalTime += elapsed;
127
128      var factor = totalTime * Math.PI;
129      tweenMaxInstance = TweenMax.to(wave, settings.speed, {
130        attr: {
131          d: drawPath(drawPoints(factor))
132        },
133        ease: Power1.easeInOut
134      });
135    } else {
136      lastUpdate = now;
137    }
138
139    animationInstance = requestAnimationFrame(draw);
140  }
141
142  //  Pure js debounce function to optimize resize method
143  //
144  //
145  function debounce(func, wait, immediate) {
146    var timeout;
147    return function() {
148      var context = this,
149        args = arguments;
150      clearTimeout(timeout);
151      timeout = setTimeout(function() {
152        timeout = null;
153        if (!immediate) func.apply(context, args);
154      }, wait);
155      if (immediate && !timeout) func.apply(context, args);
156    };
157  }
158
159  //  Redraw for resize with debounce
160  //
161  var redraw = debounce(function() {
162    pause();
163    points = [];
164    totalTime = 0;
165    width = document.querySelector(settings.container).getBoundingClientRect()
166      .width;
167    height = document.querySelector(settings.container).getBoundingClientRect()
168      .height;
169    lastUpdate = false;
170    play();
171  }, 250);
172
173  function boot() {
174    if (!animationInstance) {
175      tweenMaxInstance = TweenMax.set(wave, { attr: { fill: settings.color } });
176      play();
177      window.addEventListener("resize", redraw);
178    }
179  }
180
181  function reboot(options) {
182    kill();
183    if (typeof options !== undefined) {
184      rebuilSettings(options);
185    }
186    tweenMaxInstance = TweenMax.set(wave, { attr: { fill: settings.color } });
187    play();
188    window.addEventListener("resize", redraw);
189  }
190
191  function play() {
192    if (!animationInstance) {
193      animationInstance = requestAnimationFrame(draw);
194    }
195  }
196
197  function pause() {
198    if (animationInstance) {
199      cancelAnimationFrame(animationInstance);
200      animationInstance = false;
201    }
202  }
203
204  function updateColor(options) {
205    if (typeof options.timing === undefined) {
206      options.timing = 1;
207    }
208    if (typeof options.color === undefined) {
209      options.color = settings.color;
210    }
211    tweenMaxInstance = TweenMax.to(wave, parseInt(options.timing), {
212      attr: { fill: options.color },
213      onComplete: function() {
214        if (
215          typeof options.onComplete !== undefined &&
216          {}.toString.call(options.onComplete) === "[object Function]"
217        ) {
218          options.onComplete();
219        }
220      }
221    });
222  }
223
224  function kill() {
225    if (animationInstance) {
226      pause();
227      tweenMaxInstance.kill();
228      tweenMaxInstance = TweenMax.set(wave, {
229        x: 0,
230        y: 0,
231        rotation: 0,
232        opacity: 0,
233        clearProps: "all",
234        attr: {
235          d: "M0,0",
236          fill: ""
237        }
238      });
239      window.removeEventListener("resize", redraw);
240      animationInstance = false;
241    }
242  }
243
244  //  Boot Wavify
245  //
246  boot();
247
248  return {
249    reboot: reboot,
250    play: play,
251    pause: pause,
252    kill: kill,
253    updateColor: updateColor
254  };
255}