网站建设精美模板,阜阳城乡建设局网站,如何介绍网站模板下载,上海网站建设机构利用属性动画、显示动画、组件转场动画实现组件动画效果。 一、属性动画
属性动画是通过设置组件的 animation 属性来给组件添加动画#xff0c;当组件的 width、height、Opacity、backgroundColor、scale、rotate、translate 等属性变更时#xff0c;可以实现渐变过渡效果。… 利用属性动画、显示动画、组件转场动画实现组件动画效果。 一、属性动画
属性动画是通过设置组件的 animation 属性来给组件添加动画当组件的 width、height、Opacity、backgroundColor、scale、rotate、translate 等属性变更时可以实现渐变过渡效果。
以 Image 组件为例给它添加动画其实就是给它添加 animation 的属性
Image($r(app.media.app_icon)).position({x: 10, // x轴坐标y: 10 // y轴坐标}).rotate({angle: 0, // 旋转角度centerX: 50%, // 旋转中心横坐标centerY: 50% // 旋转中心纵坐标}).animation({duration: 1000,curve: Curve.EaseInOut})这时ArkUI 就能帮我们监控组件的样式变化我们只需要在与用户互动的事件当中去修改组件的样式ArkUI 一旦发现组件的样式变化就会自动填充起始样式和结束样式之间的每一帧画面从而实现样式变化的渐变过渡效果。所以一个动画就出来了。 注意 animation 属性一定要放在需要有动画属性的样式之后。就像上面的实例代码animation 要放在 position 和 rotate 之后。如果把 animation 放在前面然后再写 position 和 rotate那么这俩就不会有任何的变化。 animation 属性不是对所有样式都有效。 animation 可以传递的动画参数
名称参数类型必填描述durationnumber否设置动画时长。默认值1000单位毫秒temponumber否动画播放速度。数值越大速度越快。默认值1curveCurve否设置动画曲线。默认值Curve.EaseInOut平滑开始和结束。delaynumber否设置动画延迟执行的时长。默认值0单位毫秒iterationsnumber否设置播放次数。默认值1取值范围[-1, ∞)说明设置为 -1 时表示无限次播放。playModePlayMode否设置动画播放模式默认播放完成后重头开始播放。默认值PlayMode.NormalonFinish() void否状态回调动画播放完成时触发。
示例代码
Entry
Component
struct Index {State textX: number 10State textY: number 10build() {Column() {Image($r(app.media.app_icon)).position({x: this.textX,y: this.textY}).rotate({angle: 0,centerX: 50%,centerY: 50%}).width(40).height(40).animation({duration: 500})Button(按钮).position({x: 10,y: 100}).onClick(() {this.textX 20})}}
}运行效果
二、显示动画
显示动画是通过全局 animationTo 函数来修改组件属性实现属性变化时的渐变过渡效果。
显示调用 animationTo 函数触发动画
animateTo({ duration: 1000 }, // 动画参数() {// 修改组件属性关联的状态变量})示例代码
Entry
Component
struct Index {State textX: number 10State textY: number 10build() {Column() {Image($r(app.media.app_icon)).position({x: this.textX,y: this.textY}).rotate({angle: 0,centerX: 50%,centerY: 50%}).width(40).height(40)Button(按钮).position({x: 10,y: 100}).onClick(() {animateTo({ duration: 500 },() {this.textX 20})})}}
}三、组件转场动画
组件转场动画是在组件插入或移除时的过渡动画通过组件的 transition 属性来配置。组件插入可以理解为组件从无到有也就是一个入场的过程组件移除可以理解为组件从有到无也就是一个退场的过程。
语法
Image($r(app.media.app_icon)).transition({opacity: 0,rotate: { angle: -360 },scale: { x: 0, y: 0 }})动画参数
参数名称参数类型必填参数描述typeTransistionType否类型默认包含组件新增和删除。默认是 ALLopacitynumber否不透明度为插入时起点和删除时终点的值。默认值1取值范围[0, 1]translate{ x?: number或string, y?: number或string, z?: number或string}否平移效果为插入时起点和删除时终点的值。-x: 横向的平移距离。-y: 纵向的平移距离。-z: 竖向的平移距离。scale{ x?: number, y?: number, z?: number, centerX?: number或string, centerY?: number或string}否缩放效果为插入时起点和删除时终点的值。-x: 横向放大倍数或缩小比例。-y: 纵向放大倍数或缩小比例。-z: 当前为二维显示该参数无效。 -centerX、centerY 指缩放中心点centerX和centerY默认值是50%。-中心点为0时默认的是组件的左上角。rotate{ x?: number, y?: number, z?: number, angle: number或string, centerX?: number或string, centerY?: number或string}否旋转效果angle 是旋转角度其它参数与 scale 类似。 注意transition 要结合 animateTo 去使用。 示例代码
Entry
Component
struct Index {State isBegin: boolean falsebuild() {Column() {if (this.isBegin) {Image($r(app.media.app_icon)).position({x: 10,y: 10}).width(100).height(100).transition({type: TransitionType.Insert,opacity: 0,translate: { x: -100 }})}Button(按钮).position({x: 10,y: 200}).onClick(() {animateTo({ duration: 1000 },() {this.isBegin true})})}}
}运行效果
