Kivy - 触摸涟漪效果

在 Kivy 框架中，“触摸涟漪效果”并非一个真正的组件或具体的类。相反，TouchRippleBehavior 混合器将触摸涟漪的视觉效果添加到布局或单个组件。通常，Kivy 具有默认的按下/释放可视化效果。此类添加了来自 Google Material Design 的涟漪效果。

此混合器类在“kivy.uix.behaviors.touchripple”模块中定义。

from kivy.uix.behaviors.touchripple import TouchRippleBehavior

涟漪行为不会自动触发。具体的类需要实现此行为混合器并显式调用 ripple_show() 和 ripple_fade() 方法。

要自定义涟漪效果，请使用以下属性：

• ripple_duration_in - 显示叠加层所需的动画持续时间。它是一个 NumericProperty，默认为 0.5。

• ripple_duration_out - 一个 NumericProperty，默认为 0.2，设置淡出叠加层所需的动画持续时间。

• ripple_fade_from_alpha - 涟漪颜色动画开始时的 alpha 通道。默认值为 0.5。

• ripple_fade_to_alpha - 涟漪颜色动画的目标 alpha 通道，默认为 0.8。

• ripple_rad_default - 动画开始时的默认半径。它是一个 NumericProperty，默认为 10。

• ripple_scale - 从修饰组件的 max(width/height) 计算出的动画叠加层的最大比例。

• ripple_show() 方法在当前组件上开始涟漪动画。您需要传递一个触摸事件作为参数。

• ripple_fade() 方法用于在当前组件上结束涟漪动画。

• ripple_func_in 和 ripple_funcion_out 是显示和隐藏叠加层的动画回调函数。

示例

在下面的示例中，我们使用了 kv 脚本，它将标签放在网格布局中，并处理 touch_down 和 touch_up 事件。

on_touch_down() 方法调用 ripple_show() 方法以生成持续时间为 3 秒的涟漪效果。

on_touch_up() 方法通过调用 ripple_fade() 方法结束涟漪效果。

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.behaviors.touchripple import TouchRippleBehavior
from kivy.core.window import Window

Window.size = (720,300)

class RippleLabel(TouchRippleBehavior, GridLayout):
   def __init__(self, **kwargs):
      super(RippleLabel, self).__init__(**kwargs)

   def on_touch_down(self, touch):
      collide_point = self.collide_point(touch.x, touch.y)
      if collide_point:
         touch.grab(self)
         self.ripple_duration_in=3
         self.ripple_show(touch)
         return True
      return False

   def on_touch_up(self, touch):
      if touch.grab_current is self:
         touch.ungrab(self)
         self.ripple_duration_out=3
         self.ripple_fade()
         return True
      return False

class MyRippleApp(App):
   def build(self):
      return RippleLabel(cols=1)

MyRippleApp().run()

“kv”脚本：

<RippleLabel>:
   GridLayout:
      cols:1
      Label:
         size:(root.width, root.height)
         pos_hint:{'center_x':.5, 'center_y':.5}
         
         text:'OK'
         font_size:100
         color:(1,0,0,1)

输出

运行程序并点击“OK”标签。它将在窗口表面产生涟漪波纹。增加持续时间以查看效果。