AXURE-026-组件-水波球效果

最新推荐文章于 2020-12-30 06:02:56 发布
原创 最新推荐文章于 2020-12-30 06:02:56 发布 · 2k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#axure #产品设计 #UI设计

本文介绍如何在Axure中制作水波球效果，适用于产品设计中的安全检验结果展示。通过图层布尔计算、动态面板和移动效果来实现，详细讲解了图层分析、遮罩层和水波制作的步骤，并提供了页面加载时的事件设置。文章末尾提供原创组件的下载链接。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

hi，大家好，本期小组件为一个水波球显示效果，可作为运维系统的安全检验结果展示，主要用到axure的图层布尔计算，动态面板以及移动效果等知识点。

文章结尾提供本期组件的原件下载地址，随时可下载。

显示效果


实现方式

1.图层分析。通过将动态面板背景设置为和遮罩层相同的颜色，来达到实际效果。具体如下（主要图层的制作建下文）：

 

 

2.遮罩层制作（布尔计算）

 

3.水波的制作(关键部分)

可以使用钢笔工具绘制边缘起伏的圆形来实现。具体如下：

最低0.47元/天 解锁文章

200万优质内容无限畅学
Axure制作水波球
梦里蓝天
07-02 816
水波球
Axure水波纹交互特效
03-29
效果实现教程地址：https://blog.youkuaiyun.com/qq_27884377/article/details/88894918
axure 水波点击_「连载100篇」AXURE-组件-026-水波球效果
weixin_39754616的博客
12-20 303
封面hi，大家好，我是18岁fantasy，axure组件和实例100篇连载。本期小组件为一个水波球显示效果，可作为运维系统的安全检验结果展示，主要用到axure的图层布尔计算，动态面板以及移动效果等知识点。文章结尾提供本期组件的原件下载地址，随时可下载。显示效果显示效果实现方式1.图层分析。通过将动态面板背景设置为和遮罩层相同的颜色，来达到实际效果。具体如下(主要图层的制作建下文)：图层顺序2....
水波球效果
09-04
通过白塞尔曲线实现的一个水波球效果，类似剩余流量显示的效果。摘要为什么一定要大于100个字节，啊啊啊.......！
axure 水波点击_Axure实现Material Design的按钮波浪特效
weixin_39987211的博客
12-20 386
最近在写一个谷歌材料设计 Material Design风格的WEB产品，在开发过程中将产品原型做成了Axure元件库，当然目前没有完全完成。本文将以实现谷歌材料设计按钮的波浪特效为例，提供一种新的自定义Axure元件样式的方法。需要说明的是：本文所提供的方法已经最大程度小白化，简单易用，但是对于产品经理来说，本文的教程可能不具有实际的意义，仅提供给喜欢研究Axure Or Code的玩家。一、效...
Axure涟漪效果演示
03-15
axure动态半透明图标，超炫，使用动态面板加延时特效制作，适合学习Axure或者需求现成动态图标原型的人下载
Axure数据可视化图表组件库.rp
11-18
内含57种静态图表、11种动态图表以及全国及各省份地图。有折线图、面积图、柱状图、瀑布图、条形图、环图、饼图、散点图、气泡图、雷达图、漏斗图、热力图、子弹图、仪表盘、水波图等等。
30套Axure专业级数据可视化元件库（图表 / 地图 / 素材等）
07-06
全能的数据可视化元件库 支持 20+ 种图表 支持 80 多项个性化配置 支持 ECharts 1000+ 图表 支持 Highcharts 100+ 图表 超丰富：覆盖上千种图表、地图和可视化元件 ...水波图， Block V2 元件 下钻地图 ....
Axure统计图表元件库 - 多图表集成演示
- 水波图：用于展示数据波动的情况。 - 雷达图：展示多个维度数据的对比。 - 漏斗图：主要用于分析用户转化过程中的流失情况。 - K线图：常用于金融领域，显示证券、股票等价格变化。 - 散点图：用于显示两组...
Axure-涟漪动画效果
liuhaiyan111的博客
07-29 4276
在原型设计中为了提高交互效果，并在很多实际应用中也需要用到一些原型动画效果使得整个产品看起来更加具有灵动性。 今天在此制作了一个“水波涟漪”动画效果。具体步骤参照如下： 创建一个透明画布，在画布上分别创建四个圆，大小分别为100 * * 100,80 * 80,60 60,40 * 40。线宽最大，线段类型实线，边框颜色为渐变黄色。 分别设置这四个圆的不透明度从大到小分别为：40％，60...
js水波流动效果（仿电信流量球）
10-10
前端h5+js+css3实现的圆圈内水波滚动显示百分比效果，代码未加密可自由修改
react-rcprogressball水波进度球组件react实现
08-15
rc-progress-ball 水波进度球组件 react 实现
Demo_水波球进度条
10-18
非常完美的类似360水波球进度条，经过我改良的版本，可直接运用于项目中，代码有详细注释，帮助大家学习和改良，里面还有类似液体颜色渐变效果，不大常用，但是还是保留该功能。
css3动画仿加速球水波流动效果
05-17
css3动画仿加速球水波流动效果 参考地址： https://reportvalue.com/wordpress-plugins/gauge-plugin-for-wordpress/ http://codepen.io/wiseguy12851/pen/mJZNqN
Axure数据可视化图表（内含18种图表及其变形)亲测有效,非常实用，非常好用,方便实用
11-17
Axure数据可视化图表（内含18种图表及其变形)亲测有效,非常实用，非常好用，方便实用，数据概览
axure 水波点击_Axure动画教程之“水波涟漪”
weixin_27889245的博客
12-30 606
学会一个小案例，是为了丰富我们的交互原型设计，您可以在此基础上变换出层出不穷的效果！最近在做一个视频通话的项目，刚好需要连线效果，就设计了个“水波涟漪”的效果，先看一下演示。效果大家看到了，很简单，就是一个涟漪的加载效果；颜色将就看吧，不好看你自己调下。开始画原型一、画涟漪的波纹圈1、首先画四个原型，背景透明，边框调到最粗，颜色白色，名称随意起；由大到小尺寸分别是100*100、80*80、60*...
echarts水波球特效（附带外边框进度条）
z19960925的博客
07-16 6832
echarts水波球特效（附带外边框进度条） 1.话不多说先上效果图 2.这里用到了echarts的liquidFill图表，需要加载liquidFill插件 npm i echarts-liquidFill --save 3.在main.js入口文件中引入 4.也可通过script标签形式引入 <script src="http://echarts.baidu.com/resource/echarts-liquidfill-1.0.4/dist/echarts-liquidfil
青铜修炼手册：Axure实现水波纹效果
藤原搞事的博客
03-29 2747
实现步骤： 1.首先画四个圆形，背景透明，边框调到最粗，颜色白色，名称随意起；由大到小尺寸分别是100*100、80*80、60*60、40*40 2.然后将4个圆形的透明度由大到小依次调整为40%、60%、80%、100% 3.将4个圆形水平垂直居中 4.从默认组件库里，拖一个动态面板进来，尺寸调小一点，便于操作，给动态面板也起个名称随意 5.我们有4个圈要做动画，我...
axure 画小程序效果图_【微信小程序】使用ECharts绘制水波图
weixin_39725365的博客
12-20 280
微信小程序使用ECharts绘制水波图效果图话不多说 上代码wxmlwxss.container {width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: pink;}.canvasArea {width: 300rpx;height: 300rpx;...
Chrome浏览器的Axure-RP原型浏览插件教程
资源摘要信息:"Axure-RP-Extension-for-Chrome插件包及教程" 本资源是关于Axure-RP-Extension-for-Chrome插件包及教程的相关信息集合，其中包含了插件的功能特点、安装流程以及使用教程。 1. 插件功能： - Axure-...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值