【ArkTS】鸿蒙开发 在用户界面点击图片实现图片旋转和图片缩小动画

为了实现图片点击旋转、缩放、位移等功能，我主要应用了多态样式：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')
  }
}