深圳网站的优化,seo网络推广有哪些,深圳住房和建设部网站,专业网站设计制作优化排名文章目录 概述注意 动画元素变化的策略Animation on 变化behavior on⽤standalone animation注意 缓冲曲线#xff08;Easing Curves#xff09;动画分组 概述
这⼀章介绍如何控制属性值的变化#xff0c;通过动画的⽅式在⼀段时间内来改变属性值。这项技术是建⽴⼀个现代化… 文章目录 概述注意 动画元素变化的策略Animation on 变化behavior on⽤standalone animation注意 缓冲曲线Easing Curves动画分组 概述
这⼀章介绍如何控制属性值的变化通过动画的⽅式在⼀段时间内来改变属性值。这项技术是建⽴⼀个现代化的平滑界⾯的基础通过使⽤状态和过渡来扩展你的⽤户界⾯。每⼀种状态定义了属性的改变与动画联系起来的状 态改变称作过渡。 一个动画定义了属性改变时的曲线变化 将一个值过渡到另一个值上面 平滑的曲线算法能引发一段时间内的属性的持续变化
注意
动画控制了属性的改变也就是值的插⼊。这是⼀个基本的概念QML是基 于元素属性与脚本的。每⼀个元素都提供了许多的属性每⼀个属性都在 等待使⽤动画。在这本书中你将会看到这是⼀个壮阔的场景你会发现你⾃ ⼰在看⼀些动画时欣赏它们的美丽并且肯定⾃⼰的创造性想法。然后请记 住动画控制了属性的改变每个元素都有⼤量的属性供你任意使⽤。
import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr()Image {source: image/xk.jpganchors.fill: parentImage {x: 40y: 80source: image/pinwheel.pngNumberAnimation on x {to: 240duration: 6000loops: Animation.Infinite}RotationAnimation on rotation {to: 360duration: 6000loops: Animation.Infinite}}}
} 上⾯这个例⼦在x坐标和旋转属性上应⽤了⼀个简单的动画。每⼀次动画持续 4000毫秒并且永久循环。x轴坐标动画展⽰了⽕箭的x坐标逐渐移⾄240旋 转动画展⽰了当前⾓度到360度的旋转。两个动画同时运⾏并且在加载⽤ 户界⾯完成后开始。 现在你可以通过to属性和duration属性来实现动画效果。或者你可以在opacity 或者scale上添加动画作为例⼦集成这两个参数你可以实现⽕箭逐渐消失 在太空中试试吧!
import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr()Image {source: image/xk.jpganchors.fill: parentImage {x: 40y: 80source: image/pinwheel.pngNumberAnimation on x {to: 240duration: 6000loops: Animation.Infinite}NumberAnimation on y {to: 400duration: 6000loops: Animation.Infinite}NumberAnimation on opacity {to: 0.1duration: 6000}RotationAnimation on rotation {to: 360duration: 6000loops: Animation.Infinite}}}
}
加了一些在透明度 和 y轴上的变化 动画效果 会在下落的过程中逐渐透明
动画元素
上面这种类型与 NumberAnimation RotationAnimation 的动画效果有很多其他种类的比如 PropertyAnimation属性动画使⽤属性值改变播放的动画 NumberAnimation数字动画使⽤数字改变播放的动画 ColorAnimation颜⾊动画- 使⽤颜⾊改变播放的动画 旋转动画- 使⽤旋转改变播放的动画 除了上⾯这些基本和通常使⽤的动画元素QtQuick还提供了⼀切特殊场景下 使⽤的动画 PauseAnimation停⽌动画 运⾏暂停⼀个动画 SequentialAnimation顺序动画- 允许动画有序播放 ParallelAnimation并⾏动画- 允许动画同时播放 AnchorAnimation锚定动画- 使⽤锚定改变播放的动画 ParentAnimation⽗元素动画- 使⽤⽗对象改变播放的动画 SmotthedAnimation平滑动画跟踪⼀个平滑值播放的动画 SpringAnimation弹簧动画- 跟踪⼀个弹簧变换的值播放的动画 PathAnimation路径动画- 跟踪⼀个元素对象的路径的动画 Vector3dAnimation3D容器动画 使⽤QVector3d值改变播放的动画 我们将在后⾯学习怎样创建⼀连串的动画。当使⽤更加复杂的动画时我们 可能需要在播放⼀个动画时中改变⼀个属性或者运⾏⼀个脚本。对于这个问 题QtQuick提供了⼀个动作元素 PropertyAction属性动作- 在播放动画时改变属性 ScriptAction脚本动作- 在播放动画时运⾏脚本
变化的策略
这部分定义了 什么情况下会触发一部分动画 如何启动动画的三种策略
Animation on 变化
第⼀个⽕箭使⽤了Animation on 属性变化的策略来完成。动画会在加载完成 后⽴即播放。
import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr()Image {source: image/xk.jpganchors.fill: parentImage {id: im1x: 40y: 80width: 200height: 200source: image/yzfc.pngNumberAnimation on x {to: 241duration: 6000loops: Animation.Infinite}}}
}
平滑的移动
behavior on
使⽤了behavior on 属性⾏为策略的动画。这个⾏为告诉属性值每 时每刻都在变化通过动画的⽅式来改变这个值。可以使⽤⾏为元素的 enabled : false来设置⾏为失效。 当on 后面的哪个属性发生变化的时候 我们选择如何跳转到这种变化
import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr()Image {source: image/xk.jpganchors.fill: parentImage {id: im1x: 40y: 80width: 200height: 200source: image/yzfc.pngBehavior on x {NumberAnimation {duration: 4000}}MouseArea {anchors.fill: parentonClicked: {console.log(触发鼠标事件 当前位置 im1.x)var ne 40 Math.random() * (600 - 40)im1.x neconsole.log(触发鼠标事件 改变后位置 ne)}}}}
}
⽤standalone animation
使⽤standalone animation独⽴动画策略。这个动画由⼀个私有的元素定义并且可以写在⽂档的任何地⽅。点击⽕箭调⽤动画函数start()来启动动画。每⼀个动画都有start()stop()resume()restart()函数。这个动画⾃⾝可以⽐其他类型的动画更早的获取到更多的相关信息。我们只需要定义目标和标元素的属性需要怎样改变的⼀个动画。我们定义⼀个to属性的值在这个例⼦中我们也定义了⼀个from属性的值允许动画可以重复运⾏。点击背景能够重新设置所有的⽕箭回到它们的初始位置。第⼀个⽕箭⽆法被重置只有重启程序重新加载元素才能重置它。
注意
另⼀个启动/停⽌⼀个动画的⽅法是绑定⼀个动画的running属性。当需要⽤ 户输⼊控制属性时这种⽅法⾮常有⽤
import QtQuick 2.9
import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr()Image {source: image/xk.jpganchors.fill: parentImage {id: im1x: 40y: 80width: 200height: 200source: image/yzfc.pngNumberAnimation {id: animtarget: im1properties: xfrom: 40to: 400duration: 4000}MouseArea {anchors.fill: parentonClicked: {anim.start()}}}}
}
缓冲曲线Easing Curves
表示动画变化的速度类型 easing.type的类型 可以在qt 里查看文档 有多少中可用的变化类型 这边说明 至少要设置一个缓冲曲线的类型
easing.amplitude 仅适用于弹跳曲线和弹性曲线Easing.InBounce、Easing.OutBounce、Easing.InOutBounce、Easing.OutInBounce、Easing.InElastic、Easing.OutElastic、Easing.InOutElastic 或 Easing.OutInElastic 类型的曲线 用于调整震动的幅度easing.overshoot 是 QML 动画系统中用于控制缓动曲线过冲量的属性。通过调整该属性的值可以改变动画在达到目标值后的行为从而创造出不同的视觉效果。easing.period 仅当 easing.type 为Easing.InElastic、Easing.OutElastic、Easing.InOutElastic 或 Easing.OutInElastic 时easing.period 才适用 easing.period 在 QML 动画系统中的作用主要是用于定义某些缓动曲线类型的周期。具体来说这个属性对于具有周期性行为的缓动曲线如某些自定义的周期性缓动曲线非常重要。以下是关于 easing.period 的详细解释
定义 easing.period 是一个实数real属性用于指定缓动曲线的周期。 作用 周期控制easing.period 决定了缓动曲线在动画过程中重复自身模式的频率。较高的值意味着较长的周期即缓动曲线的模式会在更长的时间内重复而较低的值则意味着较短的周期即缓动曲线的模式会在更短的时间内重复。 动画效果通过设置不同的 easing.period 值可以创建出具有不同周期特性的动画效果。例如在周期性缓动曲线中可以通过调整周期来改变动画的平滑度和节奏感。 与其他属性的配合easing.period 通常与 easing.type、easing.amplitude 等其他缓动曲线属性一起使用以创建出复杂而精确的动画效果。
动画分组
这部分看起来有难度 。 用不上暂时不想学习
