当前位置:网站首页>Flutter 绘制波浪移动动画效果,曲线和折线图
Flutter 绘制波浪移动动画效果,曲线和折线图
2022-07-05 12:46:00 【岛上码农】
简介
上一篇用 Flutter 的 Canvas 画点有趣的图形我们介绍了使用 CustomPaint 绘制自定义形状,可以看到有了图形的平面绘制数学计算方法,我们可以画出所需的形状。本篇我们来介绍线条类图形的绘制,并且结合 Animation 实现了常见的波浪动效。通过本篇,你可以了解到:
- 正弦曲线的绘制
- 利用两条正弦曲线加上
Animation
实现波浪动效 - 曲线的一般绘制方法
- 折线图绘制
下面是最终实现的效果图,接下来我们一项一项介绍。
正弦曲线绘制
对于正弦曲线,公式定义如下:
对于在屏幕绘制,由于屏幕的点都是离散的,因此实际就是对正弦曲线进行采样,只要采样间隔足够密集,画出来的效果肉眼上很难区分是离散点之间通过连线完成绘制的。因此,绘制正弦曲线其实就是将正弦曲线的点依次连起来就好了。下面是绘制的实现代码,waveHeight
是正弦曲线的振幅,这里我们一个屏幕宽度绘制一个周期,因此使用的是 2 * pi * i / size.width
。
边栏推荐
- Natural language processing series (I) introduction overview
- mysql拆分字符串做条件查询
- Simply take stock reading notes (4/8)
- Le rapport de recherche sur l'analyse matricielle de la Force des fournisseurs de RPA dans le secteur bancaire chinois en 2022 a été officiellement lancé.
- Overflow toolbar control in SAP ui5 view
- 使用 jMeter 对 SAP Spartacus 进行并发性能测试
- Default parameters of function & multiple methods of function parameters
- 将函数放在模块中
- Lepton 无损压缩原理及性能分析
- What is the difference between Bi software in the domestic market
猜你喜欢
SAP UI5 DynamicPage 控件介紹
Laravel document reading notes -mews/captcha use (verification code function)
Lepton 无损压缩原理及性能分析
2021-12-22 transaction record
你的下一台电脑何必是电脑,探索不一样的远程操作
初识Linkerd项目
ABAP editor in SAP segw transaction code
Notes for preparation of information system project manager --- information knowledge
MySQL giant pit: update updates should be judged with caution by affecting the number of rows!!!
leetcode:221. 最大正方形【dp状态转移的精髓】
随机推荐
【Nacos云原生】阅读源码第一步,本地启动Nacos
About the single step debugging of whether SAP ui5 floating footer is displayed or not and the benefits of using SAP ui5
将函数放在模块中
Kotlin variable
It's too convenient. You can complete the code release and approval by nailing it!
stirring! 2022 open atom global open source summit registration is hot!
Introduction to sap ui5 dynamicpage control
Taobao order amount check error, avoid capital loss API
Simply take stock reading notes (2/8)
LeetCode20.有效的括号
Compile kernel modules separately
Transactions from December 27 to 28, 2021
Detailed explanation of navigation component of openharmony application development
关于 SAP UI5 floating footer 显示与否的单步调试以及使用 SAP UI5 的收益
ABAP editor in SAP segw transaction code
RHCSA3
石臻臻的2021总结和2022展望 | 文末彩蛋
A deep long article on the simplification and acceleration of join operation
I met Tencent in the morning and took out 38K, which showed me the basic smallpox
Halcon template matching actual code (I)