电子商务网站建设项目范围,服务器上如何建设多个网站,上海微信网站设计制作,冒用网站备案号建设网站HarmonyOS ArkUI 属性动画入门详解 前言属性动画是什么#xff1f;我们借助官方的话来说#xff0c;我们自己简单归纳下 参数解释举个例子旋转动画 位移动画组合动画总结 前言
鸿蒙OS最近吹的很凶#xff0c;赶紧卷一下。学习过程中发现很多人吐槽官方属性动画这一章比较敷… HarmonyOS ArkUI 属性动画入门详解 前言属性动画是什么我们借助官方的话来说我们自己简单归纳下 参数解释举个例子旋转动画 位移动画组合动画总结 前言
鸿蒙OS最近吹的很凶赶紧卷一下。学习过程中发现很多人吐槽官方属性动画这一章比较敷衍我第一遍也看的半懂不懂的所以就有了这篇文章在官方的介绍基础上补充了自己的理解
属性动画是什么
我们借助官方的话来说
属性动画是最为基础的动画其功能强大、使用场景多应用范围较广。常用于如下场景中
一、页面布局发生变化。例如添加、删除部分组件元素。 二、页面元素的可见性和位置发生变化。例如显示或者隐藏部分元素或者将部分元素从一端移动到另外一端。 三、页面中图形图片元素动起来。例如使页面中的静态图片动起来。 简单来说属性动画是组件的通用属性发生改变时而产生的属性渐变效果。如下图所示其原理是当组件的通用属性发生改变时组件状态由初始状态逐渐变为结束状态的过程中会创建多个连续的中间状态逐帧播放后就会形成属性渐变效果从而形成动画。 属性动画的使用方式也非常简单只需要给组件包括基础组件和容器组件添加animation属性并设置好参数如下代码所示
Image($r(app.media.image1)) .animation({ duration: 1000, tempo: 1.0, delay: 0, curve: Curve.Linear, playMode: PlayMode.Normal, iterations: 1 })别急哈等你把上面这个代码贴上去你就会发现上例代码并没有动画这是因为 1、animation属性作用域。animation自身也是组件的一个属性其作用域为animation之前。即产生属性动画的属性须在animation之前声明其后声明的将不会产生属性动画。以示例中的五个图标动画为例我们期望产生动画的属性为Image组件的width属性故该属性width需在animation属性之前声明。如果将该属性width在animation之后声明则不会产生动画效果。 2、产生属性动画的属性变化时需触发UI状态更新。在上面的示例中因为缺少产生动画的属性所以并不会有动画 3、产生属性动画的属性本身需满足一定的要求并非任何属性都可以产生属性动画。目前支持的属性包括width、height、position、opacity、backgroundColor、scale、rotate、translate等 我们自己简单归纳下 属性动画 属性 a n i m a t i o n 属性作用域 属性动画 属性 animation 属性作用域 属性动画属性animation属性作用域
这个属性就是目前支持的width、height、position、opacity、backgroundColor、scale、rotate、translate等
参数解释
属性名称属性类型默认值描述durationnumber1000动画时长单位为毫秒默认时长为1000毫秒。temponumber1.0动画的播放速度值越大动画播放越快值越小播放越慢为0时无动画效果。curveCurveCurve.Linear动画变化曲线默认曲线为线性。delaynumber0延时播放时间单位为毫秒默认不延时播放。iterationsnumber1播放次数默认一次设置为-1时表示无限次播放。playModePlayModePlayMode.Normal设置动画播放模式默认播放完成后重头开始播放。onFinishfunction-动画播放结束时回调该函数。
其中变化曲线curve枚举值为
名称描述Linear表示动画从头到尾的速度都是相同的。Ease表示动画以低速开始然后加快在结束前变慢CubicBezier(0.25, 0.1, 0.25, 1.0)。EaseIn表示动画以低速开始CubicBezier(0.42, 0.0, 1.0, 1.0)。EaseOut表示动画以低速结束CubicBezier(0.0, 0.0, 0.58, 1.0)。EaseInOut表示动画以低速开始和结束CubicBezier(0.42, 0.0, 0.58, 1.0)。FastOutSlowIn标准曲线cubic-bezier(0.4, 0.0, 0.2, 1.0)。LinearOutSlowIn减速曲线cubic-bezier(0.0, 0.0, 0.2, 1.0)。FastOutLinearIn加速曲线cubic-bezier(0.4, 0.0, 1.0, 1.0)。ExtremeDeceleration急缓曲线cubic-bezier(0.0, 0.0, 0.0, 1.0)。Sharp锐利曲线cubic-bezier(0.33, 0.0, 0.67, 1.0)。Rhythm节奏曲线cubic-bezier(0.7, 0.0, 0.2, 1.0)。Smooth平滑曲线cubic-bezier(0.4, 0.0, 0.4, 1.0)。Friction阻尼曲线CubicBezier(0.2, 0.0, 0.2, 1.0)。
人话解释相同时间结果相同不同的过程
播放模式playMode枚举值为
名称描述Normal动画按正常播放。Reverse动画反向播放。Alternate动画在奇数次1、3、5…正向播放在偶数次2、4、6…反向播放。AlternateReverse动画在奇数次1、3、5…反向播放在偶数次2、4、6…正向播放。 注意onFinish回调函数与参数iterations有关。当参数iterations播放结束时会调用onFinish函数来进行后续的业务处理。而当iterations设置为-1时表示无限次播放则onFinish回调函数不会被调用。 举个例子
旋转动画
State rotateAngle : number 0
...Text(旋转动画)Row(){Button(旋转动画开始,{type: ButtonType.Capsule,stateEffect:true}).onClick((){this.rotateAngle 360})Image($r(app.media.loading)).width(100).height(100).rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle }).animation({duration: 2000,tempo: 1.0,delay: 0,curve: Curve.Linear,playMode: PlayMode.Normal,iterations: -1})}.height(30%).width(100%).backgroundColor(Color.Green)上例可以看到添加了rotate旋转作用域和animation作用域并通过rotateAngle 状态的改变控制了动画的开始效果如下
位移动画 State xState : number 0State yState : number 0
...Text(位移动画)Row(){Text(HarmonyOS).width(200).height(100).fontColor(Color.Blue).fontSize(30).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial).margin(100).position({x: this.xState,y:this.yState}).animation({duration: 1000,tempo: 1.0,delay: 0,curve: Curve.Linear,playMode: PlayMode.Normal,iterations: 1,onFinish:(){if ( this.xState 0) {this.xState 100this.yState 100}else {this.xState 0this.yState 0}}})}.height(30%).width(100%).backgroundColor(Color.Yellow)上例我们可以看到通过设置position和animation实现了位移动画并且在其到达指定路径的onFinish回调中重新设置了xState 和yState 以达到一种另类的永久动画效果。运行效果如下
组合动画
并不是一次只能加一个属性也可以多个一起加 State watermelonRotateAngle : number 0State width : number 50State height : number 50...Text(组合动画)Row(){Button(组合动画开始,{type: ButtonType.Capsule,stateEffect:true}).onClick((){this.watermelonRotateAngle 360this.width 100this.height 100})Image($r(app.media.watermelon)).width(this.width).height(this.height).rotate({ x: 0, y: 0, z: 1, angle: this.watermelonRotateAngle }).animation({duration: 2000,tempo: 1.0,delay: 0,curve: Curve.Linear,playMode: PlayMode.Normal,iterations: -1})}.height(40%).width(100%).backgroundColor(Color.Orange)
上面我们有三个属性动画分别是width height和 rotate效果如下 总结
参考HarmonyOS第一课 教程跟以前比来说丰富了很多也比较系统。所以博主只会在比官方现在教程比较笼统或自己觉得理解比较晦涩的地方进行单篇输出不会像Compose一样边学变更新了。如果对Compose有兴趣可以看看我的Jetpack Compose入门详解实时更新
吐槽一下官方文档属性动画文档写的是真的敷衍给人一种我都讲了你不懂是你的事情的感觉当然可能是我比较菜
