Animation

The change from one value to another value of many layer properties can be animated. This is handled by the the merz.objects.base.Base.propertyGroup() context manager:

layer = container.appendBaseSublayer(
    position=(0, 0),
    size=(450, 100),
    backgroundColor=(1, 0, 0, 1),
    borderColor=(0, 0, 1, 1),
    borderWidth=10
)
with layer.propertyGroup(
        duration=4
    ):
    layer.setPosition((100, 100))
    layer.setBackgroundColor((0, 0, 1, 1))
    layer.setBorderColor((1, 0, 0, 1))
    layer.setBorderWidth(20)

Animations can be started by user interaction, timers, events and more. For example, this will start an animation when the button is pressed:

import vanilla
import merz

class MerzDemo:

    def __init__(self):
        self.w = vanilla.Window((530, 150))
        self.merzView = merz.MerzView(
            "auto",
            backgroundColor=(1, 1, 1, 1)
        )
        self.button = vanilla.Button(
            "auto",
            "Animate",
            callback=self.buttonCallback
        )
        self.w.stack = vanilla.VerticalStackView(
            (0, 0, 0, 0),
            views=[
                dict(
                    view=self.merzView,
                    height=200
                ),
                dict(
                    view=self.button,
                    height=30
                )
            ],
            spacing=10,
            edgeInsets=(15, 15, 15, 15)
        )

        container = self.merzView.getMerzContainer()
        container.appendBaseSublayer(
            position=(50, 50),
            size=(400, 100),
            backgroundColor=(1, 1, 0, 1)
        )
        self.layer = container.appendBaseSublayer(
            position=(0, 0),
            size=(400, 100),
            backgroundColor=(1, 0, 0, 0.75),
            borderColor=(0, 0, 1, 1),
            borderWidth=10
        )

        self.w.open()

    def buttonCallback(self, sender):
        with self.layer.propertyGroup(
                duration=4
            ):
            self.layer.setPosition((100, 100))
            self.layer.setBackgroundColor((0, 0, 1, 0.75))
            self.layer.setBorderColor((0, 0, 1, 1))
            self.layer.setBorderWidth(30)


MerzDemo()

Duration, delay, repeat and more can be specified when starting an animation. Once an animation has started, it can be queried and modified with these methods: