首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    [HorizontalWaveProgressView.GIF] 网上垂直的水波纹进度条很多,但横向的很少,将垂直的水波纹改为水平的还遇到了些麻烦,现在完善后发布出来,希望遇到的人少躺点坑。...思路分析 整体效果可分为三个,绘制圆角背景和圆角矩形,绘制第一条和第二条水波浪,根据自定义进度变化效果。...secondWavePath.lineTo(0, waveActualSizeHeight); secondWavePath.close(); return secondWavePath; } 3.设置动画使进度和水波纹变化.../** * 设置进度 * * @param currentProgress 进度 * @param duration 达到进度需要的时间 */ public void setProgress...(waveProgressAnimator); } } 其中波浪动画是通过改变moveDistance的值改变纵坐标达到,进度主要是通过改变百分比currentPercent改变波浪的横坐标达到

    74020

    纯CSS实现水波纹的电池充电动画特效

    前置知识: 要想完成这个特效,就必须要知道一些前置的属性,简单介绍一下吧: animation 、 transform 和 filter 这三个就不多做介绍了,基本上所有的动画都会用到这两个属性...这里可以使用定位布局,通过 top 来控制水的位置, top 的值越大水越低, top 的值越小水越高 我们把水位设置为80%,同时通过 linear-gradient() 来设置水的一个渐变色: 那么动画就很简单了...,只需要控制 top 值就会造成水的上升,像这样 这时需要注意的点是: 最上方我们的容器设置了圆角,所以在动画到100%的时候,要和容器的圆角一样 水位在移动,为了增强立体感,可设置阴影,可以以有个递进的效果...box-shadow: 0 14px 28px rgba(7, 93, 104, 0), 0 10px 10px rgba(31, 3, 68, 0.4); } } 水波纹特效

    36710

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

    波纹 和尚预想实现水波纹效果则必然离不开 Animation 动画,使用动画方式也有多种,可以继承 AnimatedWidget 也可以使用 AnimationController 自定义动画样式...; 和尚预期水波纹不仅范围逐渐变大,并且在扩散过程中透明度逐渐降低,至外围最大范围为止消失;和尚采用最基本的 CustomPainter 自定义 Canvas.drawCircle,根据时间进度来逐层绘制水波纹...; 2.1 透明度 和尚使用 Paint 绘制时根据 AnimationController.value 进度逐步设置 color.withOpacity 透明度逐渐变低; Paint _paint..._paint..color = color.withOpacity(1.0 - progress); 2.2 外围圆 外围圆主要是根据 AnimationController.value 进度逐步进行半径的更新...AnimationController.value 进度范围; // 中心点扩展 double _radius = innerSize * 0.5 * progress; // 增大扩展范围 double

    84430

    Android 自定义球型水波纹带圆弧进度效果(实例代码)

    需求 如下,实现一个圆形水波纹,带进度,两层水波纹需要渐变显示,且外围有一个圆弧进度。 ? 思路 外围圆弧进度:可以通过canvas.drawArc()实现。...至于波浪的移动,可以通过移动平移水平线的起始位置来实现,在使用动画循环即可,为了能够稳定的显示,绘制波浪时需要严格绘制整数倍周期的波浪。...生命周期的控制:为了减少某些时刻CPU的损耗,通过控制变量自定义lifeDelegate(基于kotlin的代理模式实现)来控制动画的开始暂停。...private var outerStrokeWidth = 10f private var fAnimatedValue = 0f private var sAnimatedValue = 0f //动画...centerX.toFloat(), centerY.toFloat(), innerRadius, bgCirclePaint ) } } 总结 以上所述是小编给大家介绍的Android 自定义球型水波纹带圆弧进度效果

    1.2K20

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

    在我心目中有赞前端团队感觉非常不错,特意看了看他们网站有没有好玩的动画,最终发现一个水波纹动画,感觉挺有意思,和小伙伴们分享一下。有没有发现这个弹窗底部有一个水波纹一直在动。 ?...做动画其实还有一招「欺骗用户的眼睛」,看似很高大尚的动画,其实可能很简单。就像今天这个动画,其实就是一个旋转和位移就搞定了。 首先看一个效果,椭圆旋转的效果是什么样的?...如果让一个椭圆做旋转动画,你会发现它有点像水波纹运动。 ? 如果让这个椭圆边旋转边滚动呢,你会发现它在扭曲着“屁股”在走动。 ?...这就是这个水波纹动效的核心思路,剩下的就是配合 UE 小姐姐调各种参数了,让整个动画变得更逼真。具体实现看代码: ? 底部蓝色的长条: ? 水波纹 1: ? 水波纹 2: ?...到这里一个水波纹的效果实现思路就分析完了,大家加油!

    80531

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

    HorizontalWaveProgressView.GIF 网上垂直的水波纹进度条很多,但横向的很少,将垂直的水波纹改为水平的还遇到了些麻烦,现在完善后发布出来,希望遇到的人少躺点坑。...思路分析 整体效果可分为三个,绘制圆角背景和圆角矩形,绘制第一条和第二条水波浪,根据自定义进度变化效果。...secondWavePath.lineTo(0, waveActualSizeHeight); secondWavePath.close(); return secondWavePath; } 3.设置动画使进度和水波纹变化.../** * 设置进度 * * @param currentProgress 进度 * @param duration 达到进度需要的时间 */ public void setProgress...(waveProgressAnimator); } } 其中波浪动画是通过改变moveDistance的值改变纵坐标达到,进度主要是通过改变百分比currentPercent改变波浪的横坐标达到

    73620

    Android开发笔记(十四)圆弧进度动画CircleAnimation

    Android在技术上把动画分为了三类,分别是帧动画FrameAnimation、补间动画TweenAnimation、属性动画,其中补间动画又分做五种:深浅动画AlphaAnimation、平移动画TranslateAnimation...网上对这些动画的说明资料有不少,所以博主就不打算介绍它们的基本用法了,还是说说另外的一些常用动画。 首先介绍的是圆弧进度动画,像我们下载文件或者是做其他什么事情,都想知道当前到什么进度了。...在Windows下常用来表达的是细长的进度条,但在手机上因为屏幕限制,我们更喜欢展示圆形或弧形的进度圈。...所以接下来说的便是这个进度圆圈的动画,同时也正好与上一节自定义视图的绘制方法结合起来,复习复习加深巩固。...点击下载本文用到的圆弧进度动画代码 点此查看Android开发笔记的完整目录

    1.2K10

    canvas实现有递增动画的环形进度

    由于灰色圆环没有动画效果,所以一开始就绘制一个完整的灰色圆环即可。 drawClrCanvas:用来绘制上边的彩色圆环。 clearCanvas:用来清空画布。这是彩色圆环动画需要。...因为我们圆环动画效果的核心就是,每隔一段时间就把彩色圆环清空一下,然后把结束角度值增大、重画,这样连续起来就是动画。 以下是三个方法的代码: ? ? ?...圆环动画效果 由于我这里需求特殊,需要用户每次翻到canvas所在swiper时,才会触发动画(后来更麻烦一点需要柱状图和canvas部分有个入场效果后,动画才开始。...否则就走到else里初始化数据页面的状态、清除定时器暂停动画、并把彩色圆环清空 (3)vm.aniShow 在我上篇《纯css绘制柱状图》里边说了,柱状图的动画要跟canvas的动画一起说。...最后,圆环和上边柱状图的动画结合,就是animation控制一下动画延迟即可。很简单的。 index.vue源码: (注,源码稍作整理,单独提取。

    2.5K30
    领券