怎么用vue实现点击图片(按钮)的波纹效果（涟漪动效）

html-css030

怎么用vue实现点击图片(按钮)的波纹效果（涟漪动效）,第1张

1.先是通过鼠标的点击事件的target属性获取点击的节点，获取该节点的宽和高（offset）

2.通过layerX，layerY获取鼠标位置

3.播放动画

wave.vue

我提供个代码，你自己试试：

背景位图导入到库里，右键属性选为as导出，起名surface，然后第一贞拽入到舞台，在第一贞创建关键帧，黏贴代码如下：

fscommand("fullscreen", "true")

var damper = new flash.display.BitmapData(400, 300, false, 400)

var result = new flash.display.BitmapData(400, 300, false, 400)

var result2 = new flash.display.BitmapData(800, 600, false, 400)

var source = new flash.display.BitmapData(400, 300, false, 300)

var buffer = new flash.display.BitmapData(400, 300, false, 300)

var output = new flash.display.BitmapData(800, 600, true, 300)

var surface = flash.display.BitmapData.loadBitmap("surface")

var bounds = new flash.geom.Rectangle(0, 0, 400, 300)

var origin = new flash.geom.Point()

var matrix = new flash.geom.Matrix()

var matrix2 = new flash.geom.Matrix()

matrix2.a = matrix2.d=2

var wave = new flash.filters.ConvolutionFilter(3, 3, [1, 1, 1, 1, 1, 1, 1, 1, 1], 9, 0)

var damp = new flash.geom.ColorTransform(0, 0, 9.960937E-001, 1, 0, 0, 2, 0)

var water = new flash.filters.DisplacementMapFilter(result2, origin, 4, 4, 120, 120, "ignore")

attachBitmap(output, 0)

var ms = getTimer()

var frame = 0

var mouseDown = false

onMouseDown = function () {

mouseDown = true

}

onMouseUp = function () {

onEnterFrame()

mouseDown = false

}

onEnterFrame = function () {

if (mouseDown) {

var _loc2 = _xmouse/2

var _loc1 = _ymouse/2

source.setPixel(_loc2+1, _loc1, 16777215)

source.setPixel(_loc2-1, _loc1, 16777215)

source.setPixel(_loc2, _loc1+1, 16777215)

source.setPixel(_loc2, _loc1-1, 16777215)

source.setPixel(_loc2, _loc1, 16777215)

}

result.applyFilter(source, bounds, origin, wave)

result.draw(result, matrix, null, "add")

result.draw(buffer, matrix, null, "difference")

result.draw(result, matrix, damp)

result2.draw(result, matrix2, null, null, null, true)

output.applyFilter(surface, new flash.geom.Rectangle(0, 0, 800, 600), origin, water)

buffer = source

source = result.clone()

}

第一步：采用色块叠加的方法绘制波光素材。

第二步：运用各种动画效果制造涟漪的实际动态效果。 

这一步该分享介绍里面会先提醒大家回忆下涟漪的实际动态效果：涟漪一般都是从中心开始，逐渐向四周扩散，最后慢慢变大、变淡消失。这有助培养大家想象设计的思维，所以还是建议大家掌握这一点。 

首先，将两个椭圆通过【组合】工具进行组合。 

其次：依次对组合后的椭圆对象设计如下三个动画效果： 

1：从中心出现，向四周扩散，这种效果我们选用【进入】动画中的【缩放】效果，持续时间可以设置为中速或2秒。 

2：完成逐渐变淡消失效果只需要叠加一个【强调】中【放大】效果和【退出】中的【消失】效果。这两个动画的持续时间设置为快速或1秒。

第三步：将上述三个动画的开始方式统统设置为【从上一项】开始，可以通过延时来调节实际效果。