HarmonyOS- 基于ArkUI(eTs)实现猫头鹰动画 原创 精华
作者:范颖
前言
因为工作原因,后面我可能会接触到基于TS扩展的声明是开发范式,因此我需要提前学习关于ets的内容。在学习了一段时间之后,我决定用ets来画一只猫头鹰,看看ets跟我之前掌握的知识有何不同,在什么地方需要值得注意。
参考文档
效果展示
实现功能
功能的话有两个,一个是翅膀的挥动动画,还有一个是根据点击屏幕,眼球会根据点击屏幕的方位进行移动。
实现思路
1. 画出静态的猫头鹰
上面代码的效果如下:
position({x:lenth,y:length}): position代表的是css中的绝对定位,x类似于top属性,y类似于left属性,x与y相对于父容器的位置。
offset({x:length,y:length}): offset代表的是css中的相对定位,x与y代表坐标偏移量
rotate({x:number,y:number,z:number,angle:angle,centerX:centerX,centerY:centerY}): x,y,z属性决定了旋转的轴,angle代表旋转的角度,正数为顺时针,复数为逆时针,centerX与centerY是旋转的中心点。
2. 实现翅膀的挥动
这个可以利用api中的动画属性,我利用显式动画来实现这一效果:
接口名称 | 功能描述 |
---|---|
animateTo(value: AnimationOptions, event: ()=> void) : void | 提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。event指定显示动效的闭包函数,在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
给翅膀加上挥动的动画
onAppear: 动画效果由它来触发。
animateTo({duration:number,curve:curve,iterations:number,playMode:playMode}): duration单位是毫秒,代表动画持续的时间;curve代表的是动画播放的速度,Curve.Linear为匀速播放;iteration是播放的次数,-1代表无限次播放;playMode.Alternate表示需要播放返回的动画。animateTo还有delay的属性,表示延迟播放动画,还有tempo,表示播放的速率。
3. 眼球移动的效果
该效果在pc端本来是用mouseMove事件实现的,考虑到手机上没有鼠标,我就将这个效果改成用触摸屏幕来触发事件了。
其中if中的语句是判断触摸的坐标是否超过了容器的范围,如果超过了就不会触发touch事件。
总结
我在写代码的途中也发现了一个问题,目前我没有找到解决方法,在设置borderRadius的样式中,我发现borderRadius只能设置一个值,这就意味着这个组件的边框四个角都会变成相同的圆角,假如我想只让一个角变成圆角的话,该如何设置呢?在css中用border-radius可以轻松地设置不同的圆角,比如:border-radius:10px 10px 20px 30px;ets中也能这样设置吗?
以上就是本次分享的全部内容,本次实现的效果很简单,也是我学习ets相关内容的一个脚印。后面我会提供更优质的内容跟大家分享,欢迎大家在评论区给出宝贵的意见。
更多原创内容请关注:中软国际 HarmonyOS 技术团队
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
加了眼球移动后的小动物变得更加可爱了。
大佬和我的差距从练手开始
挥翅膀和眼球做的确实好
是吧是吧,好可爱的猫头鹰
对这种很萌的动画没有抵抗力
好可爱的猫头鹰,学习一下