
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
@toc
明天就是父亲节了,祝愿所有的父亲们节日快乐!记得给爸爸打个电话。
视频效果
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Image($r("app.media.circle"))
.width('90%')
.height(300)
.objectFit(ImageFit.Contain)
.opacity(this.opacity)
.rotate({ x: 0, y: 0, z: 1, angle: this.angle })
.scale({ x: this.scale, y: this.scale, z: this.scale })
.overlay(this.typeword, { align: Alignment.Center, offset: { y: -20 } },)
Text(`速度:${this.speed.toFixed(0)}`).width('100%').textAlign(TextAlign.Center).fontSize(22).margin({ top: 50 })
Slider({
value: this.speed,
min: 1,
max: 10,
step: 1,
style: SliderStyle.OutSet
})
.width('90%')
.blockColor(Color.Brown)
.selectedColor(Color.Brown)
.showSteps(true)
.showTips(true)
.onChange((value) => {
this.speed = value
})
Text(`缩放大小:${this.scale.toFixed(1)}`).width('100%').textAlign(TextAlign.Center).fontSize(22).margin({ top: 50 })
Slider({
value: this.scale,
min: 0.1,
max: 2,
step: 0.1,
style: SliderStyle.InSet
})
.width('90%')
.blockColor(Color.Orange)
.selectedColor(Color.Orange)
.showSteps(true)
.showTips(true)
.onChange((value) => {
this.scale = value
})
}
.width('100%')
.height('100%')
}
图片由小到大,模拟从远处靠近的效果,同时图片旋转效果,
模拟打字效果,打出父亲节祝福语…
//旋转方法
rotating() {
this.subStr();
var interval = setInterval(() => {
this.angle += this.speed;
if (this.scale < 1.1) {
this.scale += 0.01;
this.opacity += 0.02
} else {
//转回正位
this.angle += (360 - this.angle)
this.speed = 0
//打字效果
this.typing()
clearInterval(interval)
}
}, 100)
console.log(`interval:${this.angle}`);
}
//模拟打字效果
typing() {
var that = this
that.typeword = ''
var i: number = 0
var typing = setInterval(function () {
try {
that.typeword += that.words[i]
if (i == (that.words.length) - 1) {
clearInterval(typing)
console.log(`======clearInterval`)
}
i++
} catch (error) {
console.log("====error:" + error)
}
}, 500)
}
//截取字符串
subStr() {
for (var i = 0;i < this.str.length; i++) {
var s = this.str[i]
this.words.push(s)
}
}
//生命周期函数,Page显示后,触发该回调
aboutToAppear() {
this.rotating()
}
附件下载吧