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

官方文档:使用动画

目录标题

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

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

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

需要消化

其他未完待续

相关推荐
数据与后端架构提升之路38 分钟前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习
一行11 小时前
电脑蓝屏debug学习
学习·电脑
咔叽布吉1 小时前
【论文阅读笔记】CamoFormer: Masked Separable Attention for Camouflaged Object Detection
论文阅读·笔记·目标检测
johnny2331 小时前
《大模型应用开发极简入门》笔记
笔记·chatgpt
亦枫Leonlew1 小时前
微积分复习笔记 Calculus Volume 1 - 4.7 Applied Optimization Problems
笔记·数学·微积分·1024程序员节
小肥象不是小飞象1 小时前
(六千字心得笔记)零基础C语言入门第八课——函数(上)
c语言·开发语言·笔记·1024程序员节
星LZX1 小时前
WireShark入门学习笔记
笔记·学习·wireshark
阑梦清川1 小时前
在鱼皮的模拟面试里面学习有感
学习·面试·职场和发展
qq_433099401 小时前
Isaac Gym学习笔记——概述
学习
努力变厉害的小超超3 小时前
ArkTS中的组件基础、状态管理、样式处理、class语法以及界面渲染
笔记·鸿蒙