了解更多开源请访问：开源基础软件社区https://ost.51cto.com前言由于工作原因，可能会接触到后面基于TS扩展语句的开发范式，所以需要提前了解一下ets。学习了一段时间，决定用ets画猫头鹰，看看ets和我以前的知识有什么不同，需要注意的地方。效果展示功能实现有两种方式，一种是翅膀的挥动动画，一种是基于点击屏幕，眼球会根据点击屏幕的方向移动。现实思路1、画出安静状态的猫头鹰@Entry@ComponentstructIndex{//@Statemessage:string='HelloWorld'//@Statetitle:string="一只猫头鹰"@Stateangle1:number=40@Stateangle2:number=-40@StatecurrentX:number=20@StatecurrentY:number=20build(){Column(){Column(){//Text(this.title).fontSize(30)}.width('100%').height(50)Column(){Column(){//眼睛Column(){Column(){}.width(40).height(40).position({x:this.currentX,y:this.currentY}).borderRadius(20).backgroundColor('block')}.width(80).height(80).backgroundColor('#fff').position({x:30,y:50}).borderRadius(40)Column(){Column(){}.width(40).height(40).position({x:this.currentX,y:this.currentY}).borderRadius(20).backgroundColor('块')}.width(80).height(80).backgroundColor('#fff').position({x:140,y:50}).borderRadius(40)//嘴柱(){Flex({justifyContent:FlexAlign.Center}){多边形({width:38,height:22}).points([[0,0],[38,0],[19,22]]).fill('#e27326')}}.position({x:0,y:108})Column(){}.width(160).height(100).backgroundColor('#f3cc74').borderRadius(96).position({x:45,y:139})}.width(250).height(240).backgroundColor('#f2b22e').offset({x:0,y:80}).borderRadius(150).zIndex(2)//角Column(){}.width(100).height(80).backgroundColor('#f2b22e').borderRadius(10).position({x:50,y:100}).rotate({x:0,y:0,z:1,centerX:'50%',centerY:'50%',angle:100})Column(){}.width(100).height(80).backgroundColor('#f2b22e').borderRadius(10).position({x:200,y:100}).rotate({x:0,y:0,z:1,centerX:'50%',centerY:'50%',angle:-100})//左翼翼Column(){}.width(40).height(100).backgroundColor('#f2b22e').position({x:40,y:160}).rotate({x:0,y:0,z:1,centerX:'50%',centerY:'50%',angle:this.angle1}).borderRadius(50)列n(){}.width(40).height(100).backgroundColor('#f2b22e').position({x:265,y:160}).rotate({x:0,y:0,z:1,centerX:'50%',centerY:'50%',angle:this.angle2}).borderRadius(50)}.width(350).height(400).backgroundColor('#f1f3f5')}}}上面代码的效果如下：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提供了全局animateTodisplay一个动画接口，用于指定由闭包代码引起的状态变化来插入过渡动画.event指定显示动画效果的闭包函数，由闭包函数引起的状态改变系统会自动插入过渡动画。为翅膀添加挥动动画。//左右翼Column(){}.onAppear(()=>{animateTo({duration:300,curve:Curve.Linear,iterations:-1,playMode:PlayMode.Alternate},()=>{this.angle1=100})}).width(40).height(100).backgroundColor('#f2b22e').position({x:40,y:160}).rotate({x:0,y:0,z:1,centerX:'50%',centerY:'50%',angle:this.angle1}).borderRadius(50)Column(){}.onAppear(()=>{animateTo({duration:300,曲线:Curve.Linear,iterations:-1,playMode:PlayMode.Alternate},()=>{this.angle2=-100})}).width(40).height(100).backgroundColor('#f2b22e').position({x:265,y:160}).rotate({x:0,y:0,z:1,centerX:'50%',centerY:'50%',angle:this.angle2}).borderRadius(50)onAppear:动画效果由它触发。animateTo({duration:number,curve:curve,iterations:number,playMode:playMode})：duration的单位是毫秒，代表动画的时长；curve代表动画播放的速度，Curve.Linear是匀速播放；iteration为播放次数，-1表示无限次播放；playMode.Alternate表示需要播放返回的动画。animateTo还有一个delay属性，表示动画延迟，还有tempo，表示播放速率。3、眼球移动的效果这个效果最初是通过PC端的mouseMove事件来实现的。考虑到手机上没有鼠标，我把这个效果改成使用触摸屏来触发事件。Column(){.....}.onTouch((e)=>{//console.log(JSON.stringify(e))constpx=e.touches[0].x;constpy=e.touches[0].y;//容器的宽高constdw=350;constdh=400;//眼窝的宽高-眼球的宽高constmaxX=40;constmaxY=40;if(px>0&&px<350&&py>0&&py<400){//眼球当前位置constx=px/dw*maxX;consty=py/dh*maxY;this.currentX=x;this.currentY=y;}}).width(350).height(400).backgroundColor('#f1f3f5')if中的语句是判断触摸的坐标是否超出容器范围。如果超过，则不会触发触摸事件。综上所述，我在写代码的路上也发现了一个问题。目前，我还没有找到解决办法。在设置borderRadius样式的时候，发现borderRadius只能设置一个值，也就是说这个组件的border的四个角都会变成一样的圆角，如果我只想让一个角变圆，应该怎么设置它？在css中用border-radius可以方便的设置不同的圆角，例如：border-radius:10px10px20px30px;这个可以在ets里设置吗？以上就是本次分享的全部内容。这次实现的效果很简单，也是我学习ets相关内容的一个足迹。稍后我会提供更好的内容与大家分享。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。
