ImageAnimator、ArkTS 语法进阶
今天我们来学习ImageAnimator及ArkTS 语法进阶，话不多说直接开学。
一、ImageAnimator
1.1、作用及语法
作用：是一个帧动画组件，简单来讲奇数将几张图片合成动画，提供逐帧播放图片的能力。
语法：ImageAnimator().属性()
1.2、相关属性
属性：
1.images：设置图片帧信息集合
2.state：设置播放状态，启动、暂停、停止
3.duration：设置默认时长
4.iterations：设置循环次数，一般无限循环（-1）
代码演示：
@Entry
@Component
struct zy {
@State state: AnimationStatus = AnimationStatus.Initial
build() {
Column() {
//帧动画
ImageAnimator()
//图片帧信息合集
.images([
{ src: $r('app.media.loading_dog_0') },
{ src: $r('app.media.loading_dog_1') },
{ src: $r('app.media.loading_dog_2') },
{ src: $r('app.media.loading_dog_3') },
])
.width(300)
.height(150)
.iterations(-1)//设置无限循环
.state(this.state)//播放状态
.duration(1500) //播放时长
Row() {
Button('启动')
.onClick(() => {
this.state = AnimationStatus.Running
})
Button('暂停')
.onClick(() => {
this.state = AnimationStatus.Paused
})
Button('停止')
.onClick(() => {
this.state = AnimationStatus.Stopped
})
}
}
.width('100%')
.height('100%')
}
}
图片演示：
二、ArkTS语法进阶
2.1、类型别名
作用：就是给某个类型起别名，之后就可以通过这个别名来使用类型
语法：type 别名 = 类型
代码演示：
type w = string | number | boolean
let w1 = '100%'
let w2 = 100
let w3 = true
2.2、类
作用：类是用于创建对象的模板。他们用代码封装数据以处理该数据。同时类声明也会引入一个新类型，并定义其字段、方法和构造函数。
语法：class 类名{ 属性 方法 }
代码演示：
class person {
name: string = '人'
age: number = 18
}
let per = new person()
console.log(per.name, per.age)
2.2.1、构造函数
作用：给类中的属性设置初始值。
语法：class 类{
字段A:类型
字段B:类型
constructor(参数...) {
// 通过 new 实例化的时候 会调用 constructor
// 通过关键字 this 可以获取到实例对象
}
}
let 实例 = new 类()
代码演示：
class person {
name: string
age: number
constructor(pname:string,page:number) {
this.name = pname
this.age = page
}
}
let per = new person('小明',17)
console.log(per.name, per.age)
2.2.2、实例方法
作用：在类里面可以定义方法。
语法：class 类名{ 方法名(参数...):返回值类型{
// 可以通过 this 获取实例对象
} }
代码演示：
class person {
name: string
constructor(pname: string) {
this.name = pname
}
sing(song: string) {
console.log(this.name, '唱歌：', song)
}
}
let zj: person = new person('张杰')
zj.name
zj.sing('着魔')
2.2.3、静态属性，方法
作用：类还可以添加静态属性、方法，后续访问需要通过类来完成。
语法：class 类{
static 属性:类型 static 方法(){}
}
使用：
类.属性
类.方法（）
代码演示：
class i{
static pi:number = 3.1415926
static num1(){
return Math.random() * 10
}
}
console.log(i.pi.toString())
console.log(i.num1().toString())
2.2.4、继承
作用：子类可以通过继承获得父类的属性和方法。
语法：class 子类 extends 父类 {}
代码演示：
class person{
name:string
age:number
constructor(pname:string,page:number) {
this.name=pname
this.age=page
}
sayhello(){
console.log('你好')
}
}
class student extends person{
classname:string = '2班'
len(){
console.log('学习鸿蒙')
}
}
let xm:student = new student('小明',18)
console.log('我叫：',xm.name,'我是',xm.classname,'的')
2.2.5、super关键字
作用：super是在子类中调用父类中的实例属性，实例方法，构造函数用的。
代码演示：
class person{
name:string
age:number
constructor(pname:string,page:number) {
this.name=pname
this.age=page
}
sayhello(){
console.log('你好')
}
}
class student extends person{
classname:string = '2班'
classmoney:number
constructor(pname:string,page:number,sclassmoney:number) {
// name 和 age 的初始化通过 super 来调用父类的构造函数
super(pname,page)
this.classmoney = sclassmoney
}
len(){
console.log('学习鸿蒙')
}
}
let xm:student = new student('小明',18,10086)
console.log('我叫：',xm.name,'我是',xm.classname,'的','我们班班费有',xm.classmoney)
2.2.8、小案例
代码演示：
class sj {
static sjcolor() {
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
return `rgb(${r},${g},${b})`
}
}
class Dog {
name: string
age: number
color: string
constructor(dname: string, dage: number, dcolor: string) {
this.name = dname
this.color = dcolor
this.age = dage
}
sayhi() {
console.log('狗叫作' + this.name + '今年' + this.age+'岁' + '毛发是' + this.color)
}
}
let jm:Dog = new Dog('金毛',2,'金色')
jm.sayhi()
class sonDog extends Dog{
toy:string
constructor(dname: string, dage: number, dcolor: string,dtoy:string) {
super(dname,dage,dcolor)
this.toy=dtoy
}
sayhi() {
console.log('狗叫作' + this.name + '今年' + this.age+'岁' + '毛发是' + this.color+'它喜欢的玩具是'+this.toy)
}
}
let xjm:sonDog = new sonDog('小金毛',1,'金色','磨牙棒')
xjm.sayhi()
@Entry
@Component
struct zy {
build() {
Column() {
}
.backgroundColor(sj.sjcolor()) //随机背景颜色
.width('100%')
.height('100%')
}
}
2.2.7、修饰符
2.3、剩余和展开
2.3.1、剩余
作用：通过剩余参数的语法，我们可以将函数或方法中一个不定数量的参数表示为一个数组。
语法:function 函数名(参数1,参数2,...剩余参数数组){ // 逻辑代码 // 剩余参数之前的参数 挨个获取即可 // 剩余参数：以数组的形式获取 }
代码演示：
function sum(num1:number,num2:number,num3:number,...a:number[]){
let total = num1 + num2 + num3
for(let b of a){
total+=b
}
return total
}
console.log(sum(1,2,3,4,5,6,7,8,9).toString())
2.3.2、展开
作用：用于数组的合并。
代码演示：
let numa:number[]=[1,2,3]
let numb:number[] = [8,7,9]
let num:number[] = [...numa,...numb]
console.log('',num)
