Okay, I want to animate the cards in my app. Because it gets to cluttered to have all the fields and everything in one card. I would like to avoid changing screen, and just animate the card itself. The app is a "register user" - kind of thing. But when I try to animate the cards, the first card (card_1) lurks in the back of everything during the animation. Or rather a copy of it with lower opacity... Can't figure out why he wont leave.
Picture:
.kv file:
<RegisterUser>:
name: "registeruser"
BoxLayout:
canvas.before:
Color:
rgba: 0, 0.3, 0.6, 0.4
Rectangle:
size: self.size
pos: self.pos
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: "Mauri"
right_action_items: [["account", lambda x: root.goto_userlogin()]]
BoxLayout:
FloatLayout:
MDCard:
id: card_2
orientation: 'vertical'
size_hint: [0.9, 0.6]
pos_hint: {"center_x": 1.5, "center_y": 0.5}
BoxLayout:
orientation: 'vertical'
size_hint: [1, 0.1]
MDLabel:
halign: "center"
text: "Registrera 2"
color: 0, 0, 0, 0.8
font_size: "25dp"
bold: True
MDLabel:
halign: "center"
text: "Användare"
color: 0, 0.1, 0.3, 0.8
font_size: "15dp"
BoxLayout:
size_hint: [0.8, 0.1]
pos_hint: {"center_x": 0.5}
MDTextField:
id: email
hint_text: 'Namn'
helper_text_mode: "on_error"
helper_text: "Email Krävs"
pos_hint: {"center_y": 0.5}
mode: "rectangle"
BoxLayout:
size_hint: [0.8, 0.1]
pos_hint: {"center_x": 0.5}
MDTextField:
id: email
hint_text: 'Efternamn'
helper_text_mode: "on_error"
helper_text: "Email Krävs"
pos_hint: {"center_y": 0.5}
mode: "rectangle"
BoxLayout:
size_hint: [0.8, 0.1]
pos_hint: {"center_x": 0.5}
spacing: "20dp"
MDRaisedButton:
id: btn_institution
text: "Välj institution"
on_release: root.show_institutions()
pos_hint: {"center_x": .5, "center_y": .5}
MDLabel:
id: inst_label
color: (0, 0, 0, 1)
BoxLayout:
size_hint: [0.8, 0.1]
pos_hint: {"center_x": 0.5}
spacing: "20dp"
MDTextField:
id: pwd
icon_left: 'key-variant'
hint_text: 'Ålder'
mode: "rectangle"
max_text_length: 2
input_filter: "int"
pos_hint: {"center_y": 0.5}
BoxLayout:
size_hint: [0.8, 0.1]
pos_hint: {"center_x": 0.5}
spacing: "20dp"
MDRaisedButton:
id: btn_sexes
text: "Välj Kön"
on_release: root.show_sexes()
pos_hint: {"center_x": .5, "center_y": .5}
MDLabel:
id: sex_label
color: (0, 0, 0, 1)
BoxLayout:
size_hint: [0.8, 0.1]
pos_hint: {"center_x": 0.5}
MDFillRoundFlatButton:
pos_hint: {"center_x": 0.5}
size_hint: [0.7, 0.5]
text: "Nästa"
font_size: "20dp"
MDCard:
id: card_1
orientation: 'vertical'
size_hint: [0.9, 0.6]
pos_hint: {"center_x": 0.5, "center_y": 0.5}
BoxLayout:
orientation: 'vertical'
size_hint: [1, 0.1]
MDLabel:
halign: "center"
text: "Registrera"
color: 0, 0, 0, 0.8
font_size: "25dp"
bold: True
MDLabel:
halign: "center"
text: "Användare"
color: 0, 0.1, 0.3, 0.8
font_size: "15dp"
BoxLayout:
size_hint: [0.8, 0.1]
pos_hint: {"center_x": 0.5}
MDTextField:
id: email
hint_text: 'Namn'
helper_text_mode: "on_error"
helper_text: "Email Krävs"
pos_hint: {"center_y": 0.5}
mode: "rectangle"
BoxLayout:
size_hint: [0.8, 0.1]
pos_hint: {"center_x": 0.5}
MDTextField:
id: email
hint_text: 'Efternamn'
helper_text_mode: "on_error"
helper_text: "Email Krävs"
pos_hint: {"center_y": 0.5}
mode: "rectangle"
BoxLayout:
size_hint: [0.8, 0.1]
pos_hint: {"center_x": 0.5}
spacing: "20dp"
MDRaisedButton:
id: btn_institution
text: "Välj institution"
on_release: root.show_institutions()
pos_hint: {"center_x": .5, "center_y": .5}
MDLabel:
id: inst_label
color: (0, 0, 0, 1)
BoxLayout:
size_hint: [0.8, 0.1]
pos_hint: {"center_x": 0.5}
spacing: "20dp"
MDTextField:
id: pwd
icon_left: 'key-variant'
hint_text: 'Ålder'
mode: "rectangle"
max_text_length: 2
input_filter: "int"
pos_hint: {"center_y": 0.5}
BoxLayout:
size_hint: [0.8, 0.1]
pos_hint: {"center_x": 0.5}
spacing: "20dp"
MDRaisedButton:
id: btn_sexes
text: "Välj Kön"
on_release: root.show_sexes()
pos_hint: {"center_x": .5, "center_y": .5}
MDLabel:
id: sex_label
color: (0, 0, 0, 1)
BoxLayout:
size_hint: [0.8, 0.1]
pos_hint: {"center_x": 0.5}
MDFillRoundFlatButton:
pos_hint: {"center_x": 0.5}
size_hint: [0.7, 0.5]
text: "Nästa"
font_size: "20dp"
on_release:
root.anim_to_next(card_1, card_2)
BoxLayout:
size_hint: [0.4, 0.1]
.py file:
class RegisterUser(Screen):
def on_enter(self):
self.sql_cursor = app_users.AppUsers()
self.all_inst = self.sql_cursor.fetch_all_institutions()
self.selected_inst = -1
self.selected_sex = -1
def callback_for_inst_items(self, *args):
toast(args[0])
self.ids["inst_label"].text = args[0]
self.selected_inst = args[1]
print(self.selected_inst)
def show_institutions(self):
bottom_sheet_menu = MDListBottomSheet()
for i in range(len(self.all_inst)):
bottom_sheet_menu.add_item(
self.all_inst[i][1].capitalize() + " (" + self.all_inst[i][2] + ")",
lambda x, y=i: self.callback_for_inst_items(
self.all_inst[y][1].capitalize() + " (" + self.all_inst[y][2] + ")", self.all_inst[y][0]
),
)
bottom_sheet_menu.open()
def callback_for_sexes_items(self, *args):
self.ids["sex_label"].text = args[0]
self.selected_sex = args[1]
print(self.selected_sex)
def show_sexes(self):
bottom_sheet_menu = MDListBottomSheet()
sex = ["Man", "Kvinna", "Annat"]
for i in range(3):
bottom_sheet_menu.add_item(
sex[i],
lambda x, y=i: self.callback_for_sexes_items(
sex[y], y
),
)
bottom_sheet_menu.open()
def anim_to_next(self, card_1, card_2):
anim_1_1 = Animation(opacity=0,duration=0.5)
anim_1 = Animation(pos_hint={"center_x": -0.5},duration=0.7)
anim_2 = Animation(pos_hint={"center_x": 0.5})
anim_1_1.start(card_1)
anim_1.start(card_1)
anim_2.start(card_2)
Question:
How to get rid of the "third" (it's the card with id "card_1") that lurks in the background? Why is it there?
