先来看看错的
@Entry
@Component
struct an {
@State a : number = 0;
@State ang : number = 0;
build() {
Row(){
Text('^_^')
.fontSize(90)
.position({
x : 0,
y : this.a
})
.rotate({
angle : this.ang,
centerX : '50%',
centerY : '50%'
})
.onClick(() => {
this.a += 100;
})
.animation({
duration : 500
})
}
.height('100%')
.width('100%')
}
}
我添加了动画,可是效果呢?
很显然没有任何动画效果
首先排除电脑本身的问题(其实很有可能,作者的电脑配置很低)
那到底是哪里出错了呢?
在我的反复尝试下,我发现只要给Text加上宽和高就行了,注意是都要加,一个都不能少
再来看看对的
@Entry
@Component
struct an {
@State a : number = 0;
@State ang : number = 0;
build() {
Row(){
Text('^_^')
.height(100)
.width(200)
.fontSize(90)
.position({
x : 0,
y : this.a
})
.rotate({
angle : this.ang,
centerX : '50%',
centerY : '50%'
})
.onClick(() => {
this.a += 100;
})
.animation({
duration : 500
})
}
.height('100%')
.width('100%')
}
}
看看效果如何
哈哈,成功出现了
还有就是要注意外面套一个容器,具体原因不是很清楚,但是可能是这个动画需要这个东西在一个容器里面进行吧,并且需要获取它的固定大小,如果不定义的话会随时发生变化,不能控制?不是很懂,欢迎指正