【鸿蒙学习笔记】使用动画

官方文档:使用动画

目录标题

属性动画:通用属性发生改变时而产生的属性渐变效果

animation

cpp 复制代码
import curves from '@ohos.curves';

@Entry
@Component
struct AnimationDemo {
  @State flag: boolean = false;
  @State rotateValue: number = 0;
  @State animationValue: number = 0;
  @State color: Color = Color.Red;

  build() {
    Column() {
      Column() {
        Text('ArkUI').textStyle().backgroundColor(0xf56c6c).fontColor(Color.Yellow)
          .rotate({ angle: this.rotateValue })
          .animation({ curve: curves.springMotion() })

        Text('ArkUI').textStyle().backgroundColor(0x67C23A).fontColor(this.color)
          .translate({ x: this.animationValue, y: this.animationValue })
          .animation({ curve: curves.springMotion() })
      }

      Button('点我').margin({ top: 120 }).width(150)
        .onClick(() => {
          this.flag = !this.flag;
          this.rotateValue = this.flag ? 180 : 0;
          this.animationValue = this.flag ? 20 : 0;
          this.color = this.flag ? Color.Black : Color.White;
        })

    }.width('100%').height('100%').backgroundColor(Color.Pink).justifyContent(FlexAlign.Center)
  }
}

@Extend(Text)
function textStyle() {.fontWeight(FontWeight.Bold)
  .fontSize(30)
  .textAlign(TextAlign.Center)
  .borderRadius(10)
  .width(150)
  .height(150)
}

animateTo

cpp 复制代码
import curves from '@ohos.curves'

@Entry
@Component
struct PropAnimation {
  @State flag: boolean = false;
  @State rotateValue: number = 0;
  @State translateValue: number = 0;
  @State opacityValue: number = 1;

  build() {
    Column() {
      Column() {
        this.CommonText()
      }.ColumnStyle().backgroundColor(0xf56c6c)
      .rotate({ angle: this.rotateValue })

      Column() {
        this.CommonText()
      }.ColumnStyle().backgroundColor(0x67C23A)
      .opacity(this.opacityValue)
      .translate({ x: this.translateValue, y: this.translateValue })

      Button('点我').margin({ top: 120 }).width(150)
        .onClick(() => {
          this.flag = !this.flag;
          animateTo({ curve: curves.springMotion() }, () => {
            this.rotateValue = this.flag ? 90 : 0;
            this.opacityValue = this.flag ? 0.6 : 1;
            this.translateValue = this.flag ? 100 : 0;
          })
        })
    }.width('100%').height('100%').backgroundColor(Color.Pink).justifyContent(FlexAlign.Center)
  }

  @Builder
  CommonText() {
    Text('ArkUI').fontWeight(FontWeight.Bold).fontSize(30).fontColor(Color.White)
  }
}

@Extend(Column)
function ColumnStyle() {.width(150).height(150).borderRadius(10).justifyContent(FlexAlign.Center)
}

自定义属性动画 @AnimatableExtend

cpp 复制代码
// 第一步:使用@AnimatableExtend装饰器,自定义可动画属性接口
@AnimatableExtend(Text)
function rollFontSize(size: number) {
  .fontSize(size)
}

@Entry
@Component
struct AnimatablePropertyExample {
  @State fontSize: number = 20;

  build() {
    Row() {
      Text("点击我").backgroundColor(Color.Pink).width(300).height(140).textAlign(TextAlign.Center)
        .rollFontSize(this.fontSize)
        .animation({ duration: 2000, delay: 0, curve: Curve.Ease })
        .onClick(() => {
          this.fontSize = this.fontSize == 20 ? 30 : 20;
        })
    }.width("100%").height('100%').justifyContent(FlexAlign.Center).padding(10)
  }
}

转场动画:是页面或组件的切换动画 , 显示/隐藏 切换时的动画

出现/消失转场:实现一个组件出现或者消失时的动画效果

cpp 复制代码
import curves from '@ohos.curves';

@Entry
@Component
struct TransitionEffectDemo {
  @State isPresent: boolean = false;
  private effect: TransitionEffect =
    // 创建默认透明度转场效果,并指定了springMotion(0.6, 0.8)曲线
    TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.1, 0.1) })
      .combine(TransitionEffect.scale({ x: 3, y: 3 }))
        // 添加旋转转场效果
      .combine(TransitionEffect.rotate({ angle: 90 }))
        // 添加平移转场效果
      .combine(TransitionEffect.translate({ y: 100 }).animation({ curve: curves.springMotion() }))
        // 添加move转场效果
      .combine(TransitionEffect.move(TransitionEdge.BOTTOM))

  build() {
    Stack() {
      if (this.isPresent) {
        Column() {
          Text('ArkUI').fontWeight(FontWeight.Bold).fontSize(20).fontColor(Color.White)
        }.justifyContent(FlexAlign.Center).width(150).height(150).borderRadius(10).backgroundColor(0xf56c6c)
        .transition(this.effect)
      }

      Column().width(155).height(155).border({ width: 5, radius: 10, color: Color.Black })

      Button('Click').margin({ top: 320 }).onClick(() => {
          this.isPresent = !this.isPresent;
        })
    }.width('100%').height('60%')
  }
}

导航转场:一个界面消失,另外一个界面出现

需要消化

  1. 导航转场的动画效果是系统定义的,开发者不能修改。
  2. 导航转场推荐使用Navigation组件实现,可搭配NavRouter组件和NavDestination组件实现导
    航功能。
  3. 使用场景

模态转场:新的界面覆盖在旧的界面上,旧的界面不消失的

  1. 应用场景
    弹出对话框时对话框做出现和消失的动画

共享元素转场:对元素做的一种位置和大小匹配的过渡动画效果

  1. 一镜到底动效,眼瞅着变化

动画曲线:属性值关于时间的变化函数

需要消化

其他未完待续

相关推荐
EterNity_TiMe_18 分钟前
【论文复现】(CLIP)文本也能和图像配对
python·学习·算法·性能优化·数据分析·clip
sanguine__22 分钟前
java学习-集合
学习
lxlyhwl22 分钟前
【STK学习】part2-星座-目标可见性与覆盖性分析
学习
nbsaas-boot23 分钟前
如何利用ChatGPT加速开发与学习:以BPMN编辑器为例
学习·chatgpt·编辑器
dr李四维25 分钟前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
CV学术叫叫兽1 小时前
一站式学习:害虫识别与分类图像分割
学习·分类·数据挖掘
我们的五年1 小时前
【Linux课程学习】:进程程序替换,execl,execv,execlp,execvp,execve,execle,execvpe函数
linux·c++·学习
一棵开花的树,枝芽无限靠近你2 小时前
【PPTist】添加PPT模版
前端·学习·编辑器·html
SameX2 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX2 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos