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

这篇具有很好参考价值的文章主要介绍了【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.给出原状到变化后状态的动画效果（比如变化速度，延迟的变化时间）
鸿蒙如何定义图片的旋转和缩放,harmonyos,ui,华为

一：设置图片原有状态和变化后状态 stateStyles()属性的参数可以参考官网指南，normal()为正常态 presses（）为按压态

 .stateStyles({
            //变化前图片样式
            normal:
            {
              .width('100%')
            },
            //变化后图片样式（pressed为选中后变化）
            pressed:{
            .width('50%')
          }
          })

二：设置图片变化效果该变化效果即简单的变化时间为1000（默认单位毫秒）

 .animation({
            //转变时间
            duration:1000
          })

三：效果展示经过一二步骤小羊的点击变化效果如下所示

鸿蒙如何定义图片的旋转和缩放,harmonyos,ui,华为

按同样方法改变不同参数也可以实现按压旋转效果

鸿蒙如何定义图片的旋转和缩放,harmonyos,ui,华为

将两个效果结合可以形成旋转消失的效果

鸿蒙如何定义图片的旋转和缩放,harmonyos,ui,华为

如果想松开按压后依然是消失状态，可以将normal()参数中的正常态效果移出直接给到图片下面，为了提高小路，只有normal中的状态会恢复

鸿蒙如何定义图片的旋转和缩放,harmonyos,ui,华为文章来源地址https://www.toymoban.com/news/detail-855907.html

四、完整代码

@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')
  }
}

到了这里，关于【ArkTS】鸿蒙开发在用户界面点击图片实现图片旋转和图片缩小动画的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！