组件/视觉效果引入于 1.3.0

EAnimateOnScroll 滚动动画

import EUI 1.0

示例与代码

滚动进入视口

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: "Scroll down ↓" anchors.centerIn: parent } } EAnimateOnScroll { y: 240 width: 300 height: 100 ERectangle { radius: 8 height: 90 width: 280 color: "#409eff" EText { color: "white" anchors.centerIn: parent text: "Scroll animation" } } } }

效果

运行代码，体验组件交互

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

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

重复进入视口

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: "Scroll down ↓" anchors.centerIn: parent } } EAnimateOnScroll { y: 240 width: 300 height: 100 once: false ERectangle { radius: 8 height: 90 width: 280 color: "#409eff" EText { color: "white" anchors.centerIn: parent text: "Scroll animation" } } } }

效果

运行代码，体验组件交互

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

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

只执行一次

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: "Scroll down ↓" anchors.centerIn: parent } } EAnimateOnScroll { y: 240 once: true width: 300 height: 100 ERectangle { radius: 8 height: 90 width: 280 color: "#409eff" EText { color: "white" anchors.centerIn: parent text: "Scroll animation" } } } }

效果

运行代码，体验组件交互

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

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

自定义视口

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: "Scroll down ↓" anchors.centerIn: parent } } EAnimateOnScroll { y: 240 width: 300 height: 100 viewport: viewport ERectangle { radius: 8 height: 90 width: 280 color: "#409eff" EText { color: "white" anchors.centerIn: parent text: "Scroll animation" } } } }

效果

运行代码，体验组件交互

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

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

滑入效果

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Flickable { id: viewport clip: true width: 340 height: 180 contentHeight: 500 Rectangle { y: 0 width: 320 height: 100 color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: "Scroll down ↓" anchors.centerIn: parent } } EAnimateOnScroll { y: 240 width: 300 height: 100 duration: 600 enterEffect: "slideInUp" ERectangle { radius: 8 height: 90 width: 280 color: "#409eff" EText { color: "white" anchors.centerIn: parent text: "Scroll animation" } } } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

contentalias

内容插槽；直接在组件内部声明 QML 子对象。

默认值body.data

oncebool

仅播放第一次进入视口的动画。

默认值false

distancereal

动画位移距离，单位为像素。

默认值24

durationint

每次进入或离开动画的时长，单位为毫秒。

默认值300

targetItem

接受动画变换的目标控件，默认是内部内容容器。

默认值body

viewportItem

可选视口；同时遵守祖先的裁剪边界。

默认值null

enterEffectstring

进入视口时使用的 EAnimation 效果名称。

默认值"fadeIn"

leaveEffectstring

离开视口时使用的 EAnimation 效果名称。

默认值"fadeOut"

inViewportbool只读

当前是否与可见视口相交。

默认值observer.inViewport

信号

签名作用

exited()

离开可视区域时触发。

entered()

进入可视区域时触发。