组件/视觉效果

EAnimation 动画

import EUI 1.0

示例与代码

选择效果，一行调用

QML 代码QML

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("播放动画") onClicked: EAnimation.play(animationCard, "bounce") } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

预览抖动反馈

QML 代码QML

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("点击下方按钮预览抖动反馈") } EButton { text: qsTr("预览抖动反馈") onClicked: EAnimation.play(input, "shake") } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

点击按钮预览脉冲

QML 代码QML

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("点击按钮预览脉冲") onClicked: EAnimation.play(button, "pulse") }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

淡入与淡出

QML 代码QML

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") } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

在布局中滑入

QML 代码QML

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("在布局中滑入") onClicked: EAnimation.play(button, "slideInUp", { duration: 500, distance: 32 }) } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

effectsQStringList只读

可传入 play(target, effect, options) 的效果名称；通过 stop(target) 停止并恢复。

默认值83 个预设：淡入淡出、滑入滑出、缩放、旋转与滚动、弹跳、翻转、强调与反馈、快速倾斜滑动。完整名称通过 EAnimation.effects 获取。

方法

签名作用

stop(target)

停止 target 上由 EAnimation 启动的动画，并恢复动画前的显示状态；返回是否停止了动画。

play(target, effect, options)

在 target 上播放 effect 指定的动画，options 配置时长、延迟等选项；返回是否成功启动。