java网页涟漪特效_HTML5/SVG 滤镜特效 - 水波涟漪动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

'use strict';

var xlink = 'http://www.w3.org/1999/xlink';

var imgUrl = '/uploads/151101/ripple512.png';

var feImage = document.querySelector('#feImage');

toBase64(imgUrl, function(data) {

feImage.setAttributeNS(xlink, 'xlink:href', data);

var tl = new TimelineMax({

repeat: -1,

repeatDelay: 1

});

tl.from('#displacement-map', 1.5, {

attr: {

scale: 100

}

}, 0).to('feImage', 1.5, {

attr: {

x: -125,

y: -125,

width: '150%',

height: '150%'

}

}, 0);

});

function toBase64(url, callback) {

var img = new Image();

img.crossOrigin = 'anonymous';

img.onload = function() {

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

canvas.height = this.height;

canvas.width = this.width;

ctx.drawImage(this, 0, 0);

var dataURL = canvas.toDataURL('image/png');

callback(dataURL);

canvas = null;

};

img.src = url;

}