仿360水波评分特效、加速球特效、水波动态加载动画、可改造成圆形进度条，很丝滑！

最新推荐文章于 2023-02-07 14:13:21 发布
最新推荐文章于 2023-02-07 14:13:21 发布
阅读量3.3k 收藏 20
点赞数 13
分类专栏： javascript canvas javascript精彩实例 文章标签： javascript canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dkm123456/article/details/113189108
版权
本文介绍如何利用JavaScript和Canvas实现360度水波评分特效，包括正弦曲线的绘制、裁剪成圆形、添加百分比以及转换为圆形进度条。通过调整正弦曲线参数，可创建不同形状的动态效果。
摘要由CSDN通过智能技术生成

先看一下最终效果

    

 

正弦曲线

正弦曲线公式  y = A sin(Bx + C) + D
         

   振幅是 A，A 值越大，曲线更陡峭
   B值越大 周期越短
   C水平位移
   垂直位移是 D，控制曲线上下移动

实现思路

首先来绘制曲线

  1.定义构造函数和初始化方法

//sin曲线构造函数
 function drawSin(option){
	this.init(option);
 }
 //初始化
 drawSin.prototype.init=function(o){
 	this.A=6;//振幅
 	this.B=0.02;//周期
 	this.C
了解本专栏 订阅专栏 解锁全文 超级会员免费看
编程界小明哥
关注
  • 13
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 33
    评论
专栏目录
订阅专栏
html5 css3圆形波浪百分比加载动画特效.zip
07-11
js代码 [removed] var wave = (function () { var ctx; var waveImage; var canvasWidth; var canvasHeight; var needAnimate = false; function init (callback) { var wave = document.getElementById('wave'); var canvas = document.createElement('canvas'); if (!canvas.getContext) return; ctx = canvas.getContext('2d'); canvasWidth = wave.offsetWidth; canvasHeight = wave.offsetHeight; canvas.setAttribute('width', canvasWidth); canvas.setAttribute('height', canvasHeight); wave.appendChild(canvas); waveImage = new Image(); waveImage.onload = function () { waveImage.onload = null; callback(); } waveImage.src = 'images/wave.png'; } function animate () { var waveX = 0; var waveY = 0; var waveX_min = -203; var waveY_max = canvasHeight * 0.7; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; function loop () { ctx.clearRect(0, 0, canvasWidth, canvasHeight); if (!needAnimate) return; if (waveY < waveY_max) waveY = 1.5; if (waveX < waveX_min) waveX = 0; else waveX -= 3; ctx.globalCompositeOperation = 'source-over'; ctx.beginPath(); ctx.arc(canvasWidth/2, canvasHeight/2, canvasHeight/2, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(waveImage, waveX, canvasHeight - waveY); requestAnimationFrame(loop); } loop(); } function start () { if (!ctx) return init(start); needAnimate = true; setTimeout(function () { if (needAnimate) animate(); }, 500); } function stop () { needAnimate = false; } return {start: start, stop: stop}; }()); wave.start(); [removed]
Android防360水波进度
mockingbirds的专栏
11-13 2475
今天使用自定义view实现类似于360的水波进度提示的功能，效果如下： 实现原理实现该效果主要用到了使用path绘制正弦波，以及xfermode知识点。可以首先绘制一个实心圆，然后设置xfermode为SRC_ATOP。path快速学习我们先来简单看一下path的基本用法，path可以绘制任何我们想要的图形。mPath = new Path(); mPath.lineTo(100,100); ca
html5圆圈闪烁,html5 css3圆形波浪百分比加载动画特效
weixin_39988476的博客
05-31 359
一款简单漂亮的html5 css3圆形波浪百分比加载动画特效，非常好看的波浪滚动上升动画效果，也可用于百分比展示。查看演示下载资源：28次 下载资源下载积分：20积分js代码 var phoneWidth = parseInt(window.screen.width);var phoneScale = phoneWidth/640;va...
H5 Canvas绘制圆形进度条动画效果
萌面怪瘦的博客
07-18 1317
效果如图 效果比较简单 html结构部分 <canvas id="canvas" width="110" height="110"></canvas> js部分 var c = document.getElementById("canvas"); //获取绘图上下文 var ctx = c.getContext("2d"); //开始位置 var x = -0.5; ...
html5圆形中心水,html5 canvas制作圆形水波进度条动画特效
weixin_33189820的博客
06-03 513
特效描述：html5 canvas制作 圆形水波 进度条动画特效。纯canvas制作的水波纹进度条动画，支持拖到设置水波进度条大小代码代码结构1. HTML代码var canvas = document.getElementById('c');var ctx = canvas.getContext('2d');var range = document.getElementById('r');//r...
css3动画仿加速球水波流动效果
05-17
css3动画仿加速球水波流动效果 参考地址： https://reportvalue.com/wordpress-plugins/gauge-plugin-for-wordpress/ http://codepen.io/wiseguy12851/pen/mJZNqN
javascript制作的仿迅雷 圆形水波纹进度条(球)
01-08
javascript js制作的仿迅雷 圆形水波纹进度条(球)
Android仿水波纹流量球进度条控制器
09-02
【Android仿水波纹流量球进度条控制器】是一种在Android平台上实现的自定义视图组件，它可以展示一种高端且动态的进度条效果，类似于水波纹在球体表面流动的样子。这种控制器通常用于应用程序中展示数据流量使用情况...
JS实现很酷的水波文字特效实例
10-24
主要通过JavaScript操作图层特效，具体应用了滤镜滤镜（filter）属性，特别是wave滤镜来实现水波纹效果。以下将详细介绍实现该特效涉及的关键知识点。 1. HTML结构搭建：首先需要在HTML中搭建出一个文字显示的容器...
非常逼真的html5 svg水波纹动画特效
06-11
这个水波纹动画特效的实现依赖于TweenMax库。TweenMax是GreenSock Animation Platform (GSAP)的一部分，这是一个强大的JavaScript库，专门用于创建流畅、高性能的动画。TweenMax允许开发者轻松地平滑地改变CSS属性、...
仿360加速球（实现内存释放）
10-19
代码的详细讲解在http://blog.csdn.net/yyh448522331/article/details/52853175
Delphi7.0仿360极速浏览器将网页保存成图片.rar
07-10
Delphi写一个实用的功能，仿360极速浏览器把网页保存成图片，把全部的网页保存成一张图片，然后用图片查看器可以方便查看。本程序的功能虽然没有360极速浏览器的这个功能强大，但是基本原理写出来了，有需要的可在此基础上扩展吧，下边的代码段完成这一核心功能： 　　 webbrowser1.Document.QueryInterface(IViewObject, VObject); 　　 if VObject nil then 　　 try 　　 SRect := Rect(0, 0, Image1.Width, Image1.Height); 　　 VObject.Draw(DVASPECT_CONTENT, 1, nil, nil, Self.Handle,image1.Canvas.Handle, @SRect, nil, nil, 0); 　　 finally 　　 VObject._Release; 　　 end; 　　except 　　 showmessage('网页转换失败。'); 　　end;
JS插件实现360球形波浪动画打分样式波浪进度条
08-12
JS插件实现360球形波浪动画打分样式/波浪进度条
C#仿360加速球
11-15
C#仿360加速球 http://blog.csdn.net/yuanwofei/article/details/16339825
VB实现360加速球动画效果.rar
07-10
VB仿360加速球动画效果，使用UpdateLayeredWindow刷新内容，利用GDI加载Png，从而实现360加速球动画效果。Png图片资源是自己制作的，不喜勿喷~ 加载球体光晕动画（逐帧加载Png），时间匆忙，部分代码来自网络~注释不是很完整，而且估计还有BUG~！常数声明(备注：小诺在这里只强调需注意的常数，剩下的常数声明大家请自行百度！)，设置窗体的扩展风格为多层次 批注：使用该常数后，窗体上的控件将不会Paint，但实体仍然存在。
360 qml qt实现
qq_27081181的博客
06-13 516
一： 360 qml实现（网上下载，非本人实现，我只是做个搬运工，让需要的朋友可以借鉴参考，如有冒犯，请见谅） 网上下载的360主界面的qml实现，自己改了一下，在qt5.10版本亲测可用（低版本可能需要降低部分模块的版本），现将工程附在下面。有需要的朋友可用看看。 链接：https://pan.baidu.com/s/1thbwCLIioqTeugwTOQtr8w 提取码：ff12 复...
Qt 仿360悬浮球
small house
11-05 1692
功能： 1，常规自定义拖动时间 2，异形窗体 3，鼠标进出区域 4，自定义右键菜单 5，自动贴边以及防止拖拽出屏幕区域 下载路径：https://download.csdn.net/download/qq_28171461/11959094 ...
仿360加速球。（实现内存释放）
热门推荐
Mari0_0的博客
10-19 1万+
FloatCircleView的实现自定义view 创建WindowManager窗体管理类管理悬浮小球和底部大窗体 MyProgreeView手机底部窗体中小球的实现 FloatMenuView的实现 MyFloatService MainActivity的实现 现在手机上的悬浮窗应用越来越多，对用户来说，最常见的悬浮窗应用就是安全软件的悬浮小控件，拿360卫士来说，当开启悬浮窗时，它是一个小
6. QML使用View3D时添加动画特效
最新发布
山间点烟雨
02-07 486
使用 View3D 控件加载三维模型，添加动画时比较方便的，直接使用QML中的动画即可添加。比如 属性动画 PropertyAnimation ，数值动画 NumberAnimation，顺序动画 SequentialAnimation ，ParallelAnimation 并行动画等。
后期剪辑特效教程：水波仿真与人物抠像
本资源是一份关于后期剪辑与特效制作的PPT，重点讲解了如何创建水波世界的仿真效果，包括男性和女性人物的抠像合成技术。内容涵盖了一系列细致的操作步骤，如场分离、色彩范围抠像、蒙版控制、溢出抑制以及动态反射...
评论 33
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程界小明哥

请博主喝瓶水，博主持续输出！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值