HarmonyOS开发学习：动态图案页面构建

代码中的爱码士

于 2024-07-08 17:32:50 发布

阅读量870

点赞数 9

分类专栏： HarmonyOS 鸿蒙鸿蒙学习文章标签： java harmonyos 华为鸿蒙学习驱动开发鸿蒙系统

本文链接：https://blog.csdn.net/maniu110/article/details/140272559

版权

HarmonyOS 同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

鸿蒙

46 篇文章 0 订阅

订阅专栏

鸿蒙学习

46 篇文章 0 订阅

订阅专栏

页面布局

构建9个容器展示按钮

build() {
  //堆叠布局
  Stack(){
    //按键容器
    Column(){ 
    Row(){
      //单个按键
      Column() {
      }.width("32%").height("100%")
        .backgroundColor(Color.Grey).opacity(0.3)
      //.....略
     }.width("100%").height("32%")
       .justifyContent(FlexAlign.SpaceAround)
      
      //....略
      }.width("100%").height("100%")
       .justifyContent(FlexAlign.SpaceAround)
  }
}

使用@Extend提取相同的属性

@Extend(Column) function colStyle() {
 .width("32%").height("100%").backgroundColor(Color.Grey).opacity(0.3)
}


@Extend(Row) function rowStyle() {
 .width("100%").height("32%").justifyContent(FlexAlign.SpaceAround)
}

图案动画

图案一背景颜色

 //橘色背景闪
 @State one: number = 0
//......
//橘色背景
Column() {
  }.width(600).height(800)
   .backgroundColor(Color.Orange).opacity(this.one)
