网站开发ceac证,襄汾网站建设,网络设计课,wordpress聊天室模板概述
动画的原理是在一个时间段内#xff0c;多次改变UI外观#xff0c;由于人眼会产生视觉暂留#xff0c;所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧#xff0c;对应一次屏幕刷新#xff0c;而决定动画流畅度的一个重要指标就是帧率FPS#x…概述
动画的原理是在一个时间段内多次改变UI外观由于人眼会产生视觉暂留所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧对应一次屏幕刷新而决定动画流畅度的一个重要指标就是帧率FPSFrame Per Second即每秒的动画帧数帧率越高则动画就会越流畅。
ArkUI中产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律即曲线等参数。当属性值发生变化后按照动画参数从原来的状态过渡到新的状态即形成一个动画。 布局更新动画
显式动画animateTo和属性动画animation是ArkUI提供的最基础和常用的动画功能。在布局属性如尺寸属性、位置属性发生变化时可以通过属性动画或显式动画按照动画参数过渡到新的布局参数状态。 动画类型
显式动画
闭包内的变化均会触发动画包括由数据变化引起的组件的增删、组件属性的变化等可以做较为复杂的动画。
属性动画
动画设置简单属性变化时自动触发动画。 使用显式动画产生布局更新动画
显式动画的接口为
animateTo(value: AnimateParam, event: () void): void第一个参数指定动画参数 第二个参数为动画的闭包函数
以下是使用显式动画产生布局更新动画的示例。示例中当Column组件的alignItems属性改变后其子组件的布局位置结果发生变化。只要该属性是在animateTo的闭包函数中修改的那么由其引起的所有变化都会按照animateTo的动画参数执行动画过渡到终点值。
Entry
Component
struct LayoutChange {// 用于控制Column的alignItems属性State itemAlign: HorizontalAlign HorizontalAlign.Start;allAlign: HorizontalAlign[] [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End];alignIndex: number 0;build() {Column() {Column({ space: 10 }) {Button(1).width(100).height(50)Button(2).width(100).height(50)Button(3).width(100).height(50)}.margin(20).alignItems(this.itemAlign).borderWidth(2).width(90%).height(200)Button(click).onClick(() {// 动画时长为1000ms曲线为EaseInOutanimateTo({ duration: 1000, curve: Curve.EaseInOut }, () {this.alignIndex (this.alignIndex 1) % this.allAlign.length;// 在闭包函数中修改this.itemAlign参数使Column容器内部孩子的布局方式变化使用动画过渡到新位置this.itemAlign this.allAlign[this.alignIndex];});})}.width(100%).height(100%)}
}效果 除直接改变布局方式外也可直接修改组件的宽、高、位置。
Entry
Component
struct LayoutChange2 {State myWidth: number 100;State myHeight: number 50;// 标志位true和false分别对应一组myWidth、myHeight值State flag: boolean false;build() {Column({ space: 10 }) {Button(text).type(ButtonType.Normal).width(this.myWidth).height(this.myHeight).margin(20)Button(area: click me).fontSize(12).margin(20).onClick(() {animateTo({ duration: 1000, curve: Curve.Ease }, () {// 动画闭包中根据标志位改变控制第一个Button宽高的状态变量使第一个Button做宽高动画if (this.flag) {this.myWidth 100;this.myHeight 50;} else {this.myWidth 200;this.myHeight 100;}this.flag !this.flag;});})}.width(100%).height(100%)}
}在第二个Button的点击事件中使用animateTo函数在闭包中修改this.myWidth和this.myHeight状态变量而这两个状态变量分别为第一个Button的宽、高属性值所以第一个Button做了宽高动画。效果如下图。 另一种方式是给第二个Button添加布局约束如position的位置约束使其位置不被第一个Button的宽高影响。核心代码如下
Column({ space: 10 }) {Button(text).type(ButtonType.Normal).width(this.myWidth).height(this.myHeight).margin(20)Button(area: click me).fontSize(12)// 配置position属性固定使自己的布局位置不被第一个Button的宽高影响.position({ x: 30%, y: 200 }).onClick(() {animateTo({ duration: 1000, curve: Curve.Ease }, () {// 动画闭包中根据标志位改变控制第一个Button宽高的状态变量使第一个Button做宽高动画if (this.flag) {this.myWidth 100;this.myHeight 50;} else {this.myWidth 200;this.myHeight 100;}this.flag !this.flag;});})
}
.width(100%)
.height(100%)使用属性动画产生布局更新动画
显式动画把要执行动画的属性的修改放在闭包函数中触发动画而属性动画则无需使用闭包把animation属性加在要做属性动画的组件的属性后即可。
属性动画的接口为
animation(value: AnimateParam)其入参为动画参数。想要组件随某个属性值的变化而产生动画此属性需要加在animation属性之前。有的属性变化不希望通过animation产生属性动画可以放在animation之后。上面显式动画的示例很容易改为用属性动画实现。例如
Entry
Component
struct LayoutChange2 {State myWidth: number 100;State myHeight: number 50;State flag: boolean false;State myColor: Color Color.Blue;build() {Column({ space: 10 }) {Button(text).type(ButtonType.Normal).width(this.myWidth).height(this.myHeight)// animation只对其上面的type、width、height属性生效时长为1000ms曲线为Ease.animation({ duration: 1000, curve: Curve.Ease })// animation对下面的backgroundColor、margin属性不生效.backgroundColor(this.myColor).margin(20)Button(area: click me).fontSize(12).onClick(() {// 改变属性值配置了属性动画的属性会进行动画过渡if (this.flag) {this.myWidth 100;this.myHeight 50;this.myColor Color.Blue;} else {this.myWidth 200;this.myHeight 100;this.myColor Color.Pink;}this.flag !this.flag;})}}
}上述示例中第一个button上的animation属性只对写在animation之前的type、width、height属性生效而对写在animation之后的backgroundColor、margin属性无效。运行结果是width、height属性会按照animation的动画参数执行动画而backgroundColor会直接跳变不会产生动画。效果如下图
说明 使用属性动画时会按照指定的属性动画参数执行动画。每个组件可为自己的属性配置不同参数的属性动画。 显式动画会对动画闭包前后造成的所有界面差异执行动画且使用同一动画参数适用于统一执行的场景。此外显式动画也可以用于一些非属性变量造成的动画如if/else的条件ForEach使用的数组元素的删减。 如果一个属性配置了属性动画且在显式动画闭包中改变该属性值属性动画优先生效会使用属性动画的动画参数。
