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

官方文档:使用动画

目录标题

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

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. 一镜到底动效,眼瞅着变化

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

需要消化

其他未完待续

相关推荐
yuhouxiyang11 分钟前
学习海康VisionMaster之路径提取
学习·计算机视觉
PLUS_WAVE2 小时前
CogCoM: A Visual Language Model with Chain-of-Manipulations Reasoning 学习笔记
学习·语言模型·大模型·cot·vlm·推理模型·reasoning
绵绵细雨中的乡音2 小时前
Linux进程学习【环境变量】&&进程优先级
linux·运维·学习
贺函不是涵2 小时前
【沉浸式求职学习day27】
学习
努力奋斗的小杨2 小时前
学习MySQL的第十二天
数据库·笔记·学习·mysql·navicat
枫叶20002 小时前
OceanBase数据库-学习笔记1-概论
数据库·笔记·学习·oceanbase
一点.点3 小时前
李沐动手深度学习(pycharm中运行笔记)——04.数据预处理
pytorch·笔记·python·深度学习·pycharm·动手深度学习
一点.点3 小时前
李沐动手深度学习(pycharm中运行笔记)——07.自动求导
pytorch·笔记·python·深度学习·pycharm·动手深度学习
你可以叫我仔哥呀3 小时前
k8s学习记录(五):Pod亲和性详解
学习·容器·kubernetes
tcoding3 小时前
《MySQL 技术内幕-innoDB 存储引擎》笔记
数据库·笔记·mysql