同心圆及点击动画,ArkTs如何画同心圆以及同心圆的点击动画效果

同心圆及点击动画

HarmonyOS
2024-05-26 11:52:14
浏览
已于2024-5-26 11:52:37修改
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
jmzgh

本文主要介绍ArkTs如何画同心圆以及同心圆的点击动画效果等。

典型的使用场景如下:

场景:在锁屏手势解锁页面可选用同心圆当做每一个按钮,在做某些列表项的选中功能时,可选用同心圆做出更好看的动态效果。

使用的核心API

curves

animation

Circle

核心代码解释

1.第一个同心圆用column做容器,利用边框圆角将其形状设置为圆形,内置一个Circle组件,在用定位属性调到正中间,即可实现同心圆效果。

2.第二个同心圆是在stack组件中嵌套两个Circle,第一个Circle为外层,内部颜色为白色,第二个circle为内层,外层圆用边框做出环的效果,即可实现同心圆。

3.第二个同心圆做出了四种不同的点击动画,点击后内层圆的大小、颜色以及变化曲线都会有所不同。

4.利用变量控制每次点击内层圆时,四种不同的点击动画会依次显示,每次显示一种,下一次换一种,如此循环往复。

5.每次点击变大后,再次点击会以相同的曲线变小,同时保持颜色不变。

核心代码如下:

import Curves from '@ohos.curves'; 
 
@Entry 
@Component 
struct Index { 
  @State currentColor:string = 'blue' 
  @State flagColor:boolean = false; 
 
  @State widthSize:number = 50; 
  @State heightSize:number = 50; 
  @State flag:boolean = false; 
  @State curveTxt:string = '弹性动画曲线' 
  @State currentCurve:ICurve = Curves.springMotion(1,1,0) 
  @State curveIndex:number = 0; 
  @State curveColor:string = 'blue' 
  build() { 
    Row() { 
      Column({space:100}){ 
        //画一个直径为90的同心圆 
        //方式一: 
        Column() { 
          Circle({ 
            width: 50, 
            height: 50 
          }) 
            .fill(this.currentColor) 
            .position({x:25,y:25})  //绝对定位 
            .onClick(()=>{ 
              if(!this.flagColor){ 
                this.currentColor = 'red' 
                this.flagColor = !this.flagColor 
              }else{ 
                this.currentColor = 'blue' 
                this.flagColor = !this.flagColor 
              } 
            }) 
        } 
        .width('100') 
        .height('100') 
        .backgroundColor('#ffffff') 
        .border({  //border的宽度是向内的,宽度越大占用内部空间越大 
         color:Color.Blue, 
          width:10, 
          radius:100 
        }) 
 
        // 方式二 
        Text(this.curveTxt) 
        // Text('Index:' + this.curveIndex) 
        Stack(){ 
          Circle({ width: 90, height: 90 }) 
            .fillOpacity(0) 
            .stroke('blue')  //边框颜色 
            .strokeWidth(10)  //边框宽度,向外,不会占用内部空间 
          Circle() 
            .fill(this.curveColor) 
            .onClick(()=>{ 
              if(!this.flag){ 
                this.widthSize = 60; 
                this.heightSize = 60; 
                if(this.curveIndex % 4 == 0){ 
                  this.curveColor = 'red' 
                  //构造弹性动画曲线对象  参数(弹簧自然振动周期,阻尼系数,弹性动画衔接时长) 
                  this.currentCurve = Curves.springMotion(1,1,0); 
                  this.curveTxt = '弹性动画曲线' 
                  this.curveIndex++; 
                }else if(this.curveIndex % 4 == 1){ 
                  this.curveColor = '#ffff00' 
                  //构造弹簧曲线对象  参数(初始速度,质量,刚度,阻尼) 
                  this.currentCurve = Curves.springCurve(-1000,2,1000,1000) 
                  this.curveTxt = '弹簧曲线' 
                  this.curveIndex++; 
                }else if(this.curveIndex % 4 == 2){ 
                  this.curveColor = 'green' 
                  //构造阶梯曲线对象  参数(阶梯数量,起点或终点发生越阶变化,true为终点发生) 
                  this.currentCurve = Curves.stepsCurve(1,true) 
                  this.curveTxt = '阶梯曲线' 
                  this.curveIndex++; 
                }else{ 
                  this.curveColor = '#808080' 
                  //构造三阶贝塞尔曲线对象,曲线的值必须处于0-1之间 
                  this.currentCurve = Curves.cubicBezierCurve(1,0,1,0) 
                  this.curveTxt = '三阶贝塞尔曲线' 
                  this.curveIndex++; 
                } 
                this.flag = !this.flag; 
              }else{ 
                this.widthSize = 50; 
                this.heightSize = 50; 
                this.flag = !this.flag; 
              } 
            }) 
            .width(this.widthSize) 
            .height(this.heightSize) 
            .animation({ 
              duration : 1000, 
              curve:this.currentCurve, 
              playMode: PlayMode.Normal 
            }) 
        } 
      } 
      .width('100%') 
      .height('100%') 
      .justifyContent(FlexAlign.Center) 
    } 
    .height('100%') 
  } 
}

实现效果

适配的版本信息

 IDE:DevEco Studio 4.0.1.601

SDK:HarmoneyOS 4.0.10.8

分享
微博
QQ
微信
回复
2024-05-27 15:43:58
相关问题
属性动画如何实现宽高动画效果
1867浏览 • 1回复 待解决
如何实现动画转场效果
732浏览 • 1回复 待解决
如何实现list折叠动画效果
333浏览 • 1回复 待解决
文字动画效果如何实现
1810浏览 • 0回复 待解决
如何实现按钮点击效果
296浏览 • 2回复 待解决
Tabs 出现/消失转场动画效果
222浏览 • 1回复 待解决
panGesture结合动画实现fling效果
747浏览 • 1回复 待解决
求助动画效果问题有懂吗?
4102浏览 • 1回复 待解决
如何应用属性动画实现宽高动画
261浏览 • 1回复 待解决
鸿蒙中怎么实现动画翻转效果
10234浏览 • 2回复 待解决
Button等控件设置点击效果
820浏览 • 1回复 待解决
如何去掉Toggle一类控件点击效果
282浏览 • 1回复 待解决