Kivy 简明教程

Kivy - Touch Ripple

在 Kivy 框架中,“触摸波纹”实际上并不是一个组件或任何具体类。相反,TouchRippleBehavior mixin 将触摸波纹视觉效果添加到布局或单个组件。通常,Kivy 具有默认的按下/释放可视化效果。这个类添加了 Google Material Design 的波纹效果。

这个 mixin 类在“kivy.uix.behaviors.touchripple”模块中定义。

from kivy.uix.behaviors.touchripple import TouchRippleBehavior

波纹行为不会自动触发。一个具体类需要实现这个行为 mixin,并手动显式调用 respective ripple_show() 和 ripple_fade() 方法。

要自定义波纹效果,请使用以下属性:

  1. ripple_duration_in - 显示覆盖层所需的动画持续时间。它是一个 NumericProperty,默认值为 0.5。

  2. ripple_duration_out - 一个 NumericProperty,默认值为 0.2,用于设置使覆盖层淡出的动画持续时间。

  3. ripple_fade_from_alpha - 动画开始时的波纹颜色透明度通道。默认值为 0.5。

  4. ripple_fade_to_alpha - 动画的目标波纹颜色透明度通道,默认值为 0.8。

  5. ripple_rad_default - 动画开始时的默认半径。它是一个 NumericProperty,默认值为 10。

  6. ripple_scale - 动画覆盖层的最大缩放比,按装饰组件的 max(width/height) 计算得出。

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

  8. 调用 ripple_fade() 方法来结束当前组件上的波纹动画。

  9. ripple_func_inripple_funcion_out 是用于显示和隐藏覆盖层的动画回调。

Example

在以下示例中,我们使用将一个标签放在网格布局中的 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)

Output

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

kivy touch ripple