Author Topic: Google's Material Design button click effect  (Read 246 times)

FellippeHeitor

  • QB64 Partner Site Owner
  • Hero Member
  • *
  • Posts: 1606
  • LET IT = BE
    • QB64.org
Google's Material Design button click effect
« on: February 17, 2017, 10:17:09 am »
Code: [Select]
DIM s&, mx, my, clicking AS _BYTE
DIM clickingx, clickingx1, clickingx2, clickinga

s& = _NEWIMAGE(800, 600, 32)
SCREEN s&
_PRINTMODE _KEEPBACKGROUND

TYPE control
    x AS INTEGER
    y AS INTEGER
    w AS INTEGER
    h AS INTEGER
END TYPE

DIM ok AS control
ok.w = 200
ok.h = 23
center ok
COLOR _RGB32(0, 0, 0)

DO
    _LIMIT 60
    CLS , _RGB32(236, 236, 236)
    WHILE _MOUSEINPUT: WEND
    mx = _MOUSEX
    my = _MOUSEY

    IF hovering(ok) OR clicking THEN
        LINE (ok.x, ok.y)-STEP(ok.w - 1, ok.h - 1), _RGBA32(255, 255, 255, 200), BF
        IF _MOUSEBUTTON(1) THEN
            IF clicking = 0 THEN
                clicking = -1
                clickingx = mx
                clickinga = 200
            END IF
        END IF
    ELSE
        'LINE (ok.x, ok.y)-STEP(ok.w - 1, ok.h - 1), _RGBA32(255, 255, 255, 100), BF
    END IF

    IF clicking THEN
        IF clickingx1 = 0 THEN clickingx1 = clickingx
        IF clickingx2 = 0 THEN clickingx2 = clickingx
        LINE (clickingx1, ok.y)-(clickingx2, ok.y + ok.h), _RGBA32(200, 200, 200, clickinga), BF
        clickingx1 = clickingx1 - 5
        IF clickingx1 < ok.x THEN clickingx1 = ok.x
        clickingx2 = clickingx2 + 5
        IF clickingx2 > ok.x + ok.w THEN clickingx2 = ok.x + ok.w
        clickinga = clickinga - 5
        IF (clickingx1 = ok.x AND clickingx2 = ok.x + ok.w) OR clickinga < 0 THEN
            clicking = 0
            clickingx1 = 0
            clickingx2 = 0
        END IF
    END IF
    _TITLE STR$(clicking) + STR$(clickingx) + STR$(clickingx1) + STR$(clickingx1)
    _PRINTSTRING (ok.x + ok.w / 2 - _PRINTWIDTH("OK") / 2, ok.y + ok.h / 2 - _FONTHEIGHT / 2), "OK"

    _DISPLAY
LOOP

FUNCTION hovering (this AS control)
    SHARED mx, my

    IF mx >= this.x AND mx <= this.x + this.w AND my >= this.y AND my <= this.y + this.h THEN hovering = -1
END FUNCTION

SUB center (this AS control)
    centerh this
    centerv this
END SUB

SUB centerh (this AS control)
    this.x = _WIDTH / 2 - this.w / 2
END SUB

SUB centerv (this AS control)
    this.y = _HEIGHT / 2 - this.h / 2
END SUB
« Last Edit: February 17, 2017, 12:48:53 pm by FellippeHeitor »

Ashish

  • Sr. Member
  • ****
  • Posts: 495
  • Eat.... Sleep.... CODE.... Repeat.....
Re: Google's Material Design button click effect
« Reply #1 on: February 18, 2017, 01:00:35 am »
Actually, this is known as ripple effect on button. I've run your code and I found that ripple was not circular.
It was just from left and right side. You can see this type of button here - https://codepen.io/anon/pen/ZLNRGy
if (Me.Success) {Me.Improve();} else {Me.TryAgain();}

aKFrameWork - http://bit.ly/aKFrameWork
p5js.bas - http://bit.ly/p5jsbas
Menu System - http://bit.ly/guiMenuBar

OpenGL Demos - http://bit.ly/openGLdemos