一波实用的动画案例来袭！！！

一波实用的动画案例来袭！！！

动画一

使用animation 通过变量的变化来控制动画

这个效果的实现十分简单

通过改变字体的大小fontsize然后加一个animation动画效果

  @State s: number = 30//控制字体大小的状态变量
Column() {
      Text('点一下就够了')
        .fontSize(this.s)
        .padding(20)
        .fontColor(Color.Orange)//字体颜色
        .backgroundColor(Color.Pink)//背景色
        .borderRadius(20)//边框圆角
        .animation({
          duration: 500//动画时长
        , iterations: -1//播放次数，这里说一下，因为是简单效果，我没有设置暂停按钮
        })
        .onClick(() => {//点击事件，通过点击来触发变量的变化
          this.s = 40
        })
    }
    .width("100%")

动画二

使用animateTo实现

通过给一个图片添加旋转属性来实现

@State ro: number = 0//状态变量，控制旋转角度，初始化为0
Column() {
      Image($r('app.media.avatar'))
        .width(300)//宽
        .borderRadius(150)//图片圆角
        .rotate({ angle: this.ro })//控制旋转，angle为旋转角度
        .onClick((ev) => {
          animateTo({
            duration: 1500,
            iterations: -1,
            curve: Curve.Linear//线性变化
          }, () => {
            this.ro = 360
          })
        })
    }

动画三

使用imageAnimator帧动画组件来设置

创建一个图片帧信息集合

images: ImageFrameInfo[] = [		//帧动画数组
    { src: $r("app.media.coin1") },
    { src: $r("app.media.coin2") },
    { src: $r("app.media.coin3") },
    { src: $r("app.media.coin4") },
    { src: $r("app.media.coin5") },
    { src: $r("app.media.coin6") }
  ]

给动画设置一个初始状态

  @State sta: AnimationStatus = AnimationStatus.Initial
  		//(Initial为初始态，Paused为暂停状态，Stopped为停止状态)

接着给ImageAnimator()添加属性

Column() {
      ImageAnimator()
        .width("80%")//宽
        .aspectRatio(1)//宽高比
        .state(this.sta)//动画的状态
        .images(this.images)//添加帧动画数组
        .duration(this.images.length * 100)//设置时间
        .iterations(-1)//播放次数，这里说一下，因为是简单效果，我没有设置暂停按钮
        .onClick(() => {
          this.sta = AnimationStatus.Running//更改状态，通过点击事件触发
        })

    }
    .width("100%")
    .height("100%")

动画三plus版本

在动画三基础上添加了启动，暂停，停止按钮

通过额外的按钮来控制，不在原来的图片上点击

Row({space:20}){
        Button('启动').onClick(()=>{
          this.state=AnimationStatus.Running
        })
        Button('暂停').onClick(()=>{
          this.state=AnimationStatus.Paused
        })
        Button('停止').onClick(()=>{
          this.state=AnimationStatus.Stopped
        })
      }

动画四

字体特效

设置一个定时器，连续给字体颜色赋值，来更改字体样式

首先设置一个控制字体颜色的状态变量

  @State Mycolor: string = ''//一开始不设置值

接着写一个函数，随机生成数字，通过rgb来设置颜色

a() {
    let r = Math.floor(Math.random() * 256)
    let g = Math.floor(Math.random() * 256)
    let b = Math.floor(Math.random() * 256)
    return `rgba(${r},${g},${b},0.5)`
  }

设置定时器，不断更新颜色

setInterval(() => {
              this.Mycolor = this.a()
            }, 100)//100为赋值时间间隔，每100毫秒调用一次随机颜色函数

接着给字体加入属性和方法

Column() {
      Text('CZT')
        .padding(20)
        .fontSize(50)
        .fontWeight(700)
        .fontColor(this.Mycolor)
        .backgroundColor(Color.Pink)
        .onClick(() => {
          setTimeout(() => {

          })
          animateTo({ duration: 400, iterations: -1 }, () => {//这里依然使用animateT0()
            setInterval(() => {
              this.Mycolor = this.a()
            }, 100)
          })
        })
    }
    .justifyContent(FlexAlign.Center)
    .width("100%")
    .height("100%")

over,over