如何设置从中心位置到全直径的波纹效果动画 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Vue组件设计 | 实现水波涟漪效果的点击反馈指令

当用户点击时，会以点击中心为圆心产生一个水波扩散的涟漪效果，适用各个场景，美观又不浮夸，关键是可以给用户带来很直观的反馈。...定制一个水波纹默认样式水波纹实际上就是通过用户点击的位置生成一个小圆圈，并且尺寸逐渐扩大到整个被点击元素的一个过程，所以这里先制定一个水波基本的样式，并设置好过度动画，过度动画应该是一个先慢后快的一个过程..., 0.6), opacity 0.08s linear; will-change: transform, opacity; pointer-events: none; } 复制代码计算水波纹的位置和直径...如果确定了水波的直径、创建时的(x,y)、过度动画结束时的(x,y)，我们就可以通过transition去渲染水波动画了，创建时的(x,y)就是用户点击的位置，但是水波的直径和过度动画结束时的(x,y...我们的元素都是矩形，不论用户从元素的任意坐标进行点击，以矩形斜边作为直径的圆都可以完美的覆盖整个元素，斜边的计算我们利用小学数学知识求两边平方和进行开方得到，下面是过度动画结束时的水波推演图。

9133 0

【CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )

一、需求说明实现如下效果 , 在一张地图上 , 以某个位置为中心点 , 向四周发散 ; 核心是实现向四周发散的波纹动画 ; 二、动画代码分析 1、地图背景设置地图背景设置 : 地图是...盒子 , 使用绝对定位定位到地图图片中的北京位置 ; 调试界面中 , 找到 city 盒子模型位置 , 双击其 top 和 left 尺寸 , 使用鼠标滚轮修改该盒子模型绝对定位的位置...2 ~ 3 个可缩放的原型图片作为热点动画的波纹 ; 页面的布局如下 : 其中的 dot 盒子是中心小圆点盒子 , bowen1 ~ bowen3 是三个波纹效果动画盒子 ; ... 4、动画定义动画实现如下 : 波纹效果动画 , 就是将...border-radius: 50%; } 6、波纹效果盒子实现波纹效果盒子实现 : 该盒子始终要放置在 city 盒子中心位置 , 因此使用绝对定位 position: absolute

3832 0

您找到你想要的搜索结果了吗？

是的

没有找到

【Flutter 专题】133 图解自定义 ACEWaterButton 水波纹按钮

水波纹和尚预想实现水波纹效果则必然离不开 Animation 动画，使用动画方式也有多种，可以继承 AnimatedWidget 也可以使用 AnimationController 自定义动画样式...，若起始位置为中心则无需添加内置圆半径；若想增大或见效水波纹范围可以自由调整 AnimationController.value 进度范围； // 中心点扩展 double _radius = innerSize...和尚在通过 ACEWaterPainter 绘制水波纹过程中，起始位置从内置圆开始，那是否可以省略第一步的内置圆呢？...暂时先不缺省，因为和尚在设置水波纹扩散过程中，同时设置了透明度的渐变，若缺省内置圆会影响 innerIcon 的展示效果；但内置圆绘制位置可以调整，也可以在 ACEWaterPainter 中进行绘制；...，和尚默认设置为 true 进行重绘； ---- ACEWaterButton 案例源码 ---- 和尚对 ACEWaterButton 水波纹按钮的简单效果已满足，但还不够完善，对于重绘的机制还需要优化

8633 0

手撕一个让人「欲罢不能」的水波纹选中控件

普通选中 Material Design 就给出了很好的指导，比如点击的时候控件有一个 z轴的提升，控件背景色根据手指点击的位置出现一个过渡的效果。比如今天要介绍的这个水波纹选中效果。 ?...下边就来看看如何通过自定View的方式实现一个水波纹选中的效果。...获取点击，计算水波纹最长半径记录水波纹圆心坐标 center 上面的代码中，重写了 onTouchEvent ，并在接收到按下事件时，开始扩展水波或者收缩水波纹，并且记录下手指按下的位置，这个位置就是水波纹的圆心...计算水波纹最长半径看一个简单的 gif 动画 ? 水波纹这里以控件中心为例，同心圆不断扩展，最后覆盖整个控件。我们知道，同心圆绘制的时候，超出控件的部分会被自动截断，所以最后效果是这样的 ?...（当然了，你也可以使用 y 相关的参数），这样就可以得到从 0 到 longestRadius 递增的同心圆半径。

