旋转拨号锁屏

使用 Flutter 构建的旋转拨号锁

rotateDial

工作原理

大多数魔术由 GuesterDetector 处理。

  • onPanEnd
  • onPanDown
  • onPanUpdate

SpringHouse,首先我们使用 localPosition offset 来定位用户在屏幕上的点击位置。对于 UI 点击,Transform 角度将自动更新,直到达到最大点。我们还可以通过角度确认数字。然后,我们使用 Timer 将值最小化,并更改 UI 直到其恢复到原始位置。

UI 状态由 Dot Provider 处理。


点动画

dotsGif

有关点动画,您可以查看 anim_tester.dart


文本动画

textAnimate


还可以应用不同的方法,例如仅使用 CustomPainter 来完成大部分工作。最佳方法是使用图像。数字检测可以处理 touchPoint + radius。可以通过计算角度来改进旋转方向。我为用户提供了更大的灵活性?。

但是对于轮子,用图像很容易做到。另外,绘画制作网站也可以帮助在短时间内制作出这种形状。
出于测试和未来使用的目的,包含了一些不必要的方法。

GitHub

https://github.com/yeasin50/Rotary_phone_lock