//....
//触发事件
Row() {
     Column() {
      }.colStyle()
      .onClick(() => {
      animateTo({
       duration: 500,
       curve: Curve.Linear,
       iterations: 3,
       onFinish: () => {
        this.one = 0
        }
       }, () => {
       this.one = 0.5
       })
      })

图案二线条右下

//线条右下
@State two: number = 100
//.....
 Column() {
  Line()
  .width(this.two)
  .height(100)
  .startPoint([0, 0])
  .endPoint([4000, 2000])
  .stroke(Color.Pink)
  .strokeWidth(10)
  .opacity(1)


 }.height("100%").width("100%")
 .position({ x: "70%" })

图案三圆形滑动

 //方块变长
 @State three: number = 0
//.....
Column() {
  Circle()
    .width(300)
    .height(this.three)
    .fill(Color.Blue)
    .fillOpacity(0.7)
    .backgroundColor(Color.Green)
    .offset({ x: 120 })
}
//......
   .onClick(() => {
    animateTo({
     duration: 1500,
     curve: Curve.FastOutSlowIn,
     onFinish: () => {
      this.three = 0
     }
    }, () => {
     this.three = 500
    })
   })

图案四：星星

 //星星
 @State four: number = 0
//......
  Column() {
   Image($r("app.media.start"))
    .width(this.four).height(this.four)
    .offset({ y: -800 })
  }




//....
.onClick(() => {
 animateTo({
  duration: 2200,
  iterations: 1,
  onFinish: () => {
   this.four = 0
   }
  }, () => {
  this.four = 2000
  })
})

图案五：向右线条

//线条向左
@State five: number = 10
//......
Column(){
   Line()
    .width(this.five)
    .height(100)
    .startPoint([60, 0])
    .endPoint([180, 0])
    .stroke(Color.Black)
    .strokeWidth(10)
    .opacity(1)
    .offset({ x: 180, y: -300 })  
}.width("100%").height("100")
//.....
Column() {
}.colStyle().onClick(() => {
 animateTo(({
  duration: 2000,
  iterations: 1,
  onFinish: () => {
   this.five = 10
   }
  }), () => {
  this.five = 1500
  })
})

图案六：圆形出现

 //圆出现
 @State six: number = 0
//.....
 Column() {
  Circle()
   .width(500)
   .height(500)
   .opacity(this.six)
   .offset({ x: 60, y: -100 })
   .fill("#ff5954e7")
 }


//......
Column() {
}.colStyle().onClick(() => {
 animateTo(({
  duration: 1200,
  iterations: 1,
  curve: Curve.FastOutSlowIn,
  onFinish: () => {
   this.six = 0
   }
  }), () => {
  this.six = 0.7
  })
})

图案七：上下色块

 //上下色块
 @State seven: number = 10
//......
Row() {
 Line()
   .width(180)
   .height(this.seven)
   .strokeWidth(10)
   .opacity(0.8)
   .offset({ y: 440 })
   .backgroundColor(Color.Brown)
 Line()
   .width(180)
   .height(this.seven)
   .strokeWidth(10)
   .opacity(0.8)
   .offset({ y: -400 })
   .backgroundColor(Color.Yellow)
}
//.....
  Column() {
   }.colStyle()
   .onClick(() => {
   animateTo({
    duration: 1200,
    iterations: 1,
    onFinish: () => {
     this.seven = 10
     }
    }, () => {
    this.seven = 1800
    })
   })

图案八线条向上

 //线条向上
 @State eight: number = 10
//.......
 Row() {
    Line()
    .width(100)
    .height(this.eight)
    .startPoint([20, 360])
    .endPoint([20, 40])
    .stroke(Color.Brown)
    .strokeWidth(10)
    .opacity(1)
    .offset({ y: 430 })
  }
//........
Column() {
}.colStyle()
.onClick(() => {
 animateTo(({
  duration: 2200,
  iterations: 1,
  curve: Curve.FastOutLinearIn,
  onFinish: () => {
   this.eight = 10
   }
  }), () => {
  this.eight = 3200
  })
})

图案十组件转场

 //组件转场
 @State nine: boolean = false
//.....
 if (this.nine) {
   Image($r('app.media.face')).width(300).height(300)
     .transition({ type: TransitionType.Insert,
    opacity:0.4,
    translate:{y:120}})
     .transition({ type: TransitionType.Delete,
     scale:{x:0.2,y:0.2},
     rotate: { angle: 360 } })
  }


//......
Column() {
}.colStyle()
.onClick(() => {
 animateTo({ duration: 1200 }, () => {
  this.nine = !this.nine
  })
})

自定义函数整合

使用@Builder装饰器，将图案重复内容整合

图案二

@Builder twoBuild() {
 Line()
   .width(this.two)
   .height(100)
   .startPoint([0, 0])
   .endPoint([4000, 2000])
   .stroke(Color.Pink)
   .strokeWidth(10)
   .opacity(1)
}


//....
    this.twoBuild()
    this.twoBuild()
    this.twoBuild()

图案三

@Builder threeBuild(offset: number, fillColor: Color) {
 Circle()
   .width(300)
   .height(this.three)
   .fill(fillColor)
   .fillOpacity(0.7)
   .backgroundColor(Color.Green)
   .offset({ x: offset })
}
//....
    this.threeBuild(-120, Color.Blue)
    this.threeBuild(120, Color.Yellow)

图案五

@Builder fiveBuild(position: number, startDistant: number, lineHeight: number) {
 Line()
   .width(this.five)
   .height(position)
   .startPoint([startDistant, 0])
   .endPoint([startDistant + lineHeight, 0])
   .stroke(Color.Black)
   .strokeWidth(10)
   .opacity(1)
   .offset({ x: 180})
}
//......
    this.fiveBuild(100, 60, 120)
    this.fiveBuild(160, 10, 160)
    this.fiveBuild(210, 230, 150)
    this.fiveBuild(140, 60, 140)
    this.fiveBuild(60, 230, 50)

图案八

@Builder eightBuild(position: number, startDistant: number, lineHeight: number) {
 Line()
   .width(100)
   .height(this.eight)
   .startPoint([position, startDistant + lineHeight])
   .endPoint([position, startDistant])
   .stroke(Color.Brown)
   .strokeWidth(10)
   .opacity(1)
   .offset({ y: 430 })
}
//....
    this.eightBuild(20, 40, 320)
    this.eightBuild(10, 390, 370)
    this.eightBuild(40, 270, 260)
    this.eightBuild(50, 500, 120)

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？但是又不知道从哪里下手，而且学习时频繁踩坑，最终浪费大量时间。所以本人整理了一些比较合适的鸿蒙（HarmonyOS NEXT）学习路径和一些资料的整理供小伙伴学习

点击领取→纯血鸿蒙Next全套最新学习资料希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取~~

一、鸿蒙（HarmonyOS NEXT）最新学习路线

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）…等技术知识点。

获取以上完整版高清，请点击→纯血版全套鸿蒙HarmonyOS学习资料

二、HarmonyOS Next 最新全套视频教程