1.1K4 0

Unity 水、流体、波纹基础系列（二）——方向流体（Directional Flow）

如果只看静态效果而不是动画时候会尤为明显，因为你无法预估真正的流向应该是什么样的。这主要是因为波浪和波纹的对齐方式是错误的。它们应该沿着流向拉长，而不是垂直于流向。 ?...（网格分辨率设置为10）通过将用于采样贴图的UV乘以网格分辨率，然后丢弃小数部分，可以将流体贴图切成图块。这使我们的瓦片具有固定的UV坐标，从0到网格分辨率。...它在中途处于全强度。B的另一种情况是，每个图块的中间权重为零。而且由于我们现在仅将B偏移一半，因此这正是其失真线显示的位置。 ?...（中心流体采样）现在，我们可以正确使用流数据，但是准确度取决于网格分辨率。分辨率越高，流动曲线越平滑。但是也不能将分辨率设置得太高，因为会出现波纹图案。 ?...可以发现与动画过程中的流量相匹配的脉冲模式，但是咋一看很难注意到。将速度设置为零时，会出现此问题的更明显体现。

4.5K5 0

那些年下过的大雨

/** * 雨滴容器 * 宽度为15px，高度为120px * 0.5秒内从屏幕上方移动到屏幕90%的高度 * 模仿雨滴的下降过程 */ .drop { position: absolute...，加上设置圆角，模拟水花溅起时的弧形 * 设置动画，当雨滴下降到地面时，透明度设置为1，同时通过设置缩放 * 模拟水花放大的过程 */ .splat { width: 15px;.../** * 波纹 * 沿X轴旋转75度，造成椭圆效果 * 动画效果： * 中心定格，设置波纹延迟，波纹逐渐变大造成扩散效果 * 先上在下再上，造成波纹的跌宕效果 */ #ripples {.../** * 水珠 * 中心定位 * 通过控制水花垂直方向位移，造成溅起效果 * 通过控制水平方向便宜，造成运动效果 */ @keyframes bounce1 { /* 中心点 */ 0%...// 整个动画的关键点 // 整个动画其实是由一条条细线组成，根据下落的时差，造成瀑布的效果 // 根据计算出的屏幕宽度，每条细线1px，然后在屏幕上均匀分布360色 function anim() {

8465 0

Android 贝塞尔曲线实现水纹波动效果

从图中我们可以看出，水纹不断波动并且上涨，当上涨超过屏幕时，自动最初高度波动，接下来，我们就来看如何实现这一效果。...矩形表示手机屏幕（这个自定义view默认是充满屏幕的），波浪线表示水纹波动效果。一段水波纹是曲线AD，我们只需要让这段曲线不断的滚动就实现了水波纹动画。...曲线AD我们可以用贝塞尔曲线分别画出曲线AC和曲线CD，我们之所以从屏幕外开始画是因为水波纹要不断的波动要确保任何时刻都能看到水波纹，所以我们需要在屏幕前后及屏幕内画满水波纹。...设置水波纹的高度WAVE_HEGHT为100，曲线AD的长度即水波纹的波长WAVE_LENGTH为1500（具体值根据显示效果修改）设置起始点Y点wavestartY为400； /** * 波纹的长度...水波纹升涨最后我们让水波纹升涨就大功告成了，水波纹升涨只是绘制时y起点升高，所以我们让绘制的起点每次绘制时都减少一个像素当值小于0的时候，重新设置为初始值400即可 wavestartY = wavestartY

1.2K1 0

如何实现一个丝滑的点击水波效果

本文为Varlet组件库源码主题阅读系列第九篇，读完本篇，可以了解到如何使用一个div创建一个点击的水波效果。...div元素，然后设置它的透明度为0、初始位置、缩放、大小、背景颜色，然后添加为被点击元素的子元素，最后在20ms以后修改div的位置、缩放、透明度，只要设置了它的transation过渡属性即可实现过渡效果...；手指点击的位置是水波圆初始的中心点，然后计算其左上角坐标x、y为水波元素的初始位置；水波圆的最终中心点其实就是被点击元素的中心点，换算成左上角坐标centerX、centerY即为水波元素的最终位置。...因为水波元素为被点击元素的子元素，所以这些坐标都是相对于被点击元素的左上角坐标计算的：从绿色的圆过渡成红色的圆，透明度、大小、位置的变化就是水波的扩散效果。...，ANIMATION_DURATION减去它即表示250ms还剩下的时间，因为前面提到了水波从创建到扩散完成整个过程大概耗时20ms + 200ms = 220ms，所以延迟dealy时间，也就是等待水波动画完成后再让水波消失

6082 0

flash做动画教程（基础篇）

大家好，又见面了，我是你们的朋友全栈君。...，来选择文档的宽高二、新建元件或者是导入外部图片有的图片是不需要自己加工的素材就从外部导入导入外部图片的步骤：文件-导入-导入到库-选择图片的位置新建元件新建元件之后就出现一个空白的文档...，在这个文档里面编辑就可以了小知识：曲线的绘制：首先画一个直线，然后点击箭头放在线上，就会呈现一个弧度查看元件的方法：元件全部在库里面制作动画的过程要实现这样的效果：第一步、...；在第1秒和第三十秒之间任一位置，右击创建补间动画，（背景层）第二步、新建一个图层，把落石添加到背景层上，选择第五秒的时候出现落石接下来，就是让落石往下落到某个位置落石落下{ 添加引导层...）创建补间动画，记住如果创建补间动画以后，线是虚线那么操作有误，只有实线才是操作最后、去掉引导线，关闭眼睛 } 第三步；发送波纹和接收波纹的变动时间轴如下：具体操作都一样的，我们来看看最后的效果吧

2.4K2 0

Web 组态运用之用户数据 ARPU 分析图

界面简介及效果预览通过 HT 的 2D 组态矢量图标绘制了三个水池，并且通过管道的水滴动画，串联起了动画流程。 ?...很显然对于平移没有边界限定是不行的，通过对于边界限定了一个范围，并在这个范围内定义了一个动画对象 anim，然后通过 HT 的动画函数**ht.Default.startAnim()**来启动这个动画效果...： // 水池晃动动画 updatePoolDeep(pools) { // 设置每次位置水池晃动波纹偏移的值 let offsetDlt = 2; // 设置水池晃动波纹动画对象...其实现的方式也多种多样，而本系统是采用自己封装了一个在矩形管道内随机生成水滴的流动效果动画。通过构造一个流动类，类里面定义了基本的一些创建水滴节点、初始化水滴位置以及水滴动画的进行。 ?...设置随机的偏移量 let offset = Math.floor(Math.random() * OFFSET_MAX * 2) - OFFSET_MAX; // 设置水滴的位置

7104 0

Android OpenGL ES 实现动态（水波纹）涟漪效果

动态（水波纹）涟漪效果 1 水波纹效果原理最近一个做视频滤镜的朋友，让我给他做一个动态水波纹效果，具体就是：点击屏幕上的某一位置，然后波纹以该位置为中心向周围扩散。...模拟物理世界中的水波纹最后观察出，物理世界中水波纹的特点如上图所示，从水面的正上方往下看，在凹面上方观察到的是缩小效果，而在凸面上方观察到的是放大效果，然后整个水波纹效果就是放大和缩小效果的交叉排列...水波纹效果原理如下图所示，我们以点击位置为中心，发生形变的区域是内圆和外圆之间的区域，以归一化时间变量 u_Time 大小为半径构建的圆（蓝色虚线）为边界，设定内侧是实现缩小效果的区域，外侧为实现放大效果的区域...2 水波纹效果实现基于上节的原理分析，实现水波纹效果的主要原理就是实现一定区域内的缩小和放大效果，我们以平滑函数的输出值作为纹理采样坐标的偏移程度。...(fmod(m_FrameIndex, 150) / 120); GLUtils::setFloat(m_ProgramObj, "u_Time", time); //设置点击位置

2.3K2 0

Android：RippleDrawable 水波纹涟漪效果

二、RippleDrawable基本概念介绍（1）、RippleDrawable RippleDrawable可以实现上面效果图中的水波纹效果，它是在API 21 中添加的，所以，低于21的版本中不可使用...没有指定mask ，并且也没有指定radius 时，会以控件宽高中的较大值为直径绘制水波纹，这样就必然会超出控件的范围，所以，这种效果也叫做无界水波纹效果。...，则，触摸超出radius的部分时，也只会在控件中心位置为起点以radius为半径绘制ripple rippleDrawable.setRadius(200);...--无界水波纹效果，所谓无界，实际是以空间宽度或高度中的大值作为直径绘制一个园--> <TextView android:layout_width...--有界水波纹效果。

2.7K2 0

Android Heroes Reading Notes 5

现在Android 5.X提供了三种Transition类型：进入和退出动画：两者又包括了explode(分解)、slide(滑动)和fade(淡出)三种效果；使用方式：假设Activity从A跳转到...(7)MD动画效果 Ripple效果水波纹效果有两种：波纹有边界和波纹无边界。前者是指波纹被限制在控件的边界，后者指波纹不会限制在控件边界中，会呈圆形发放出去。...方法可以创建一个RevealAnimator动画，代码如下，其中centerX/centerY表示动画开始的位置，startRadius和endRadius分别表示动画的起始半径和结束半径。...return new RevealAnimator(view, centerX, centerY, startRadius, endRadius); } 下面是一个例子，该例子会呈现出图片从一个点以圆形的方式放大到图片大小的动画效果...StateListAnimator是将动画效果(objectAnimator)配置到原来的selector的item中来实现的，看下面的例子： //定义StateListAnimator <?

9221 0

目前最流行的 5 大 Vue 动画库，使用后太炫酷了

export default { components: { "fake3d-image-effect": Fake3dImageEffect, }, }; 或者，如果您想让它成为可以从应用程序中的任何位置访问的全局插件...props，比如 fill-height-content prop，它将元素高度设置为 100vh（全高），以及 tag 属性，它允许我们选择用于包装其他子元素的首选语义元素。...v-wave 这个库允许我们通过简单地添加一个新的 v-wave 属性在单击标记元素时为标记元素添加漂亮的波纹效果，类似于材质设计中的波纹效果。... 结果： vue-animate-onscroll 该库包含用于在元素滚动到视口时为其设置动画的指令。...有了这篇文章，希望您能够从各种可用的动画库中进行选择，并找到一个完美地补充您的 Vue.js 应用程序的动画库。

18.1K2 0

有赞真赞，官网水波纹动画这么酷

在我心目中有赞前端团队感觉非常不错，特意看了看他们网站有没有好玩的动画，最终发现一个水波纹动画，感觉挺有意思，和小伙伴们分享一下。有没有发现这个弹窗底部有一个水波纹一直在动。 ?...看到这个效果，我没想到有什么好的实现方式，最终通过分析他们的代码还原了这个效果。 ? 做动画其实还有一招「欺骗用户的眼睛」，看似很高大尚的动画，其实可能很简单。...就像今天这个动画，其实就是一个旋转和位移就搞定了。首先看一个效果，椭圆旋转的效果是什么样的？如果让一个椭圆做旋转动画，你会发现它有点像水波纹运动。 ?...有赞的实现，其实只是把椭圆的宽高设置很大，然后让这个圆缓慢移动，椭圆的底部恰好与弹窗的底部能够重叠到一起，把蓝色底部遮挡住了一部分： ?...到这里一个水波纹的效果实现思路就分析完了，大家加油！

8103 1

自定义View实现横向的双水波纹进度条

[HorizontalWaveProgressView.GIF] 网上垂直的水波纹进度条很多，但横向的很少，将垂直的水波纹改为水平的还遇到了些麻烦，现在完善后发布出来，希望遇到的人少躺点坑。...\ path的起始点为(0,0)可根据进度动态改变，然后循环画曲线，长度是有几个波浪就是多长，然后连接到view高度的位置，最后到(0，0)，形成一个封闭的区域，这样就实现了一个填充的水波效果。...secondWavePath.lineTo(0, waveActualSizeHeight); secondWavePath.close(); return secondWavePath; } 3.设置动画使进度和水波纹变化...//设置循环播放 waveProgressAnimator.setRepeatCount(Animation.INFINITE); //让动画匀速播放，避免出现波浪平移停顿的现象...结语通过这个项目，主要可以学到贝塞尔曲线，也可以搭配上不同的动画，搞定产品的各种交互效果。对应的文件：HorizontalWaveProgressView.java

7582 0

手 Q 人脸识别动画实现详解

ObjectAnimator提供了ofInt、ofFloat、ofObject等几个方法来对属性进行插值操作，这几个方法都是设置动画作用的元素、作用的属性、动画开始、结束、以及中间的任意个属性值。...大家有没有注意到转圈动画里面有一对小三角形呢？...（总不能把它画到圆外面去吧）如何确定三角形三个顶点的位置？（总不能把它画歪了吧）这里先抛一下数学思路，后面会进行更详细的讲解。...，调用Canvas.drawLine()，Canvas.drawText()，Canvas.drawCircle()等等就可以实现（其实线条的位置以及角度也需要运用三角函数进行计算），下面简单分析下右边小图片的波纹效果...其实波纹效果的绘制也比较简单，调用Canvas.drawCircle()，然后通过ObjectAnimator不断地去改变圆圈的alpha值和scale值，从而达到波纹的效果。

4.8K4 0

自定义View实现横向的双水波纹进度条

HorizontalWaveProgressView.GIF 网上垂直的水波纹进度条很多，但横向的很少，将垂直的水波纹改为水平的还遇到了些麻烦，现在完善后发布出来，希望遇到的人少躺点坑。...path的起始点为(0,0)可根据进度动态改变，然后循环画曲线，长度是有几个波浪就是多长，然后连接到view高度的位置，最后到(0，0)，形成一个封闭的区域，这样就实现了一个填充的水波效果。...secondWavePath.lineTo(0, waveActualSizeHeight); secondWavePath.close(); return secondWavePath; } 3.设置动画使进度和水波纹变化...//设置循环播放 waveProgressAnimator.setRepeatCount(Animation.INFINITE); //让动画匀速播放，避免出现波浪平移停顿的现象...结语通过这个项目，主要可以学到贝塞尔曲线，也可以搭配上不同的动画，搞定产品的各种交互效果。对应的文件：HorizontalWaveProgressView.java

7742 0

来自星星的花朵 - 腾讯ISUX

对于多次点击的情况，为了让星星轨迹动画不会那么死板，我们设置了几条运动轨迹，当用户点击的时候，运动轨迹也是随机出现的。同时，根据轨迹曲率的不同，也设置了不同的运动时长，在视觉效果也更加丰富。 ? ?...从都教授星球飞来的花儿 ? 在最初版本的基础上，我们对动效进行了重磅升级，去除了酷炫的爆破画面，取而代之的是更加优美的落英缤纷效果。...2、更富沉浸感的动画氛围在新版中，相比之前的星光粒子动画而言，我们打破了小框的拘束，将花瓣的运动范围扩展到整个屏幕，粉丝用户在送花的体验过程中，整体氛围更富有代入感，视觉效果也会更加饱满和震撼！...3、更加丰富的动效细节正如我们在日常生活中所看到的那样，当往平静的水面上丢一个物体进去时，可以看到水面波纹快速散开的效果。...同样的，在新版的动效设计中，我们也对波纹动效进行了细节的优化，为了增强互动的真实感，当花朵飘落到明星头像上时，其周围的波纹也有一个加速扩散的反馈，随后，波纹恢复到匀速循环的状态，动效的体验过程也更加自然

9275 0

CSS笔记(25)之动画animation

CSS3动画动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果....在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改成新样式的动画效果. 动画是使元素从一种样式逐渐变化为另一种样式的效果,你可以改变任意多的样式任意多的次数....盒子动画结束后,停在结束位置: animation-fill-mode: forwards. 做了一个案例,极其麻烦....(对不起台湾的位置有点定偏了)看了一下居然和老师的差不多但是老师做的更好看,用到了阴影,这样会有波纹的效果. 看看跟着老师做的,回头看自己的简直太low了哈哈哈....研究了一下发现很奇怪...小圆圈放大的时候是顶着盒子的上边框和左边框方法的,就是不是以圆的中心放大...但是用了translate以后就可以了...不知道为什么,今天先睡啦,明天再看看吧.

3553 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