|
为了实现图片点击旋转、缩放、位移等功能，我主要应用了多态样式：stateStyles()属性和动画animation（）属性，具体用法可以参考官网给出的说明：
stateStyles()属性： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-statestyles-0000001482592098-V2
animation（）属性： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-layout-update-animation-0000001500356349-V2
对于图片实现动画效果 总结为三个步骤
1.给出图片原有状态
2.设置图片变化后状态
3.给出原状到变化后状态的动画效果（比如变化速度，延迟的变化时间）
一：设置图片原有状态和变化后状态 stateStyles()属性的参数可以参考官网指南，normal()为正常态 presses（）为按压态
.stateStyles({
//变化前图片样式
normal:
{
.width('100%')
},
//变化后图片样式（pressed为选中后变化）
pressed:{
.width('50%')
}
})
二：设置图片变化效果 该变化效果即简单的变化时间为1000（默认单位毫秒）
.animation({
//转变时间
duration:1000
})
三：效果展示 经过一二步骤小羊的点击变化效果如下所示
按同样方法 改变不同参数 也可以实现按压旋转效果
将两个效果结合 可以形成旋转消失的效果
如果想松开按压后依然是消失状态，可以将normal()参数中的正常态效果移出直接给到图片下面，为了提高小路，只有normal中的状态会恢复
四、完整代码
@Entry
@Component
struct Index {
build() {
Column() {
Column(){
Image($r('app.media.BSHEEP'))
//状态样式
.stateStyles({
//变化前图片样式
normal:
{
.width('100%')
},
//变化后图片样式（pressed为选中后变化）
pressed:{
.width('50%')
}
})
//动画效果
.animation({
//转变时间
duration:1000
})
.width('100%')
.border({width:5,color:'#383838'})
//圆角
.borderRadius(40)
Text('我是青青草原上最骚的小黑羊')
.fontColor(Color.White)
.fontSize(30)
.margin({ top:50,left:10 })
.lineHeight(40)
.fontWeight(600)
.stateStyles({
normal:
{
.rotate({angle:0})
.scale({x:1, y: 1})
},
pressed:{
.rotate({angle:180})
.scale({x: 0, y: 0})
}
})
.animation({
duration:1000
})
Row(){
Text() {
ImageSpan($r('app.media.BSHEEP'))
.width(100)
.borderRadius(200)
Span('B-SHEEP')
.fontColor(Color.White)
}
.stateStyles({
normal:
{
.rotate({angle:0})
},
pressed:{
.rotate({angle:180})
}
})
.animation({
duration:1000
})
}
.width('100%')
.padding({top:50,left:100})
}
.width(300)
.height(500)
.backgroundColor('#383838')
.margin({top:50})
.padding(5)
.shadow({radius:50,color:Color.Pink})
}
.width('100%')
.height('100%')
.backgroundColor('#757575')
}
}
|