Components/Visual effects

EAnimation Animation

import EUI 1.0

Examples

Choose an effect, call it in one line

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: 320 spacing: 16 Rectangle { id: animationCard radius: 12 width: 220 height: 100 color: "#409eff" } EButton { text: qsTr("Play animation") onClicked: EAnimation.play(animationCard, "bounce") } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Preview shake feedback

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: 320 spacing: 16 EInput { id: input width: parent.width placeholderText: qsTr("Click below to preview shake feedback") } EButton { text: qsTr("Preview shake feedback") onClicked: EAnimation.play(input, "shake") } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Click to preview a pulse

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EButton { id: button styleType: EStyle.Primary text: qsTr("Click to preview a pulse") onClicked: EAnimation.play(button, "pulse") }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Fade in and out

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: 320 spacing: 16 EText { id: label text: "EUI Animation" } Row { spacing: 12 EButton { text: "fadeOut" onClicked: EAnimation.play(label, "fadeOut") } EButton { text: "fadeIn" onClicked: EAnimation.play(label, "fadeIn") } } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Slide within a layout

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Item { width: 320 height: 140 EButton { id: button anchors.centerIn: parent text: qsTr("Slide within a layout") onClicked: EAnimation.play(button, "slideInUp", { duration: 500, distance: 32 }) } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

effectsQStringListRead only

Effect names accepted by play(target, effect, options); stop(target) stops and restores the target.

Default

Show default value

83 presets: fade, slide, scale and zoom, rotate and roll, bounce, flip, attention and feedback, and light speed. Read EAnimation.effects for all names.

Methods

SignaturePurpose

stop(target)

Stop animations started by EAnimation on target and restore its previous appearance; return whether an animation was stopped.

play(target, effect, options)

Play effect on target using options such as duration and delay; return whether the animation starts successfully.