diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index aa9dfeb4f30438c8daefef0c472471c621896b6b..4689d74000340e55a677bac072ebb16a8a115122 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -40,14 +40,26 @@ - [绘制几何图形（Shape）](arkts-geometric-shape-drawing.md) - [使用画布绘制自定义图形（Canvas）](arkts-drawing-customization-on-canvas.md) - 使用动画 - - [动画概述](arkts-animation-overview.md) - - 页面内的动画 - - [布局更新动画](arkts-layout-update-animation.md) - - [组件内转场动画](arkts-transition-animation-within-component.md) - - [弹簧曲线动画](arkts-spring-animation.md) - - 页面间的动画 - - [放大缩小视图](arkts-zoom-animation.md) - - [页面转场动画](arkts-page-transition-animation.md) + - [动画概述](arkts-animation.md) + - 属性动画 + - [属性动画概述](arkts-attribute-animation-overview.md) + - [属性动画接口说明](arkts-attribute-animation-apis.md) + - [自定义属性动画](arkts-custom-attribute-animation.md) + - 转场动画 + - [转场动画概述](arkts-transition-overview.md) + - [出现/消失转场](arkts-enter-exit-transition.md) + - [导航转场](arkts-navigation-transition.md) + - [模态转场](arkts-modal-transition.md) + - [共享元素转场](arkts-shared-element-transition.md) + - [组件动画](arkts-component-animation.md) + - 动画曲线 + - [传统曲线](arkts-traditional-curve.md) + - [弹簧曲线](arkts-spring-curve.md) + - [动画衔接](arkts-animation-smoothing.md) + - 动画效果 + - [模糊](arkts-blur-effect.md) + - [阴影](arkts-shadow-effect.md) + - [色彩](arkts-color-effect.md) - 支持交互事件 - [交互事件概述](arkts-event-overview.md) - 使用通用事件 diff --git a/zh-cn/application-dev/ui/arkts-animation-overview.md b/zh-cn/application-dev/ui/arkts-animation-overview.md deleted file mode 100644 index a26ef6acfe2b0241d0c222e940bdacaa629a6016..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/arkts-animation-overview.md +++ /dev/null @@ -1,27 +0,0 @@ -# 动画概述 - - -动画的原理是在一个时间段内，多次改变UI外观，由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧，对应一次屏幕刷新，而决定动画流畅度的一个重要指标就是帧率FPS（Frame Per Second），即每秒的动画帧数，帧率越高则动画就会越流畅。 - - -ArkUI中，产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律（即曲线）等参数。当属性值发生变化后，按照动画参数，从原来的状态过渡到新的状态，即形成一个动画。 - - -ArkUI提供的动画能力按照页面的分类方式，可分为页面内的动画和页面间的动画。如下图所示，页面内的动画指在一个页面内即可发生的动画，页面间的动画指两个页面跳转时才会发生的动画。 - - - **图1** 按照页面分类的动画   - -![zh-cn_image_0000001562700385](figures/zh-cn_image_0000001562700385.png) - - -如果按照基础能力分，可分为属性动画、显式动画、转场动画三部分。如下图所示。 - - - **图2** 按照基础能力分类的动画   - - -![zh-cn_image_0000001562820753](figures/zh-cn_image_0000001562820753.png) - - -本文按照页面的分类方式，从使用场景出发，提供各种动画的使用方法和注意事项，使开发者快速学习动画。 diff --git a/zh-cn/application-dev/ui/arkts-animation-smoothing.md b/zh-cn/application-dev/ui/arkts-animation-smoothing.md new file mode 100644 index 0000000000000000000000000000000000000000..975dc773f6a1343d004b89884a6b0d30d8e560ba --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-animation-smoothing.md @@ -0,0 +1,179 @@ +# 动画衔接 + + +UI界面除了运行动画之外，还承载着与用户进行实时交互的功能。当用户行为根据意图变化发生改变时，UI界面应做到即时响应。例如用户在应用启动过程中，上滑退出，那么启动动画应该立即过渡到退出动画，而不应该等启动动画完成后再退出，从而减少用户等待时间。对于桌面翻页类从跟手到离手触发动画的场景，离手后动画的初始速度应承继手势速度，避免由于速度不接续导致停顿感的产生。针对以上场景，OpenHarmony已提供动画与动画，手势与动画之间的衔接能力，保证各类场景下动画平稳光滑的过渡的同时，尽可能降低开发难度。 + + +## 动画与动画的衔接 + +假设对于某一可动画属性，存在正在运行的动画。当UI侧行为改变该属性终点值时，开发者仅需在animateTo动画闭包中改变属性值或者改变animation接口作用的属性值，即可产生动画。OpenHarmony会自动衔接之前的动画和当前的动画，开发者仅需要关注当前单次动画的实现。 + + +```ts +import curves from '@ohos.curves' + +// 第一步：声明相关状态变量 +@state scaleToggle: boolean = true; + +... +Column() { + Button() + // 第二步：将状态变量设置到相关可动画属性接口 + .scale(this.scaleToggle ? 1 : 0.5) + // 第三步：通过点击事件改变状态变量值，影响可动画属性值 + .onclick(() => { + this.scaleToggle = !this.scaleToggle; + }) + // 第四步：通过隐式动画接口开启隐式动画，动画终点值改变时，系统自动添加衔接动画 + .animation({ + curve: curves.springMotion() + }) +} +... +``` + +完整示例如下。通过点击click，红色方块的缩放属性会发生变化。当连续快速点击click时，缩放属性的终点值连续发生变化，当前动画也会平滑过渡到朝着新的缩放属性终点值运动。 + + +```ts +import curves from '@ohos.curves'; + +@Entry +@Component +struct AnimationToAnimationDemo { + @State isAnimation: boolean = false; + + build() { + Column() { + Text('ArkUI') + .fontWeight(FontWeight.Bold) + .fontSize(12) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .borderRadius(10) + .backgroundColor(0xf56c6c) + .width(100) + .height(100) + .scale({ x: this.isAnimation ? 2 : 1, y: this.isAnimation ? 2 : 1 }) + .animation({ curve: curves.springMotion(0.4, 0.8) }) + + Button('Click') + .margin({ top: 200 }) + .onClick(() => { + this.isAnimation = !this.isAnimation; + }) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + } +} +``` + +![zh-cn_image_0000001599971890](figures/zh-cn_image_0000001599971890.gif) + + + +## 手势与动画的衔接 + +使用滑动、捏合、旋转等手势的场景中，跟手过程中一般会触发属性的改变。离手后，这部分属性往往会继续发生变化，直到到达属性终点值。 + +离手阶段的属性变化初始速度应与离手前一刻的属性改变速度保持一致。如果离手后属性变化速度从0开始，就好像正在运行的汽车紧急刹车，造成观感上的骤变是用户和开发者都不希望看到的。 + +针对在手势和动画之间进行衔接的场景（如列表滑动），可以在跟手阶段每一次更改组件属性时，都做成使用跟手弹簧曲线的属性动画。离手时再用离手弹簧曲线产生离手阶段的属性动画。对于采用[springMotion](../reference/apis/js-apis-curve.md#curvesspringmotion9)曲线的动画，离手阶段动画将自动继承跟手阶段动画的速度，并以跟手动画当前位置为起点，运动到指定的属性终点。 + + +```ts +import curves from '@ohos.curves' + +// 第一步：声明相关状态变量 +@state offsetX: number = 0; +@State offsetY: number = 0; +targetOffsetX: number = 100; +targetOffsetY: number = 100; +... +Column() + // 第二步：将状态变量设置到相关可动画属性接口 + .translate({ x: this.offsetX, y: this.offsetY}) + .gesture( + PanGesture({}) + .onActionUpdate((event: GestureEvent) => { + // 第三步：在跟手过程改变状态变量值，并且采用reponsiveSpringMotion动画运动到新的值 + animateTo({ + curve: curves.responsiveSpringMotion() + }, () => { + this.offsetX = event.offsetX; + this.offsetY = event.offsetY; + }) + }) + .onActionEnd(() => { + // 第四步：在离手过程设定状态变量终点值，并且用springMotion动画运动到新的值，springMotion动画将继承跟手阶段的动画速度 + animateTo({ + curve: curves.SpringMotion() + }, () => { + this.offsetX = targetOffsetX; + this.offsetY = targetOffsetY; + }) + }) + ) +... +``` + +完整的示例和效果如下。 + + +```ts +import curves from '@ohos.curves'; + +@Entry +@Component +struct SpringMotionDemo { + @State positionX: number = 100; + @State positionY: number = 100; + diameter: number = 50; + + build() { + Column() { + Row() { + Circle({ width: this.diameter, height: this.diameter }) + .fill(Color.Blue) + .position({ x: this.positionX, y: this.positionY }) + .onTouch((event: TouchEvent) => { + if (event.type === TouchType.Move) { + // 跟手过程，使用responsiveSpringMotion曲线 + animateTo({ curve: curves.responsiveSpringMotion() }, () => { + // 减去半径，以使球的中心运动到手指位置 + this.positionX = event.touches[0].screenX - this.diameter / 2; + this.positionY = event.touches[0].screenY - this.diameter / 2; + console.info(`move, animateTo x:${this.positionX}, y:${this.positionY}`); + }) + } else if (event.type === TouchType.Up) { + // 离手时，使用springMotion曲线 + animateTo({ curve: curves.springMotion() }, () => { + this.positionX = 100; + this.positionY = 100; + console.info(`touchUp, animateTo x:100, y:100`); + }) + } + }) + } + .width("100%").height("80%") + .clip(true) // 如果球超出父组件范围，使球不可见 + .backgroundColor(Color.Orange) + + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Center }) { + Text("拖动小球").fontSize(16) + } + .width("100%") + + Row() { + Text('点击位置: [x: ' + Math.round(this.positionX) + ', y:' + Math.round(this.positionY) + ']').fontSize(16) + } + .padding(10) + .width("100%") + }.height('100%').width('100%') + } +} +``` + +![zh-cn_image_0000001647027001](figures/zh-cn_image_0000001647027001.gif) diff --git a/zh-cn/application-dev/ui/arkts-animation.md b/zh-cn/application-dev/ui/arkts-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..17825b822695aeef46bf2542832ea2fa57d3d461 --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-animation.md @@ -0,0 +1,32 @@ +# 动画概述 + + +UI（用户界面）中包含开发者与设备进行交互时所看到的各种组件（如时间、壁纸等）。属性作为接口，用于控制组件的行为。例如，开发者可通过位置属性调整组件在屏幕上的位置。 + + +属性值的变化，通常会引起UI的变化。动画可在UI发生改变时，添加流畅的过渡效果。以应用启动为例，当用户点击应用图标时，应用窗口应取代桌面，作为屏幕的主要显示内容。如果不添加动画，相关属性将在一瞬间完成变化，应用窗口直接替换桌面，出现不连贯的视觉感受。动画可以解决UI变化时在视觉上不连续的问题。 + + +ArkUI中提供多种动画接口（属性动画、转场动画等），用于驱动属性值按照设定的动画参数，从起始值逐渐变化到终点值。尽管变化过程中参数值并非绝对的连续，而是具有一定的离散性。但由于人眼会产生视觉暂留，所以最终看到的就是一个“连续“的动画。UI的一次改变称为一个动画帧，对应一次屏幕刷新。决定动画流畅度的一个重要指标就是帧率FPS（Frame Per Second），即每秒的动画帧数，帧率越高则动画就会越流畅。ArkUI中，动画参数包含了如动画时长、动画曲线等参数。动画曲线作为主要因素，决定了属性值变化的规律。以线性动画曲线为例，在动画时长内，属性值将从起点值匀速变化到终点值。属性过快或过慢的变化，都可能带来不好的视觉感受，影响用户体验。因此动画参数特别是动画曲线，需要结合场景和曲线特点进行设计和调整。 + + +动画接口驱动属性值按照动画参数决定的规律，从原来的状态连续过渡到新的状态，进而在UI上产生的连续视觉效果。本文将按照如下结构，提供各种动画的使用方法和注意事项，使开发者快速学习动画。 + + +![zh-cn_image_0000001595763076](figures/zh-cn_image_0000001595763076.png) + + + +- 属性动画：最基础的动画类型，按照动画参数逐帧驱动属性的变化，产生一帧帧的动画效果。 + +- 转场动画：为组件在出现和消失时添加过渡动画。为了保证动画一致性，部分接口动画曲线已内置，不支持开发者自定义。 + - 不推荐使用Ability去组合界面：Ability是一个任务，会在多任务界面独立显示一个卡片，Ability之间的跳转是任务之间的跳转。以应用内查看大图的典型场景为例，不建议应用内调用图库Ability去打开图片查看大图，会导致任务的跳转，图库Ability也会加入多任务界面中。正确的方式是应用内构建大图组件，通过模态转场去调起大图组件，所有的界面都在一个Ability内闭环。 + - 使用Navigation组件实现导航，不要使用page导航方式。page+router方式会导致页面之间的割裂，不利于实现联动的转场效果，并且不支持一次开发多端部署。 + +- 组件动画：组件提供默认动效（如List的滑动动效）便于开发者使用，同时部分组件还支持定制化动效。 + +- 动画曲线：介绍传统曲线和弹簧曲线的特点和使用方式。动画曲线影响属性值的运动规律，进而决定界面的动画效果。 + +- 动画衔接：介绍如何实现动画与动画之间、手势与动画之间的自然过渡。 + +- 高阶动画效果：介绍模糊、大阴影和颜色渐变等高阶效果接口的使用方法。 diff --git a/zh-cn/application-dev/ui/arkts-attribute-animation-apis.md b/zh-cn/application-dev/ui/arkts-attribute-animation-apis.md new file mode 100644 index 0000000000000000000000000000000000000000..5a122927bdf16e3c53c8c17acc57a762b4033ca1 --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-attribute-animation-apis.md @@ -0,0 +1,181 @@ +# 属性动画接口说明 + + +通过可动画属性改变引起UI上产生的连续视觉效果，即为属性动画。属性动画是最基础易懂的动画，ArkUI提供两种属性动画接口[animateTo](../reference/arkui-ts/ts-explicit-animation.md)和[animation](../reference/arkui-ts/ts-animatorproperty.md)驱动组件属性按照动画曲线等动画参数进行连续的变化，产生属性动画。 + + +| 隐式动画接口 | 作用域 | 原理 | 使用场景 | +| -------- | -------- | -------- | -------- | +| animateTo | 闭包内改变属性引起的界面变化。
作用于出现消失转场。 | - 通用的函数，对闭包前界面和闭包中的状态变量引起的界面之间的差异做动画。
- 支持多次调用，支持嵌套。 | - 适用对多个可动画属性配置相同动画参数的动画。
- 需要嵌套使用动画的场景。 | +| animation | 组件通过属性接口绑定的属性变化引起的界面变化。 | - 识别组件的可动画属性变化，自动添加动画。
- 组件的接口调用是从下往上执行，animation只会作用于在其之上的属性调用。
- 组件可以根据调用顺序对多个属性设置不同的animation。 | - 适用于对多个可动画属性配置不同参数动画的场景。 | + + +## 使用animateTo产生属性动画 + + +``` +animateTo(value: AnimateParam, event: () => void): void +``` + +[animateTo](../reference/arkui-ts/ts-explicit-animation.md)接口参数中，value指定[动画参数](../reference/arkui-ts/ts-explicit-animation.md#animateparam%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E)（包括时长、[曲线](../reference/apis/js-apis-curve.md#ohoscurves-%E6%8F%92%E5%80%BC%E8%AE%A1%E7%AE%97)等）event为动画的闭包函数，闭包内变量改变产生的属性动画将遵循相同的动画参数。 + + +```ts +import curves from '@ohos.curves' + +@Entry +@Component +struct AnimateToDemo { + @State animate: boolean = false; + // 第一步: 声明相关状态变量 + @State rotateValue: number = 0; // 组件一旋转角度 + @State translateY: number = 0; // 组件二偏移量 + @State opacityValue: number = 1; // 组件二透明度 + + // 第二步：将状态变量设置到相关可动画属性接口 + build() { + Column() { + // 组件一 + Column() { + Text('ArkUI') + .fontWeight(FontWeight.Bold) + .fontSize(20) + .fontColor(Color.White) + } + .justifyContent(FlexAlign.Center) + .width(150) + .height(150) + .borderRadius(10) + .rotate({ angle: this.rotateValue }) + .backgroundColor(0xf56c6c) + + // 组件二 + Column() { + Text('ArkUI') + .fontWeight(FontWeight.Bold) + .fontSize(20) + .fontColor(Color.White) + } + .justifyContent(FlexAlign.Center) + .width(150) + .height(150) + .backgroundColor(0x67C23A) + .borderRadius(10) + .opacity(this.opacityValue) + .translate({ y: this.translateY }) + + Button('Click') + .margin({ top: 120 }) + .onClick(() => { + this.animate = !this.animate; + // 第三步：通过隐式动画接口开启隐式动画 + animateTo({ curve: curves.springMotion() }, () => { + // 第四步：闭包内通过状态变量改变UI界面 + // 这里可以写任何能改变UI的逻辑比如数组添加，显隐控制，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画 + // 组件一的rotate属性发生变化，所以会给组件一添加rotate旋转动画 + this.rotateValue = this.animate ? 90 : 0; + // 组件二的scale属性发生变化，所以会给组件二添加scale缩放动画 + this.opacityValue = this.animate ? 0.6 : 1; + // 组件二的offset属性发生变化，所以会给组件二添加offset偏移动画 + this.translateY = this.animate ? 100 : 0; + }) + }) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + } +} +``` + +![zh-cn_image_0000001599958466](figures/zh-cn_image_0000001599958466.gif) + + +## 使用animation产生属性动画 + +相比于animateTo接口需要把要执行动画的属性的修改放在闭包中，[animation](../reference/arkui-ts/ts-animatorproperty.md)接口无需使用闭包，把animation接口加在要做属性动画的可动画属性后即可。animation只要检测到其绑定的可动画属性发生变化，就会自动添加属性动画，animateTo则必须在动画闭包内改变可动画属性的值从而生成动画。 + + +```ts +import curves from '@ohos.curves'; + +@Entry +@Component +struct AnimationDemo { + @State animate: boolean = false; + // 第一步: 声明相关状态变量 + @State rotateValue: number = 0; // 组件一旋转角度 + @State translateY: number = 0; // 组件二偏移量 + @State color: Color = Color.White; // 组件二字体颜色 + @State opacityValue: number = 1; // 父组件透明度 + + // 第二步：将状态变量设置到相关可动画属性接口 + build() { + Column() { + Column() { + // 组件一 + Text('ArkUI') + .fontWeight(FontWeight.Bold) + .fontSize(20) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .borderRadius(10) + .backgroundColor(0xf56c6c) + .rotate({ angle: this.rotateValue }) + // 第三步：通过隐式动画接口开启隐式动画，控件的函数调用顺序是从下往上的，这个animation会作用到上面的rotate属性 + .animation({ curve: curves.springMotion(0.3, 1.0) }) + .width(150) + .height(150) + + // 组件二 + Text('ArkUI') + .fontWeight(FontWeight.Bold) + .fontSize(20) + .fontColor(this.color) + // 第三步：通过隐式动画接口开启隐式动画，控件的函数调用顺序是从下往上的，这个animation会作用到上面的fontColor属性 + .animation({ curve: curves.springMotion(0.6, 1.2) }) + .textAlign(TextAlign.Center) + .borderRadius(10) + .backgroundColor(0x67C23A) + .width(150) + .height(150) + .translate({ y: this.translateY }) + // 第三步：通过隐式动画接口开启隐式动画，控件的函数调用顺序是从下往上的，这个animation会作用到上面的translate属性 + .animation({ curve: curves.springMotion(0.3, 0.6) }) + } + .justifyContent(FlexAlign.Center) + .opacity(this.opacityValue) + // 这个animation会作用到上面的opacity属性，父组件column的透明度变化，会导致其子节点的透明度也变化，所以这里会给column和其子节点的透明度属性都加动画 + .animation({ curve: curves.springMotion() }) + + // 第四步：通过状态变量改变UI界面，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画 + Button('Click') + .margin({ top: 120 }) + .onClick(() => { + this.animate = !this.animate; + // 组件一的rotate属性有变化，所以会给组件一加rotate动画 + this.rotateValue = this.animate ? 90 : 0; + // 组件二的translate属性有变化，所以会给组件二加translate动画 + this.translateY = this.animate ? 100 : 0; + // 组件二的fontColor属性有变化，所以会给组件二加fontColor动画 + this.color = this.animate ? Color.Black : Color.White; + // 父组件column的opacity属性有变化，会导致其子节点的透明度也变化，所以这里会给column和其子节点的透明度属性都加动画 + this.opacityValue = this.animate ? 0.6 : 1; + }) + + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + } +} +``` + +![zh-cn_image_0000001649279705](figures/zh-cn_image_0000001649279705.gif) + +> **说明：** +> - 在对组件的位置大小的变化做动画的时候，由于布局属性的改变会触发测量布局，性能开销大。[scale](../reference/arkui-ts/ts-universal-attributes-transformation.md)属性的改变不会触发测量布局，性能开销小。因此，在组件位置大小持续发生变化的场景，如跟手触发组件大小变化的场景，推荐适用scale。 +> +> - 属性动画应该作用于始终存在的组件，对于将要出现或者将要消失的组件的动画应该使用[转场动画](arkts-transition-overview.md)。 +> +> - 尽量不要使用动画结束回调。隐式动画是对已经发生的状态进行的动画，不需要开发者去处理结束的逻辑。如果要使用结束回调，一定要正确处理连续操作的数据管理。 diff --git a/zh-cn/application-dev/ui/arkts-attribute-animation-overview.md b/zh-cn/application-dev/ui/arkts-attribute-animation-overview.md new file mode 100644 index 0000000000000000000000000000000000000000..6997de02c687223eb59f95159bb6006c173babeb --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-attribute-animation-overview.md @@ -0,0 +1,36 @@ +# 属性动画概述 + + +属性接口（以下简称属性）包含尺寸属性、布局属性、位置属性等多种类型，用于控制组件的行为。针对当前界面上的组件，其部分属性（如位置属性）的变化会引起UI的变化。添加动画可以让属性值从起点逐渐变化到终点，从而产生连续的动画效果。根据变化时是否能够添加动画，可以将属性分为可动画属性和不可动画属性。判断一种属性是否适合作为可动画属性主要有两个标准： + + +- 属性变化能够引起UI的变化。例如，[enabled](../reference/arkui-ts/ts-universal-attributes-enable.md)属性用于控制组件是否可以响应点击、触摸等事件，但enable属性的变化不会引起UI的变化，因此不适合作为可动画属性。 + +- 属性在变化时适合添加动画作为过渡。例如，[focusable](../reference/arkui-ts/ts-universal-attributes-focus.md)属性决定当前组件是否可以获得焦点，当focusable属性发生变化时，应立即切换到终点值以响应用户行为，不应该加入动画效果，因此不适合作为可动画属性。 + + +通常，可动画属性的参数数据类型必须具备连续性，即可以通过插值方法来填补数据点之间的空隙，达到视觉上的连续效果。但属性的参数数据类型是否能够进行插值并非决定属性是否可动画的关键因素。例如，对于设置元素水平方向布局的[direction](../reference/arkui-ts/ts-universal-attributes-location.md#%E4%BD%8D%E7%BD%AE%E8%AE%BE%E7%BD%AE)属性，其参数数据类型是枚举值。但是，由于位置属性是可动画属性，ArkUI同样支持在其属性值改变引起组件位置变化时添加动画。 + + +对于可动画属性，系统不仅提供通用属性，还支持自定义可动画属性。 + + +- 系统可动画属性：组件自带的支持改变UI界面的属性接口，如位置、缩放、模糊等。 + +- [自定义可动画属性](../quick-start/arkts-animatable-extend.md)：ArkUI提供[@AnimatableExtend](../quick-start/arkts-animatable-extend.md)装饰器用于自定义可动画属性。开发者可从自定义绘制的内容中抽象出可动画属性，用于控制每帧绘制的内容，如自定义绘制音量图标。通过自定义可动画属性，可以为ArkUI中部分原本不支持动画的属性添加动画。 + + + **表1** 属性接口分类表 + +| 属性 | 分类 | 说明 | +| -------- | -------- | -------- | -------- | +| 可动画属性 | 系统可动画属性 | 布局属性 | 位置、大小、内边距、外边距、对齐方式、权重等。 | +| 仿射变换 | 平移、旋转、缩放、锚点等。 | +| 背景 | 背景颜色、背景模糊等。 | +| 内容 | 文字大小、文字颜色，图片对齐方式、模糊等。 | +| 前景 | 前景颜色等。 | +| Overlay | Overlay属性等。 | +| 外观 | 透明度、圆角、边框、阴影等。 | +| ... | ... | +| 自定义可动画属性 | - | 通过自定义属性动画机制抽象出的可动画属性。 | +| 不可动画属性 | - | zIndex、focusable等。 | diff --git a/zh-cn/application-dev/ui/arkts-blur-effect.md b/zh-cn/application-dev/ui/arkts-blur-effect.md new file mode 100644 index 0000000000000000000000000000000000000000..f3c8479d2ff9247487537ba05f535e9a9232e71f --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-blur-effect.md @@ -0,0 +1,620 @@ +# 模糊 + + +模糊可以用来体现界面空间的纵深感，区分前后元素的层级关系 + + +| 接口 | 说明 | +| -------- | -------- | +| [backdropBlur](../reference/arkui-ts/ts-universal-attributes-image-effect.md) | 为当前组件添加背景模糊效果，入参为模糊半径。 | +| [blur](../reference/arkui-ts/ts-universal-attributes-image-effect.md) | 为当前组件添加内容模糊效果，入参为模糊半径。 | +| [backgroundBlurStyle](../reference/arkui-ts/ts-universal-attributes-background.md) | 为当前组件添加背景模糊效果，入参为模糊样式。 | +| [foregroundBlurStyle](../reference/arkui-ts/ts-universal-attributes-foreground-blur-style.md) | 为当前组件添加内容模糊效果，入参为模糊样式。 | + + +## 使用backdropBlur为组件添加背景模糊 + + +```ts +@Entry +@Component +struct BlurEffectsExample { + build() { + Column({ space: 10 }) { + Text('backdropblur') + .width('90%') + .height('90%') + .fontSize(20) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .backdropBlur(10) // 对背景进行模糊 + .backgroundImage($r('app.media.share')) + .backgroundImageSize({ width: 400, height: 300 }) + } + .width('100%') + .height('50%') + .margin({ top: 20 }) + } +} +``` + + + +![zh-cn_image_0000001599812870](figures/zh-cn_image_0000001599812870.png) + + +## 使用blur为组件添加内容模糊 + + +```ts +@Entry +@Component +struct Index { + @State radius: number = 0; + @State text: string = ''; + @State y: string = '手指不在屏幕上'; + + aboutToAppear() { + this.text = "按住屏幕上下滑动\n" + "当前手指所在y轴位置 ： " + this.y + + "\n" + "当前图片模糊程度为 : " + this.radius; + } + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) { + Text(this.text) + .height(200) + .fontSize(20) + .fontWeight(FontWeight.Bold) + .fontFamily("cursive") + .fontStyle(FontStyle.Italic) + Image($r("app.media.wall")) + .blur(this.radius) // 使用blur接口为照片组件添加背景模糊效果 + .height('100%') + .width("100%") + .objectFit(ImageFit.Cover) + }.height('100%') + .width("100%") + .onTouch((event: TouchEvent) => { + if (event.type === TouchType.Move) { + this.y = parseInt(event.touches[0].y.toString()).toString(); + this.radius = parseInt(this.y) / 10; // 根据跟手过程中的滑动距离修改模糊半径，配合模糊接口，形成跟手模糊效果 + } + if (event.type === TouchType.Up) { + this.radius = 0; + this.y = '手指离开屏幕'; + } + this.text = "按住屏幕上下滑动\n" + "当前手指所在y轴位置 ： " + this.y + + "\n" + "当前图片模糊程度为 : " + this.radius; + }) + } +} +``` + + + +![zh-cn_image_0000001599813588](figures/zh-cn_image_0000001599813588.gif) + + +## 使用backgroundBlurStyle为组件添加背景模糊效果 + + +```ts +@Entry +@Component +struct BackDropBlurStyleDemo { + build() { + Grid() { + GridItem() { + Column() { + Column() { + Text('原图') + .fontSize(20) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + + Text('原图') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('Thin') + .fontSize(20) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + // BlurStyle.Thin: 为组件添加轻薄材质模糊效果 + // ThemeColorMode.LIGHT: 固定使用浅色模式效果 + // AdaptiveColor.DEFAULT: 不使用取色模糊，使用默认的颜色作为蒙版颜色 + // scale: 背景材质模糊效果程度，默认值是1 + .backgroundBlurStyle(BlurStyle.Thin, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('Thin') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('Regular') + .fontSize(20) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + .backgroundBlurStyle(BlurStyle.Regular, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('Regular') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('Thick') + .fontSize(20) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + .backgroundBlurStyle(BlurStyle.Thick, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('Thick') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('BACKGROUND_THIN') + .fontSize(12) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + .backgroundBlurStyle(BlurStyle.BACKGROUND_THIN, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('BACKGROUND_THIN') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('BACKGROUND_REGULAR') + .fontSize(12) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + .backgroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('BACKGROUND_REGULAR') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('BACKGROUND_THICK') + .fontSize(12) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + .backgroundBlurStyle(BlurStyle.BACKGROUND_THICK, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('BACKGROUND_THICK') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('BACKGROUND_ULTRA_THICK') + .fontSize(12) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('BACKGROUND_ULTRA_THICK') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + } + .columnsTemplate('1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr') + .width('100%') + .height('100%') + .margin({ top: 40 }) + } +} +``` + + + +![zh-cn_image_0000001649455517](figures/zh-cn_image_0000001649455517.png) + + + +## 使用foregroundBlurStyle为组件添加内容模糊效果 + + +```ts +@Entry +@Component +struct ForegroundBlurStyleDemo { + build() { + Grid() { + GridItem() { + Column() { + Column() { + Text('原图') + .fontSize(20) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + + Text('原图') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('Thin') + .fontSize(20) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + // BlurStyle.Thin: 为组件添加轻薄材质模糊效果 + // ThemeColorMode.LIGHT: 固定使用浅色模式效果 + // AdaptiveColor.DEFAULT: 不使用取色模糊，使用默认的颜色作为蒙版颜色 + // scale: 背景材质模糊效果程度，默认值是1 + .foregroundBlurStyle(BlurStyle.Thin, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('Thin') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('Regular') + .fontSize(20) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + .foregroundBlurStyle(BlurStyle.Regular, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('Regular') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('Thick') + .fontSize(20) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + .foregroundBlurStyle(BlurStyle.Thick, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('Thick') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('BACKGROUND_THIN') + .fontSize(12) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + .foregroundBlurStyle(BlurStyle.BACKGROUND_THIN, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('BACKGROUND_THIN') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('BACKGROUND_REGULAR') + .fontSize(12) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + .foregroundBlurStyle(BlurStyle.BACKGROUND_REGULAR, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('BACKGROUND_REGULAR') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('BACKGROUND_THICK') + .fontSize(12) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + .foregroundBlurStyle(BlurStyle.BACKGROUND_THICK, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('BACKGROUND_THICK') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + + GridItem() { + Column() { + Column() { + Text('BACKGROUND_ULTRA_THICK') + .fontSize(12) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .height(100) + .aspectRatio(1) + .borderRadius(10) + .backgroundImage($r('app.media.share')) + .foregroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK, { + colorMode: ThemeColorMode.LIGHT, + adaptiveColor: AdaptiveColor.DEFAULT, + scale: 0.1 + }) + + Text('BACKGROUND_ULTRA_THICK') + .fontSize(12) + .fontColor(Color.Black) + } + .height('100%') + .justifyContent(FlexAlign.Start) + } + .width(200) + .height(200) + } + .columnsTemplate('1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr') + .width('100%') + .height('100%') + .margin({ top: 40 }) + } +} +``` + + + +![zh-cn_image_0000001599658168](figures/zh-cn_image_0000001599658168.png) diff --git a/zh-cn/application-dev/ui/arkts-color-effect.md b/zh-cn/application-dev/ui/arkts-color-effect.md new file mode 100644 index 0000000000000000000000000000000000000000..96c2fec5a0651580bf6a4ac0a82985b45434c91b --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-color-effect.md @@ -0,0 +1,329 @@ +# 色彩 + + +## 色彩 + +通过颜色渐变接口，可以设置组件的背景颜色渐变效果，实现在两个或多个指定的颜色之间进行平稳的过渡。 + +| 接口 | 说明 | +| -------- | -------- | +| [linearGradient](../reference/arkui-ts/ts-universal-attributes-gradient-color.md) | 为当前组件添加线性渐变的颜色渐变效果。 | +| [sweepGradient](../reference/arkui-ts/ts-universal-attributes-gradient-color.md) | 为当前组件添加角度渐变的颜色渐变效果。 | +| [radialGradient](../reference/arkui-ts/ts-universal-attributes-gradient-color.md) | 为当前组件添加径向渐变的颜色渐变效果。 | + + +## 为组件添加线性渐变效果 + + +```ts +@Entry +@Component +struct LinearGradientDemo { + build() { + Grid() { + GridItem() { + Column() { + Text('angle: 180') + .fontSize(15) + } + .width(100) + .height(100) + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .linearGradient({ + // 0点方向顺时针旋转为正向角度，线性渐变起始角度的默认值为180° + colors: [ + [0xf56c6c, 0.0], // 颜色断点1的颜色和比重，对应组件在180°方向上的起始位置 + [0xffffff, 1.0], // 颜色断点2的颜色和比重，对应组件在180°方向上的终点位置 + ] + }) + } + + GridItem() { + Column() { + Text('angle: 45') + .fontSize(15) + } + .width(100) + .height(100) + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .linearGradient({ + angle: 45, // 设置颜色渐变起始角度为顺时针方向45° + colors: [ + [0xf56c6c, 0.0], + [0xffffff, 1.0], + ] + }) + } + + GridItem() { + Column() { + Text('repeat: true') + .fontSize(15) + } + .width(100) + .height(100) + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .linearGradient({ + repeating: true, // 在当前组件内0.3到1.0区域内重复0到0.3区域的颜色渐变效果 + colors: [ + [0xf56c6c, 0.0], + [0xE6A23C, .3], + ] + }) + } + + GridItem() { + Column() { + Text('repeat: fasle') + .fontSize(15) + } + .width(100) + .height(100) + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .linearGradient({ + colors: [ + [0xf56c6c, 0.0], // repeating默认为false，此时组件内只有0到0.3区域内存在颜色渐变效果 + [0xE6A23C, .3], + ] + }) + } + } + .columnsGap(10) + .rowsGap(10) + .columnsTemplate('1fr 1fr') + .rowsTemplate('1fr 1fr 1fr') + .width('100%') + .height('100%') + } +} +``` + +![zh-cn_image_0000001641176829](figures/zh-cn_image_0000001641176829.png) + + +## 为组件添加角度渐变效果 + + +```ts +@Entry +@Component +struct SweepGradientDemo { + build() { + Grid() { + GridItem() { + Column() { + Text('center: 50') + .fontSize(15) + } + .width(100) + .height(100) + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .sweepGradient({ + center: [50, 50], // 角度渐变中心点 + start: 0, // 角度渐变的起点 + end: 360, // 角度渐变的终点。 + repeating: true, // 渐变效果在重复 + colors: [ + // 当前组件中，按照中心点和渐变的起点和终点值, + // 角度区域为0-0.125的范围，从颜色断点1的颜色渐变到颜色断点2的颜色, + // 角度区域0.125到0.25的范围，从颜色断点2的颜色渐变到颜色断点3的颜色, + // 因为repeating设置为true，角度区域0.25到1的范围，重复区域0到0.25的颜色渐变效果 + [0xf56c6c, 0], // 颜色断点1的颜色和比重，对应角度为0*360°=0°，角点为中心点 + [0xffffff, 0.125], // 颜色断点2的颜色和比重 + [0x409EFF, 0.25] // 颜色断点3的颜色和比重 + ] + }) + } + + GridItem() { + Column() { + Text('center: 0') + .fontSize(15) + } + .width(100) + .height(100) + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .sweepGradient({ + center: [0, 0], // 角度渐变中心点，当前为组件的左上角坐标 + start: 0, + end: 360, + repeating: true, + colors: [ + // 当前组件中，因为角度渐变中心是组件的左上角，所以从颜色断点1到颜色断点3的角度范围，恰好可以覆盖整个组件 + [0xf56c6c, 0], // 颜色断点1的颜色和比重，对应角度为0*360°=0° + [0xffffff, 0.125], // 色断点2的颜色和比重，对应角度为0.125*360°=45° + [0x409EFF, 0.25] // 色断点3的颜色和比重，对应角度为0.25*360°=90° + ] + }) + } + + GridItem() { + Column() { + Text('repeat: true') + .fontSize(15) + } + .width(100) + .height(100) + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .sweepGradient({ + center: [50, 50], + start: 0, + end: 360, + repeating: true, + colors: [ + [0xf56c6c, 0], + [0xffffff, 0.125], + [0x409EFF, 0.25] + ] + }) + } + + GridItem() { + Column() { + Text('repeat: false') + .fontSize(15) + } + .width(100) + .height(100) + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .sweepGradient({ + center: [50, 50], + start: 0, + end: 360, + repeating: false, //只在颜色断点角度覆盖范围内产生颜色渐变效果，其余范围内不重复 + colors: [ + [0xf56c6c, 0], + [0xffffff, 0.125], + [0x409EFF, 0.25] + ] + }) + } + } + .columnsGap(10) + .rowsGap(10) + .columnsTemplate('1fr 1fr') + .rowsTemplate('1fr 1fr 1fr') + .width('100%') + .height(437) + } +} +``` + +![zh-cn_image_0000001641177073](figures/zh-cn_image_0000001641177073.png) + + +## 为组件添加径向渐变效果 + + +```ts +@Entry +@Component +struct radialGradientDemo { + build() { + Grid() { + GridItem() { + Column() { + Text('center: 50') + .fontSize(15) + } + .width(100) + .height(100) + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .radialGradient({ + center: [50, 50], // 径向渐变中心点 + radius: 100, // 径向渐变半径 + repeating: true, // 允许在组件内渐变范围外重复按照渐变范围内效果着色 + colors: [ + // 组件内以[50，50]为中心点，在半径为0到12.5的范围内从颜色断点1的颜色渐变到颜色断点2的颜色, + // 在半径为12.5到25的范围内从颜色断点2的颜色渐变到颜色断点3的颜色, + // 组件外其他半径范围内按照半径为0到25的渐变效果重复着色 + [0xf56c6c, 0], // 颜色断点1的颜色和比重，对应半径为0*100=0 + [0xffffff, 0.125], // 颜色断点2的颜色和比重，对应半径为0.125*100=12.5 + [0x409EFF, 0.25] // 颜色断点3的颜色和比重，对应半径为0.25*100=25 + ] + }) + } + + GridItem() { + Column() { + Text('center: 0') + .fontSize(15) + } + .width(100) + .height(100) + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .radialGradient({ + center: [0, 0], // 径向渐变中心点，当前为组件左上角坐标 + radius: 100, + repeating: true, + colors: [ + [0xf56c6c, 0], + [0xffffff, 0.125], + [0x409EFF, 0.25] + ] + }) + } + + GridItem() { + Column() { + Text('repeat: true') + .fontSize(15) + } + .width(100) + .height(100) + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .radialGradient({ + center: [50, 50], + radius: 100, + repeating: true, + colors: [ + [0xf56c6c, 0], + [0xffffff, 0.125], + [0x409EFF, 0.25] + ] + }) + } + + GridItem() { + Column() { + Text('repeat: false') + .fontSize(15) + } + .width(100) + .height(100) + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .radialGradient({ + center: [50, 50], + radius: 100, + repeating: false, // 在组件内渐变范围外不重复按照渐变范围内效果着色 + colors: [ + [0xf56c6c, 0], + [0xffffff, 0.125], + [0x409EFF, 0.25] + ] + }) + } + } + .columnsGap(10) + .rowsGap(10) + .columnsTemplate('1fr 1fr') + .rowsTemplate('1fr 1fr 1fr') + .width('100%') + .height('100%') + } +} +``` + +![zh-cn_image_0000001592904050](figures/zh-cn_image_0000001592904050.png) diff --git a/zh-cn/application-dev/ui/arkts-component-animation.md b/zh-cn/application-dev/ui/arkts-component-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..0d113cda82ed7f5f08a1a55fb513c57429ddae2b --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-component-animation.md @@ -0,0 +1,352 @@ +# 组件动画 + + +ArkUI为组件提供了通用的属性动画和转场动画能力的同时，还为一些组件提供了默认的动画效果。例如，[List](../reference/arkui-ts/ts-container-list.md)的滑动动效，[Button](../reference/arkui-ts/ts-basic-components-button.md#button)的点击动效，是组件自带的默认动画效果。在组件默认动画效果的基础上，开发者还可以通过属性动画和转场动画对容器组件内的子组件动效进行定制。 + + +## 使用组件默认动画 + +组件默认动效具备以下功能： + +- 提示用户当前状态，例如用户点击Button组件时，Button组件默认变灰，用户即确定完成选中操作。 + +- 提升界面精致程度和生动性。 + +- 减少开发者工作量，例如列表滑动组件自带滑动动效，开发者直接调用即可。 + +更多效果，可以参考[组件说明](../reference/arkui-ts/ts-components-summary.md)。 + +示例代码和效果如下。 + + +```ts +@Entry +@Component +struct ComponentDemo { + build() { + Row() { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .select(true) + .selectedColor(0xed6f21) + .size({ width: 50, height: 50 }) + + Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) + .select(false) + .selectedColor(0x39a2db) + .size({ width: 50, height: 50 }) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + } +} +``` + +![zh-cn_image_0000001649338585](figures/zh-cn_image_0000001649338585.gif) + + + +## 打造组件定制化动效 + +部分组件支持通过[属性动画](arkts-attribute-animation.md)和[转场动画](arkts-transition.md)自定义组件子Item的动效，实现定制化动画效果。例如，[Scorll](../reference/arkui-ts/ts-container-scroll.md)组件中可对各个子组件在滑动时的动画效果进行定制。 + +- 在滑动或者点击操作时通过改变各个Scroll子组件的仿射属性来实现各种效果。 + +- 如果要在滑动过程中定制动效，可在滑动回调onScroll中监控滑动距离，并计算每个组件的仿射属性。也可以自己定义手势，通过手势监控位置，手动调用ScrollTo改变滑动位置。 + +- 在滑动回调onScrollStop或手势结束回调中对滑动的最终位置进行微调。 + +定制Scroll组件子组件滑动动效示例代码和效果如下。 + + +```ts +import curves from '@ohos.curves'; +import window from '@ohos.window'; +import display from '@ohos.display'; +import mediaquery from '@ohos.mediaquery'; + +/** + * 窗口、屏幕相关信息管理类 + */ +export class WindowManager { + private static instance: WindowManager = null; + private displayInfo: display.Display = null; + private orientationListener = mediaquery.matchMediaSync('(orientation: landscape)'); + private portraitFunc = null; + + constructor() { + this.portraitFunc = this.onPortrait.bind(this); + this.orientationListener.on('change', this.portraitFunc) + this.loadDisplayInfo() + } + + /** + * 设置主window窗口 + * @param win 当前app窗口 + */ + setMainWin(win: window.Window) { + if (win == null) { + return + } + globalThis.mainWin = win; + win.on("windowSizeChange", (data: window.Size) => { + if (globalThis.mainWindowSize == undefined || globalThis.mainWindowSize == null) { + globalThis.mainWindowSize = data; + } else { + if (globalThis.mainWindowSize.width == data.width && globalThis.mainWindowSize.height == data.height) { + return + } + globalThis.mainWindowSize = data; + } + + let winWidth = this.getMainWindowWidth(); + AppStorage.SetOrCreate('mainWinWidth', winWidth) + let winHeight = this.getMainWindowHeight(); + AppStorage.SetOrCreate('mainWinHeight', winHeight) + globalThis.context.eventHub.emit("windowSizeChange", winWidth, winHeight) + }) + } + + static getInstance(): WindowManager { + if (this.instance == null) { + this.instance = new WindowManager(); + } + return this.instance + } + + private onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) { + if (mediaQueryResult.matches == AppStorage.Get('isLandscape')) { + return + } + AppStorage.SetOrCreate('isLandscape', mediaQueryResult.matches) + this.loadDisplayInfo() + } + + /** + * 切换屏幕方向 + * @param ori 常量枚举值：window.Orientation + */ + changeOrientation(ori: window.Orientation) { + if (globalThis.mainWin != null) { + globalThis.mainWin.setPreferredOrientation(ori) + } + } + + private loadDisplayInfo() { + this.displayInfo = display.getDefaultDisplaySync() + AppStorage.SetOrCreate('displayWidth', this.getDisplayWidth()) + AppStorage.SetOrCreate('displayHeight', this.getDisplayHeight()) + } + + /** + * 获取main窗口宽度，单位vp + */ + getMainWindowWidth(): number { + return globalThis.mainWindowSize != null ? px2vp(globalThis.mainWindowSize.width) : 0 + } + + /** + * 获取main窗口高度，单位vp + */ + getMainWindowHeight(): number { + return globalThis.mainWindowSize != null ? px2vp(globalThis.mainWindowSize.height) : 0 + } + + /** + * 获取屏幕宽度，单位vp + */ + getDisplayWidth(): number { + return this.displayInfo != null ? px2vp(this.displayInfo.width) : 0 + } + + /** + * 获取屏幕高度，单位vp + */ + getDisplayHeight(): number { + return this.displayInfo != null ? px2vp(this.displayInfo.height) : 0 + } + + /** + * 释放资源 + */ + release() { + if (this.orientationListener) { + this.orientationListener.off('change', this.portraitFunc) + } + if (globalThis.mainWin != null) { + globalThis.mainWin.off('windowSizeChange') + } + WindowManager.instance = null; + } +} + +/** + * 封装任务卡片信息数据类 + */ +export class TaskData { + bgColor: Color | string | Resource = Color.White; + index: number = 0; + taskInfo: string = 'music'; + + constructor(bgColor: Color | string | Resource, index: number, taskInfo: string) { + this.bgColor = bgColor; + this.index = index; + this.taskInfo = taskInfo; + } +} + +export const taskDataArr: Array = + [ + new TaskData(0xFA8072, 0, 'music'), + new TaskData(0xF4A460, 1, 'mall'), + new TaskData(0xFFFACD, 2, 'photos'), + new TaskData(0x98FB98, 3, 'setting'), + new TaskData(0x7FFFD4, 4, 'call'), + new TaskData(0x87CEFA, 5, 'music'), + new TaskData(0x7B68EE, 6, 'mall'), + new TaskData(0x909399, 7, 'photos'), + new TaskData(0x888888, 8, 'setting'), + new TaskData(0xFFC0CB, 9, 'call'), + new TaskData(0xFFC0CB, 10, 'music'), + new TaskData(0x888888, 11, 'mall'), + new TaskData(0x909399, 12, 'photos'), + new TaskData(0x7B68EE, 13, 'setting'), + new TaskData(0x87CEFA, 14, 'call'), + new TaskData(0x7FFFD4, 15, 'music'), + new TaskData(0x98FB98, 16, 'mall'), + new TaskData(0xFFFACD, 17, 'photos'), + new TaskData(0xF4A460, 18, 'setting'), + new TaskData(0xFA8072, 19, 'call'), + ]; + +@Entry +@Component +export struct TaskSwitchMainPage { + displayWidth: number = WindowManager.getInstance().getDisplayWidth(); + scroller: Scroller = new Scroller(); + bgImage: Resource = $r('app.media.share'); + cardSpace: number = 0; // 卡片间距 + cardWidth: number = this.displayWidth / 2 - this.cardSpace / 2; // 卡片宽度 + cardHeight: number = 400; // 卡片高度 + cardPosition: Array = []; // 卡片初始位置 + clickIndex: boolean = false; + @State taskViewOffsetX: number = 0; + @State cardOffset: number = this.displayWidth / 4; + lastCardOffset: number = this.cardOffset; + startTime: number + + // 每个卡片初始位置 + aboutToAppear() { + for (let i = 0; i < taskDataArr.length; i++) { + this.cardPosition[i] = i * (this.cardWidth + this.cardSpace); + } + } + + // 每个卡片位置 + getProgress(index: number): number { + let progress = (this.cardOffset + this.cardPosition[index] - this.taskViewOffsetX + this.cardWidth / 2) / this.displayWidth; + return progress + } + + build() { + Stack({ alignContent: Alignment.Bottom }) { + // 背景 + Column() + .width('100%') + .height('100%') + .backgroundColor(0xF0F0F0) + + // 滑动组件 + Scroll(this.scroller) { + Row({ space: this.cardSpace }) { + ForEach(taskDataArr, (item, index) => { + Column() + .width(this.cardWidth) + .height(this.cardHeight) + .backgroundColor(item.bgColor) + .borderStyle(BorderStyle.Solid) + .borderWidth(1) + .borderColor(0xAFEEEE) + .borderRadius(15) + // 计算子组件的仿射属性 + .scale((this.getProgress(index) >= 0.4 && this.getProgress(index) <= 0.6) ? + { + x: 1.1 - Math.abs(0.5 - this.getProgress(index)), + y: 1.1 - Math.abs(0.5 - this.getProgress(index)) + } : + { x: 1, y: 1 }) + .animation({ curve: Curve.Smooth }) + // 滑动动画 + .translate({ x: this.cardOffset }) + .animation({ curve: curves.springMotion() }) + .zIndex((this.getProgress(index) >= 0.4 && this.getProgress(index) <= 0.6) ? 2 : 1) + }, item => item) + } + .width((this.cardWidth + this.cardSpace) * (taskDataArr.length + 1)) + .height('100%') + } + .gesture( + GestureGroup(GestureMode.Parallel, + PanGesture({ direction: PanDirection.Horizontal, distance: 5 }) + .onActionStart((event: GestureEvent) => { + this.startTime = event.timestamp; + }) + .onActionUpdate((event: GestureEvent) => { + this.cardOffset = this.lastCardOffset + event.offsetX; + }) + .onActionEnd((event: GestureEvent) => { + let time = event.timestamp - this.startTime; + let speed = event.offsetX / (time / 1000000000); + let moveX = Math.pow(speed, 2) / 7000 * (speed > 0 ? 1 : -1); + + this.cardOffset += moveX; + // 左滑大于最右侧位置 + let cardOffsetMax = -(taskDataArr.length - 1) * (this.displayWidth / 2); + if (this.cardOffset < cardOffsetMax) { + this.cardOffset = cardOffsetMax; + } + // 右滑大于最左侧位置 + if (this.cardOffset > this.displayWidth / 4) { + this.cardOffset = this.displayWidth / 4; + } + + // 左右滑动距离不满足/满足切换关系时，补位/退回 + let remainMargin = this.cardOffset % (this.displayWidth / 2); + if (remainMargin < 0) { + remainMargin = this.cardOffset % (this.displayWidth / 2) + this.displayWidth / 2; + } + if (remainMargin <= this.displayWidth / 4) { + this.cardOffset += this.displayWidth / 4 - remainMargin; + } else { + this.cardOffset -= this.displayWidth / 4 - (this.displayWidth / 2 - remainMargin); + } + + // 记录本次滑动偏移量 + this.lastCardOffset = this.cardOffset; + }) + ), GestureMask.IgnoreInternal) + .scrollable(ScrollDirection.Horizontal) + .scrollBar(BarState.Off) + + // 滑动到首尾位置 + Button('Move to first/last') + .backgroundColor(0x888888) + .margin({ bottom: 30 }) + .onClick(() => { + this.clickIndex = !this.clickIndex; + + if (this.clickIndex) { + this.cardOffset = this.displayWidth / 4; + } else { + this.cardOffset = this.displayWidth / 4 - (taskDataArr.length - 1) * this.displayWidth / 2; + } + this.lastCardOffset = this.cardOffset; + }) + } + .width('100%') + .height('100%') + } +} +``` + +![zh-cn_image_0000001599808406](figures/zh-cn_image_0000001599808406.gif) diff --git a/zh-cn/application-dev/ui/arkts-custom-attribute-animation.md b/zh-cn/application-dev/ui/arkts-custom-attribute-animation.md new file mode 100644 index 0000000000000000000000000000000000000000..56659e4eb4581defbb5e7f06ef1f7c6c14440cbe --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-custom-attribute-animation.md @@ -0,0 +1,251 @@ +# 自定义属性动画 + + +属性动画是可动画属性的参数值发生变化时，引起UI上产生的连续视觉效果。当参数值发生连续变化，且设置到可以引起UI发生变化的属性接口上时，就可以实现属性动画。 + + +ArkUI提供[@AnimatableExtend](../quick-start/arkts-animatable-extend.md)装饰器，用于自定义可动画属性接口。由于参数的数据类型必须具备一定程度的连续性，自定义可动画属性接口的参数类型仅支持number类型和实现[AnimtableArithmetic](../quick-start/arkts-animatable-extend.md#animtablearithmetict%E6%8E%A5%E5%8F%A3%E8%AF%B4%E6%98%8E)接口的自定义类型。通过自定义可动画属性接口和可动画数据类型，在使用animateTo或animation执行动画时，通过逐帧回调函数修改不可动画属性接口的值，能够让不可动画属性接口实现动画效果。 + + +## 使用number数据类型和\@AnimatableExtend装饰器改变字体大小 + + +```ts +// 第一步：使用@AnimatableExtend装饰器，自定义可动画属性接口 +@AnimatableExtend(Text) function animatableFontSize(size: number) { + .fontSize(size) // 调用系统属性接口 +} + +@Entry +@Component +struct AnimatablePropertyExample { + @State fontSize: number = 20; + + build() { + Column() { + Text("AnimatableProperty") + .animatableFontSize(this.fontSize) // 第二步：将自定义可动画属性接口设置到组件上 + .animation({ duration: 1000, curve: "ease" }) // 第三步:为自定义可动画属性接口绑定动画 + Button("Play") + .onClick(() => { + this.fontSize = this.fontSize == 20 ? 36 : 20; // 第四步：改变自定义可动画属性的参数，产生动画 + }) + }.width("100%") + .padding(10) + } +} +``` + + + +![zh-cn_image_0000001600119626](figures/zh-cn_image_0000001600119626.gif) + + +## 使用自定义数据类型和\@AnimatableExtend装饰器改变折线 + + +```ts +declare type Point = [x: number, y: number]; + +// 定义可动画属性接口的参数类型，实现AnimtableArithmetic接口中加法、减法、乘法和判断相等函数 +class PointClass extends Array { + constructor(value: Point) { + super(value[0], value[1]) + } + + add(rhs: PointClass): PointClass { + let result = new Array() as Point; + for (let i = 0; i < 2; i++) { + result.push(rhs[i] + this[i]) + } + return new PointClass(result); + } + + subtract(rhs: PointClass): PointClass { + let result = new Array() as Point; + for (let i = 0; i < 2; i++) { + result.push(this[i] - rhs[i]); + } + return new PointClass(result); + } + + multiply(scale: number): PointClass { + let result = new Array() as Point; + for (let i = 0; i < 2; i++) { + result.push(this[i] * scale) + } + return new PointClass(result); + } +} + +// 定义可动画属性接口的参数类型，实现AnimtableArithmetic接口中加法、减法、乘法和判断相等函数 +// 模板T支持嵌套实现AnimtableArithmetic的类型 +class PointVector extends Array implements AnimatableArithmetic> { + constructor(initialValue: Array) { + super(); + if (initialValue.length) { + initialValue.forEach(p => this.push(new PointClass(p))) + } + } + + // implement the IAnimatableArithmetic interface + plus(rhs: PointVector): PointVector { + let result = new PointVector([]); + const len = Math.min(this.length, rhs.length) + for (let i = 0; i < len; i++) { + result.push(this[i].add(rhs[i])) + } + return result; + } + + subtract(rhs: PointVector): PointVector { + let result = new PointVector([]); + const len = Math.min(this.length, rhs.length) + for (let i = 0; i < len; i++) { + result.push(this[i].subtract(rhs[i])) + } + return result; + } + + multiply(scale: number): PointVector { + let result = new PointVector([]); + for (let i = 0; i < this.length; i++) { + result.push(this[i].multiply(scale)) + } + return result; + } + + equals(rhs: PointVector): boolean { + if (this.length !== rhs.length) { + return false; + } + for (let index = 0, size = this.length; index < size; ++index) { + if (this[index][0] !== rhs[index][0] || this[index][1] !== rhs[index][1]) { + return false; + } + } + return true; + } +} + +function randomInt(min, max) { + return Math.floor(Math.random() * (max - min) + min); +} + +// 自定义可动画属性接口 +@AnimatableExtend(Polyline) function animatablePoints(points: PointVector) { + .points(points) +} + +// 自定义可动画属性接口 +@AnimatableExtend(Text) function animatableFontSize(size: number) { + .fontSize(size) +} + +@Entry +@Component +struct AnimatedShape { + @State pointVec1: PointVector = new PointVector([ + [50, randomInt(0, 200)], + [100, randomInt(0, 200)], + [150, randomInt(0, 200)], + [250, randomInt(0, 200)], + [350, randomInt(0, 200)] + ]); + @State pointVec2: PointVector = new PointVector([ + [70, randomInt(0, 200)], + [120, randomInt(0, 200)], + [180, randomInt(0, 200)], + [220, randomInt(0, 200)], + [320, randomInt(0, 200)] + ]); + @State color: Color = Color.Green; + @State fontSize: number = 20.0; + @State polyline1Vec: PointVector = this.pointVec1; + @State polyline2Vec: PointVector = this.pointVec2; + + build() { + Column() { + Text("AnimatableExtend test") + .width(400) + .height(30) + .margin(1) + .fontSize(25) + .textAlign(TextAlign.Center) + .backgroundColor("#ffee44") + .border({ width: '1vp', color: "#88ff00", radius: 20, style: BorderStyle.Solid }) + + Polyline() + .width(400) + .height(240) + .backgroundColor("#eeaacc") + .fill(this.color) + .stroke(Color.Red) + .animatablePoints(this.polyline1Vec) + .animation({ duration: 2000, delay: 0, curve: Curve.Ease }) + + Polyline() + .width(400) + .height(240) + .backgroundColor("#bbffcc") + .fill(this.color) + .stroke(Color.Red) + .animatablePoints(this.polyline2Vec) + .animation({ duration: 2000, delay: 0, curve: Curve.Ease }) + + Text("Animatable Fontsize") + + .animatableFontSize(this.fontSize) + .animation({ duration: 2000, delay: 0, curve: Curve.Ease }) + .width(400) + .height(150) + .margin(5) + .textAlign(TextAlign.Center) + .backgroundColor("#ffddcc") + .border({ width: '2vp', color: "#88ff00", radius: 20, style: BorderStyle.Solid }) + .onClick(() => { + console.log("Text onClick()") + }) + + Row() { + Button("Polyline1 default") + .width(100).height(60) + .margin({ left: 5, right: 5 }) + .onClick(() => { + + if (this.polyline1Vec.equals(this.pointVec1)) { + this.polyline1Vec = this.pointVec2; + } else { + this.polyline1Vec = this.pointVec1; + } + }) + + Button("Polyline2 ANIM") + .width(100).height(60) + .onClick(() => { + if (this.polyline2Vec.equals(this.pointVec1)) { + this.polyline2Vec = this.pointVec2; + } else { + this.polyline2Vec = this.pointVec1; + } + }) + + Button("FontSize") + .width(100).height(60) + .margin({ left: 5, right: 5 }) + .onClick(() => { + this.fontSize = (this.fontSize == 20.0) ? 40.0 : 20.0; + }) + } + .alignItems(VerticalAlign.Center) + .margin(5) + + } + .width('100%') + .alignItems(HorizontalAlign.Center) + } +} +``` + + +![zh-cn_image_0000001592669598](figures/zh-cn_image_0000001592669598.gif) diff --git a/zh-cn/application-dev/ui/arkts-enter-exit-transition.md b/zh-cn/application-dev/ui/arkts-enter-exit-transition.md new file mode 100644 index 0000000000000000000000000000000000000000..2720b9c55f849569d036cc3f31d58d4b2845a4fb --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-enter-exit-transition.md @@ -0,0 +1,137 @@ +# 出现/消失转场 + + +[transition](../reference/arkui-ts/ts-transition-animation-component.md#transitioneffect10%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E)是基础的组件转场接口，用于实现一个组件出现或者消失时的动画效果。可以通过[TransitionEffect](../reference/arkui-ts/ts-transition-animation-component.md#transitioneffect10%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E)的组合使用，定义出各式效果。 + + + **表1** 转场效果接口 + +| 转场效果 | 说明 | 动画 | +| -------- | -------- | -------- | +| IDENTITY | 禁用转场效果。 | 无。 | +| OPACITY | 默认的转场效果，透明度转场。 | 出现时透明度从0到1，消失时透明度从1到0。 | +| SLIDE | 滑动转场效果。 | 出现时从窗口左侧滑入，消失时从窗口右侧滑出。 | +| translate | 通过设置组件平移创建转场效果。 | 出现时为translate接口设置的值到默认值0，消失时为默认值0到translate接口设置的值。 | +| rotate | 通过设置组件旋转创建转场效果。 | 出现时为rotate接口设置的值到默认值0，消失时为默认值0到rotate接口设置的值。 | +| opacity | 通过设置透明度参数创建转场效果。 | 出现时为opacity设置的值到默认透明度1，消失时为默认透明度1到opacity设置的值。 | +| move | 通过[TransitionEdge](../reference/arkui-ts/ts-appendix-enums.md#transitionedge10)创建从窗口哪条边缘出来的效果。 | 出现时从TransitionEdge方向滑入，消失时滑出到TransitionEdge方向。 | +| asymmetric | 通过此方法组合非对称的出现消失转场效果。
appear:出现转场的效果。
disappear：消失转场的效果。 | 出现时采用appear设置的TransitionEffect出现效果，消失时采用disappear设置的TransitionEffect的消失效果。 | +| combine | 组合其他TransitionEffect。 | 组合其他TransitionEffect，一起生效。 | +| animation | 定义转场效果的动画参数：
- 如果不定义会跟随animateTo的动画参数。
- 不支持通过控件的animation接口配置动画参数。
- TransitionEffect中animation的onFinish不生效。 | 调用顺序时从上往下，上面TransitionEffect的animation也会作用到下面TransitionEffect。 | + + +1. 创建TransitionEffect。 + + ```ts + // 出现时会是所有转场效果的出现效果叠加，消失时会是所有消失转场效果的叠加 + // 用于说明各个effect跟随的动画参数 + private effect: TransitionEffect = + TransitionEffect.OPACITY // 创建了透明度转场效果，这里没有调用animation接口，会跟随animateTo的动画参数 + // 通过combine方法,添加缩放转场效果,并指定了springMotion(0.6, 1.2)曲线 + .combine(TransitionEffect.scale({ x: 0, y: 0 }).animation({curve: curves.springMotion(0.6, 1.2) })) + // 添加旋转转场效果，这里的动画参数会跟随上面的TransitionEffect，也就是springMotion(0.6, 1.2) + .combine(TransitionEffect.rotate({ angle: 90 })) + // 添加平移转场效果，动画参数会跟随其之上带animation的TransitionEffect，也就是springMotion(0.6, 1.2) + .combine(TransitionEffect.translate({ x: 150, y: 150 }) + // 添加move转场效果，并指定了springMotion曲线 + .combine(TransitionEffect.move(TransitionEdge.END)).animation({curve: curves.springMotion()})) + // 添加非对称的转场效果，由于这里没有设置animation，会跟随上面的TransitionEffect的animation效果，也就是springMotion + .combine(TransitionEffect.asymmetric(TransitionEffect.scale({ x: 0, y: 0 }), TransitionEffect.rotate({angle: 90}))); + ``` + +2. 将转场效果通过[transition](../reference/arkui-ts/ts-transition-animation-component.md)接口设置到组件。 + + ```ts + Text('test') + .transition(effect) + ``` + +3. 新增或者删除组件触发转场。 + + ```ts + @state isPresent: boolean = true; + ... + if (isPresent) { + Text('test') + .transition(effect) + } + ... + // 控制新增或者删除组件 + // 方式一：将控制变量放到animateTo闭包内，未通过animation接口定义动画参数的TransitionEffect将跟随animateTo的动画参数 + animateTo({curve: curves.springMotion()}) { + this.isPresent = false; + } + + // 方式二：直接控制删除或者新增组件，动画参数由TransitionEffect的animation接口配置 + this.isPresent = false; + ``` + + + 完整的示例代码和效果如下。 + +```ts +import curves from '@ohos.curves'; + +@Entry +@Component +struct TransitionEffectDemo { + @State isPresent: boolean = false; + + // 第一步，创建TransitionEffect + private effect: TransitionEffect = + // 创建默认透明度转场效果,并指定了springMotion(0.6, 0.8)曲线 + TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.6, 0.8) }) + // 通过combine方法,这里的动画参数会跟随上面的TransitionEffect，也就是springMotion(0.6, 0.8) + .combine(TransitionEffect.scale({ x: 0, y: 0 })) + // 添加旋转转场效果，这里的动画参数会跟随上面带animation的TransitionEffect，也就是springMotion(0.6, 0.8) + .combine(TransitionEffect.rotate({ angle: 90 })) + // 添加平移转场效果，这里的动画参数使用指定的springMotion() + .combine(TransitionEffect.translate({ y: 150 }).animation({ curve: curves.springMotion() })) + // 添加move转场效果，这里的动画参数会跟随上面的TransitionEffect，也就是springMotion() + .combine(TransitionEffect.move(TransitionEdge.END)) + + 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接口设置到组件 + .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%') + } +} +``` + + + +![zh-cn_image_0000001599818064](figures/zh-cn_image_0000001599818064.gif) + diff --git a/zh-cn/application-dev/ui/arkts-layout-update-animation.md b/zh-cn/application-dev/ui/arkts-layout-update-animation.md deleted file mode 100644 index 082b8b71cec7afa93751616c766d2b62d5ab10b4..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/arkts-layout-update-animation.md +++ /dev/null @@ -1,270 +0,0 @@ -# 布局更新动画 - - -[显式动画](../reference/arkui-ts/ts-explicit-animation.md)（animateTo）和[属性动画](../reference/arkui-ts/ts-animatorproperty.md)（animation）是ArkUI提供的最基础和常用的动画功能。在布局属性（如[尺寸属性](../reference/arkui-ts/ts-universal-attributes-size.md)、[位置属性](../reference/arkui-ts/ts-universal-attributes-location.md)）发生变化时，可以通过属性动画或显式动画，按照动画参数过渡到新的布局参数状态。 - - -| 动画类型 | 特点 | -| ---- | ---------------------------------------- | -| 显式动画 | 闭包内的变化均会触发动画，包括由数据变化引起的组件的增删、组件属性的变化等，可以做较为复杂的动画。 | 较复杂的动画场景 | -| 属性动画 | 动画设置简单，属性变化时自动触发动画。 | - - -## 使用显式动画产生布局更新动画 - -显式动画的接口为： - - -```ts -animateTo(value: AnimateParam, event: () => void): void -``` - -第一个参数指定动画参数，第二个参数为动画的闭包函数。 - -以下是使用显式动画产生布局更新动画的示例。示例中，当Column组件的alignItems属性改变后，其子组件的布局位置结果发生变化。只要该属性是在animateTo的闭包函数中修改的，那么由其引起的所有变化都会按照animateTo的动画参数执行动画过渡到终点值。 - - -```ts -@Entry -@Component -struct LayoutChange { - // 用于控制Column的alignItems属性 - @State itemAlign: HorizontalAlign = HorizontalAlign.Start; - allAlign: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End]; - alignIndex: number = 0; - - build() { - Column() { - Column({ space: 10 }) { - Button("1").width(100).height(50) - Button("2").width(100).height(50) - Button("3").width(100).height(50) - } - .margin(20) - .alignItems(this.itemAlign) - .borderWidth(2) - .width("90%") - .height(200) - - Button("click").onClick(() => { - // 动画时长为1000ms，曲线为EaseInOut - animateTo({ duration: 1000, curve: Curve.EaseInOut }, () => { - this.alignIndex = (this.alignIndex + 1) % this.allAlign.length; - // 在闭包函数中修改this.itemAlign参数，使Column容器内部孩子的布局方式变化，使用动画过渡到新位置 - this.itemAlign = this.allAlign[this.alignIndex]; - }); - }) - } - .width("100%") - .height("100%") - } -} -``` - - -![layoutChange1](figures/layoutChange1.gif) - - -除直接改变布局方式外，也可直接修改组件的宽、高、位置。 - - - -```ts -@Entry -@Component -struct LayoutChange2 { - @State myWidth: number = 100; - @State myHeight: number = 50; - // 标志位，true和false分别对应一组myWidth、myHeight值 - @State flag: boolean = false; - - build() { - Column({ space: 10 }) { - Button("text") - .type(ButtonType.Normal) - .width(this.myWidth) - .height(this.myHeight) - .margin(20) - Button("area: click me") - .fontSize(12) - .margin(20) - .onClick(() => { - animateTo({ duration: 1000, curve: Curve.Ease }, () => { - // 动画闭包中根据标志位改变控制第一个Button宽高的状态变量，使第一个Button做宽高动画 - if (this.flag) { - this.myWidth = 100; - this.myHeight = 50; - } else { - this.myWidth = 200; - this.myHeight = 100; - } - this.flag = !this.flag; - }); - }) - } - .width("100%") - .height("100%") - } -} -``` - - -在第二个Button的点击事件中，使用animateTo函数，在闭包中修改this.myWidth和this.myHeight状态变量，而这两个状态变量分别为第一个Button的宽、高属性值，所以第一个Button做了宽高动画。效果如下图。 - - -![layoutChange2_animateTo](figures/layoutChange2_animateTo.gif) - - -与此同时，第二个Button也产生了一个位置动画。这是由于第一个Button的宽高变化后，引起了Column内部其他组件的布局结果也发生了变化，第二个Button的布局发生变化也是由于闭包内改变第一个Button的宽高造成的。 - - -如果不希望第二个Button有动画效果，有两种方式可以实现。一种是给做第一个Button外面再加一个容器，使其动画前后的大小都在容器的范围内，这样第二个Button的位置不会被第一个Button的位置所影响。修改后的核心代码如下。 - - - -```ts -Column({ space: 10 }) { - Column() { - // Button放在足够大的容器内，使其不影响更外层的组件位置 - Button("text") - .type(ButtonType.Normal) - .width(this.myWidth) - .height(this.myHeight) - } - .margin(20) - .width(200) - .height(100) - - Button("area: click me") - .fontSize(12) - .onClick(() => { - animateTo({ duration: 1000, curve: Curve.Ease }, () => { - // 动画闭包中根据标志位改变控制第一个Button宽高的状态变量，使第一个Button做宽高动画 - if (this.flag) { - this.myWidth = 100; - this.myHeight = 50; - } else { - this.myWidth = 200; - this.myHeight = 100; - } - this.flag = !this.flag; - }); - }) -} -.width("100%") -.height("100%") -``` - - -![layoutChange2_animateTo_change](figures/layoutChange2_animateTo_change.gif) - - -另一种方式是给第二个Button添加布局约束，如position的位置约束，使其位置不被第一个Button的宽高影响。核心代码如下： - - - -```ts -Column({ space: 10 }) { - Button("text") - .type(ButtonType.Normal) - .width(this.myWidth) - .height(this.myHeight) - .margin(20) - - Button("area: click me") - .fontSize(12) - // 配置position属性固定，使自己的布局位置不被第一个Button的宽高影响 - .position({ x: "30%", y: 200 }) - .onClick(() => { - animateTo({ duration: 1000, curve: Curve.Ease }, () => { - // 动画闭包中根据标志位改变控制第一个Button宽高的状态变量，使第一个Button做宽高动画 - if (this.flag) { - this.myWidth = 100; - this.myHeight = 50; - } else { - this.myWidth = 200; - this.myHeight = 100; - } - this.flag = !this.flag; - }); - }) -} -.width("100%") -.height("100%") -``` - - -## 使用属性动画产生布局更新动画 - -显式动画把要执行动画的属性的修改放在闭包函数中触发动画，而属性动画则无需使用闭包，把animation属性加在要做属性动画的组件的属性后即可。 - -属性动画的接口为： - - -```ts -animation(value: AnimateParam) -``` - -其入参为动画参数。想要组件随某个属性值的变化而产生动画，此属性需要加在animation属性之前。有的属性变化不希望通过animation产生属性动画，可以放在animation之后。上面显式动画的示例很容易改为用属性动画实现。例如： - - - -```ts -@Entry -@Component -struct LayoutChange2 { - @State myWidth: number = 100; - @State myHeight: number = 50; - @State flag: boolean = false; - @State myColor: Color = Color.Blue; - - build() { - Column({ space: 10 }) { - Button("text") - .type(ButtonType.Normal) - .width(this.myWidth) - .height(this.myHeight) - // animation只对其上面的type、width、height属性生效，时长为1000ms，曲线为Ease - .animation({ duration: 1000, curve: Curve.Ease }) - // animation对下面的backgroundColor、margin属性不生效 - .backgroundColor(this.myColor) - .margin(20) - - Button("area: click me") - .fontSize(12) - .onClick(() => { - // 改变属性值，配置了属性动画的属性会进行动画过渡 - if (this.flag) { - this.myWidth = 100; - this.myHeight = 50; - this.myColor = Color.Blue; - } else { - this.myWidth = 200; - this.myHeight = 100; - this.myColor = Color.Pink; - } - this.flag = !this.flag; - }) - } - } -} -``` - - -上述示例中，第一个button上的animation属性，只对写在animation之前的type、width、height属性生效，而对写在animation之后的backgroundColor、margin属性无效。运行结果是width、height属性会按照animation的动画参数执行动画，而backgroundColor会直接跳变，不会产生动画。效果如下图： - - - - - - -![size-change-animation](figures/size-change-animation.gif) - - ->**说明：** -> -> 1. 使用属性动画时，会按照指定的属性动画参数执行动画。每个组件可为自己的属性配置不同参数的属性动画。 -> -> 2. 显式动画会对动画闭包前后造成的所有界面差异执行动画，且使用同一动画参数，适用于统一执行的场景。此外，显式动画也可以用于一些非属性变量造成的动画，如if/else的条件，ForEach使用的数组元素的删减。 -> -> 3. 如果一个属性配置了属性动画，且在显式动画闭包中改变该属性值，属性动画优先生效，会使用属性动画的动画参数。 diff --git a/zh-cn/application-dev/ui/arkts-modal-transition.md b/zh-cn/application-dev/ui/arkts-modal-transition.md new file mode 100644 index 0000000000000000000000000000000000000000..d4d51d54cfc4707b27a18d062c633cb45ee62ec6 --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-modal-transition.md @@ -0,0 +1,464 @@ +# 模态转场 + + +模态转场是新的界面覆盖在旧的界面上，旧的界面不消失的一种转场方式。 + + + **表1** 模态转场接口 + +| 接口 | 说明 | 使用场景 | +| -------- | -------- | -------- | +| [bindContentCover](../reference/arkui-ts/ts-universal-attributes-modal-transition.md#%E5%85%A8%E5%B1%8F%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA) | 弹出全屏的模态组件。 | 用于自定义全屏的模态展示界面，结合转场动画和共享元素动画可实现复杂转场动画效果，如缩略图片点击后查看大图。 | +| [bindSheet](../reference/arkui-ts/ts-universal-attributes-sheet-transition.md#%E5%8D%8A%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA) | 弹出半模态组件。 | 用于半模态展示界面，如分享框。 | +| [bindMenu](../reference/arkui-ts/ts-universal-attributes-menu.md) | 弹出菜单，点击组件后弹出。 | 需要Menu菜单的场景，如一般应用的“+”号键。 | +| [bindContextMenu](../reference/arkui-ts/ts-universal-attributes-menu.md) | 弹出菜单，长按或者右键点击后弹出。 | 长按浮起效果，一般结合拖拽框架使用，如桌面图标长按浮起。 | +| [bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md) | 弹出Popup弹框。 | Popup弹框场景，如点击后对某个组件进行临时说明。 | +| if | 通过if新增或删除组件。 | 用来在某个状态下临时显示一个界面，这种方式的返回导航需要由开发者监听接口实现。 | + + +## 使用bindContentCover构建全屏模态转场效果 + +[bindContentCover](../reference/arkui-ts/ts-universal-attributes-modal-transition.md#%E5%85%A8%E5%B1%8F%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA)接口用于为组件绑定全屏模态页面，在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。 + +1. 定义全屏模态转场效果[bindContentCover](../reference/arkui-ts/ts-universal-attributes-modal-transition.md#%E5%85%A8%E5%B1%8F%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA)。 + +2. 定义模态展示界面。 + + ```ts + // 通过@Builder构建模态展示界面 + @Builder MyBuilder() { + Column() { + Text('my model view') + } + // 通过转场动画实现出现消失转场动画效果，transition需要加在builder下的第一个组件 + .transition(TransitionEffect.translate(y:300).animation({ curve: curves.springMotion(0.6, 0.8) })) + } + ``` + +3. 通过模态接口调起模态展示界面，通过转场动画或者共享元素动画去实现对应的动画效果。 + + ```ts + // 模态转场控制变量 + @State isPresent: boolean = false; + + Button('Click to present model view') + // 通过选定的模态接口，绑定模态展示界面，ModalTransition是内置的ContentCover转场动画类型，这里选择None代表系统不加默认动画 + .bindContentCover($$this.isPresent, this.MyBuilder, ModalTransition.None) + .onClick(() => { + // 改变状态变量，让模态界面显示 + this.isPresent = !this.isPresent; + }) + ``` + + +完整示例代码和效果如下。 + + + +```ts +import curves from '@ohos.curves'; + +@Entry +@Component +struct BindContentCoverDemo { + // 第一步：定义全屏模态转场效果bindContentCover + // 模态转场控制变量 + @State isPresent: boolean = false; + + // 第二步：定义模态展示界面 + // 通过@Builder构建模态展示界面 + @Builder MyBuilder() { + Column() { + Column() { + Column() { + Text('back') + .fontSize(24) + .fontColor(Color.White) + } + .justifyContent(FlexAlign.Center) + .width(100) + .height(100) + .borderRadius(5) + .backgroundColor(0xf56c6c) + .onClick(() => { + this.isPresent = false; + }) + } + .height('100%') + .width('100%') + .backgroundColor(0x909399) + .justifyContent(FlexAlign.Center) + .border({ + radius: { + topLeft: 15, + topRight: 15, + } + }) + } + .height('100%') + .justifyContent(FlexAlign.End) + // 通过转场动画实现出现消失转场动画效果 + .transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) })) + } + + build() { + Column() { + Column() { + Text('Click Me') + .fontSize(24) + .fontColor(Color.White) + } + // 第三步：通过模态接口调起模态展示界面，通过转场动画或者共享元素动画去实现对应的动画效果 + .onClick(() => { + // 改变状态变量，让模态界面显示 + this.isPresent = !this.isPresent; + }) + // 通过选定的模态接口，绑定模态展示界面，ModalTransition是内置的ContentCover转场动画类型，这里选择None代表系统不加默认动画 + .bindContentCover($$this.isPresent, this.MyBuilder(), ModalTransition.DEFAULT) + .justifyContent(FlexAlign.Center) + .backgroundColor(0XF56C6C) + .width(100) + .height(100) + .borderRadius(5) + } + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} +``` + + + +![zh-cn_image_0000001646921957](figures/zh-cn_image_0000001646921957.gif) + + + +## 使用bindSheet构建半模态转场效果 + +[bindSheet](../reference/arkui-ts/ts-universal-attributes-sheet-transition.md#%E5%8D%8A%E6%A8%A1%E6%80%81%E8%BD%AC%E5%9C%BA)属性可为组件绑定半模态页面，在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。构建半模态转场动效的步骤基本与使用bindContentCover构建全屏模态转场动效相同。 + +完整示例和效果如下。 + + +```ts +@Entry +@Component +struct BindSheetDemo { + + // 半模态转场高度控制变量 + @State sheetHeight: number = 300; + // 半模态转场控制条控制变量 + @State showDragBar: boolean = true; + + // 通过@Builder构建半模态展示界面 + @Builder myBuilder() { + Column() { + Button("change height") + .margin(10) + .fontSize(20) + .onClick(() => { + this.sheetHeight = 500; + }) + + Button("Set Illegal height") + .margin(10) + .fontSize(20) + .onClick(() => { + this.sheetHeight = null; + }) + + Button("close dragbar") + .margin(10) + .fontSize(20) + .onClick(() => { + this.showDragBar = !this.showDragBar; + }) + Button("close modal 1") + .margin(10) + .fontSize(20) + .onClick(() => { + this.isPresent = false; + }) + } + .width('100%') + .height('100%') + } + + // 半模态转场控制变量 + @State isPresent: boolean = false; + + build() { + Column() { + Button("Click to present sheet view") + .onClick(() => { + // 改变状态变量，让模态界面显示 + this.isPresent = !this.isPresent; + }) + .fontSize(20) + .margin(10) + // 通过选定的半模态接口，绑定模态展示界面，style中包含两个参数，一个是设置半模态的高度，不设置时默认高度是Large,一个是是否显示控制条DragBar,默认是true显示控制条 + .bindSheet($$this.isPresent, this.myBuilder(), { height: this.sheetHeight, dragBar: this.showDragBar }) + } + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + } +} +``` + +![zh-cn_image_0000001599977924](figures/zh-cn_image_0000001599977924.gif) + + +## 使用bindMenu实现菜单弹出效果 + +[bindMenu](../reference/arkui-ts/ts-universal-attributes-menu.md)为组件绑定弹出式菜单，通过点击触发。完整示例和效果如下。 + + +```ts +@Entry +@Component +struct BindMenuDemo { + + // 第一步: 定义一组数据用来表示菜单按钮项 + private items = [ + { + value: '菜单项1', + action: () => { + console.info('handle Menu1 select') + } + }, + { + value: '菜单项2', + action: () => { + console.info('handle Menu2 select') + } + }, + ] + + build() { + Column() { + Button('click') + .backgroundColor(0x409eff) + .borderRadius(5) + // 第二步: 通过bindMenu接口将菜单数据绑定给元素 + .bindMenu(this.items) + } + .justifyContent(FlexAlign.Center) + .width('100%') + .height(437) + } +} +``` + +![zh-cn_image_0000001599643478](figures/zh-cn_image_0000001599643478.gif) + + +## 使用bindContextMenu实现菜单弹出效果 + +[bindContextMenu](../reference/arkui-ts/ts-universal-attributes-menu.md)为组件绑定弹出式菜单，通过长按或右键点击触发。完整示例和效果如下。 + +完整示例和效果如下。 + + +```ts +@Entry +@Component +struct BindContextMenuDemo { + private num: number[] = [1, 2, 3, 4]; + private colors: Color[] = [0x67C23A, 0xE6A23C, 0xf56c6c, 0x909399]; + // 通过@Builder构建自定义菜单项 + @Builder MyMenu() { + Row() { + Column() { + ForEach(this.num, (item: number, index: number) => { + Row() { + Text(item.toString()) + .fontSize(20) + .fontColor(Color.White) + } + .backgroundColor(this.colors[index]) + .width('100%') + .aspectRatio(2) + .justifyContent(FlexAlign.Center) + }) + } + .width('100%') + } + .width(150) + .justifyContent(FlexAlign.Center) + .padding(5) + } + + build() { + Column() { + Column() { + Text('longPress') + .fontSize(20) + .fontColor(Color.White) + } + .justifyContent(FlexAlign.Center) + .width(170) + .height(50) + .bindContextMenu(this.MyMenu, ResponseType.LongPress) + .backgroundColor(0xf56c6c) + .borderRadius(5) + } + .justifyContent(FlexAlign.Center) + .width('100%') + .height(437) + } +} +``` + +![zh-cn_image_0000001600137920](figures/zh-cn_image_0000001600137920.gif) + + +## 使用bindPopUp实现气泡弹窗效果 + +[bindpopup](../reference/arkui-ts/ts-universal-attributes-popup.md)属性可为组件绑定弹窗，并设置弹窗内容，交互逻辑和显示状态。 + +完整示例和代码如下。 + + +```ts +@Entry +@Component +struct BindPopupDemo { + + // 第一步：定义变量控制弹窗显示 + @State customPopup: boolean = false; + + // 第二步：popup构造器定义弹框内容 + @Builder popupBuilder() { + Column({ space: 2 }) { + Row().width(64) + .height(64) + .backgroundColor(0x409eff) + Text('Popup') + .fontSize(10) + .fontColor(Color.White) + } + .justifyContent(FlexAlign.SpaceAround) + .width(100) + .height(100) + .padding(5) + } + + build() { + Column() { + + Button('click') + // 第四步：创建点击事件，控制弹窗显隐 + .onClick(() => { + this.customPopup = !this.customPopup; + }) + .backgroundColor(0xf56c6c) + // 第三步：使用bindPopup接口将弹窗内容绑定给元素 + .bindPopup(this.customPopup, { + builder: this.popupBuilder, + placement: Placement.Top, + maskColor: 0x33000000, + popupColor: 0xf56c6c, + enableArrow: true, + onStateChange: (e) => { + if (!e.isVisible) { + this.customPopup = false; + } + } + }) + } + .justifyContent(FlexAlign.Center) + .width('100%') + .height(437) + } +} +``` + + + +![zh-cn_image_0000001649282285](figures/zh-cn_image_0000001649282285.gif) + + +## 使用if实现模态转场 + +上述模态转场接口需要绑定到其他组件上，通过监听状态变量改变调起模态界面。实际上，也可以通过if范式，通过新增/删除组件，实现模态转场效果。 + +完整示例和代码如下。 + + +```ts +@Entry +@Component +struct ModalTransition1 { + + // 第一步：定义状态变量控制页面显示 + @State isShow: boolean = false; + + build() { + // 第二步：定义Stack布局显示当前页面和模态页面 + Stack() { + Column() { + Text('Page1') + .fontSize(40) + .fontColor(Color.White) + .fontWeight(FontWeight.Bolder) + + Text('Click to transition') + .fontSize(15) + .fontColor(Color.White) + } + .justifyContent(FlexAlign.Center) + .width('100%') + .height('100%') + .linearGradient({ + colors: [ + [0xf56c6c, 0.0], + [0xffffff, 1.0] + ] + }) + // 第五步：改变状态变量，显示模态页面 + .onClick(() => { + animateTo({ duration: 500 }, () => { + this.isShow = !this.isShow; + }) + }) + + // 第三步：在if中定义模态页面，显示在最上层，通过if控制模态页面出现消失 + if (this.isShow) { + Column() { + Text('Page2') + .fontSize(40) + .fontColor(Color.Gray) + .fontWeight(FontWeight.Bolder) + + Text('Click to transition') + .fontSize(15) + .fontColor(Color.Gray) + } + .justifyContent(FlexAlign.Start) + .width('100%') + .height('100%') + .linearGradient({ + colors: [ + [0xffffff, 0.0], + [0x409eff, 1.0] + ] + }) + // 第四步：定义模态页面出现消失转场方式 + .transition(TransitionEffect.OPACITY.combine(TransitionEffect.rotate({ angle: 90, y: 1 }))) + .onClick(() => { + animateTo({ duration: 500 }, () => { + this.isShow = !this.isShow; + }) + }) + } + + } + .width('100%') + .height('100%') + } +} +``` + +![zh-cn_image_0000001597792146](figures/zh-cn_image_0000001597792146.gif) diff --git a/zh-cn/application-dev/ui/arkts-navigation-transition.md b/zh-cn/application-dev/ui/arkts-navigation-transition.md new file mode 100644 index 0000000000000000000000000000000000000000..9dc638b55139e336dc4732705aadfdd3496a968a --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-navigation-transition.md @@ -0,0 +1,136 @@ +# 导航转场 + + +导航转场是页面的路由转场方式，也就是一个界面消失，另外一个界面出现的动画效果。导航转场的动画效果是系统定义的，开发者不能修改。 + + +导航转场推荐使用[Navigation](../reference/arkui-ts/ts-basic-components-navigation.md)组件实现，可搭配[NavRouter](../reference/arkui-ts/ts-basic-components-navrouter.md)组件和[NavDestination](../reference/arkui-ts/ts-basic-components-navdestination.md)组件实现导航功能。 + + +完整的代码示例和效果如下。 + + + +```ts +@Entry +@Component +struct NavigationDemo { + private listArray: Array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; + + // 设置标题栏菜单组件，如果不需要标题栏组件，可以不设置 + @Builder NavigationMenus() { + Column() { + Text('menu') + .fontColor('#182431') + .fontSize(14) + .lineHeight(19) + .opacity(0.4) + .margin({ top: 70 }) + } + .alignItems(HorizontalAlign.Start) + } + + build() { + Stack() { + Column() { + // 定义Navigation组件，设置显示模式，设置标题 + Navigation() { + // 这里定义了一个输入法框组件 + TextInput({ placeholder: 'search...' }) + .width('90%') + .height(40) + .backgroundColor('#ededed') + .margin({ bottom: 10 }) + + // 通过List定义导航的一级界面 + List({ space: 12, initialIndex: 0 }) { + ForEach(this.listArray, (item) => { + ListItem() { + // 通过NavRouter定义导航转场，通过NavDestination定义导航目标界面，界面之间通过组件间的状态变量或者普通变量传递参数 + // NavRouter必须包含两个子组件，第一个组件是导航一级界面，第二个子组件必须为NavDestination为导航目标界面 + NavRouter() { + // 第一个组件：导航的一级界面显示的组件 + Row() { + Row() + .width(40) + .height(40) + .backgroundColor('#a8a8a8') + .margin({ right: 12 }) + .borderRadius(20) + + Column() { + Text('导航一级页面') + .fontSize(16) + .lineHeight(21) + .fontWeight(FontWeight.Medium) + Text('点击跳转目标子页面') + .fontSize(13) + .lineHeight(21) + .fontColor('#a8a8a8') + } + .alignItems(HorizontalAlign.Start) + + Blank() + + Row() + .width(15) + .height(15) + .margin({ right: 12 }) + .border({ + width: { top: 2, right: 2 }, + color: 0xcccccc + }) + .rotate({ angle: 45 }) + } + .borderRadius(15) + .shadow({ radius: 100, color: '#ededed' }) + .width('90%') + .alignItems(VerticalAlign.Center) + .padding({ left: 16, top: 12, bottom: 12 }) + .height(80) + + // 第二个组件：导航的目的界面 + NavDestination() { + // 目的界面的内容，这里一般为自定义的Component + Column() { + Text("导航目标页面" + item + "内容") + .fontSize(20) + .fontColor(Color.Black) + .textAlign(TextAlign.Center) + .width('100%') + .height('100%') + } + .width('100%') + .height('100%') + .backgroundColor(0xf5f5f5) + } + .title('导航目标页面') // 这里定义二级界面的标题 + } + } + .width('100%') + }, item => item) + } + .listDirection(Axis.Vertical) + .edgeEffect(EdgeEffect.Spring) + .sticky(StickyStyle.Header) + .chainAnimation(false) + .borderRadius(15) + .width('100%') + .height('100%') + } + .width('100%') + .mode(NavigationMode.Auto) // 设置显示模式为Auto + .title('导航转场') // 设置标题文字 + .titleMode(NavigationTitleMode.Full) // 设置标题栏模式 + .menus(this.NavigationMenus) // 设置标题栏菜单 + } + .width('100%') + } + } +} +``` + + + +![zh-cn_image_0000001588458252](figures/zh-cn_image_0000001588458252.gif) + diff --git a/zh-cn/application-dev/ui/arkts-page-transition-animation.md b/zh-cn/application-dev/ui/arkts-page-transition-animation.md deleted file mode 100644 index 9a717c81e48803c5afa7a2b72813234dfee6c324..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/arkts-page-transition-animation.md +++ /dev/null @@ -1,361 +0,0 @@ -# 页面转场动画 - - -两个页面间发生跳转，一个页面消失，另一个页面出现，这时可以配置各自页面的页面转场参数实现自定义的页面转场效果。[页面转场](../reference/arkui-ts/ts-page-transition-animation.md)效果写在pageTransition函数中，通过PageTransitionEnter和PageTransitionExit指定页面进入和退出的动画效果。 - - -PageTransitionEnter的接口为： - - - -```ts -PageTransitionEnter({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number}) -``` - - -PageTransitionExit的接口为： - - - -```ts -PageTransitionExit({type?: RouteType,duration?: number,curve?: Curve | string,delay?: number}) -``` - - -上述接口定义了PageTransitionEnter和PageTransitionExit组件，可通过slide、translate、scale、opacity属性定义不同的页面转场效果。对于PageTransitionEnter而言，这些效果表示入场时起点值，对于PageTransitionExit而言，这些效果表示退场的终点值，这一点与组件转场transition配置方法类似。此外，PageTransitionEnter提供了onEnter接口进行自定义页面入场动画的回调，PageTransitionExit提供了onExit接口进行自定义页面退场动画的回调。 - - -上述接口中的参数type，表示路由生效的类型，这一点开发者容易混淆其含义。页面转场的两个页面，必定有一个页面退出，一个页面进入。如果通过router.pushUrl操作从页面A跳转到页面B，则页面A退出，做页面退场动画，页面B进入，做页面入场动画。如果通过router.back操作从页面B返回到页面A，则页面B退出，做页面退场动画，页面A进入，做页面入场动画。即页面的PageTransitionEnter既可能是由于新增页面(push，入栈)引起的新页面的入场动画，也可能是由于页面返回(back，或pop，出栈)引起的页面栈中老页面的入场动画，为了能区分这两种形式的入场动画，提供了type参数，这样开发者能完全定义所有类型的页面转场效果。 - - -## type配置为RouteType.None - -type为RouteType.None表示对页面栈的push、pop操作均生效，type的默认值为RouteType.None。 - - -```ts -// pageA -pageTransition() { - // 定义页面进入时的效果，从左侧滑入，时长为1200ms，无论页面栈发生push还是pop操作均可生效 - PageTransitionEnter({ type: RouteType.None, duration: 1200 }) - .slide(SlideEffect.Left) - // 定义页面退出时的效果，向左侧滑出，时长为1000ms，无论页面栈发生push还是pop操作均可生效 - PageTransitionExit({ type: RouteType.None, duration: 1000 }) - .slide(SlideEffect.Left) -} -``` - - - -```ts -// pageB -pageTransition() { - // 定义页面进入时的效果，从右侧滑入，时长为1000ms，无论页面栈发生push还是pop操作均可生效 - PageTransitionEnter({ type: RouteType.None, duration: 1000 }) - .slide(SlideEffect.Right) - // 定义页面退出时的效果，向右侧滑出，时长为1200ms，无论页面栈发生push还是pop操作均可生效 - PageTransitionExit({ type: RouteType.None, duration: 1200 }) - .slide(SlideEffect.Right) -} -``` - - -假设页面栈为多实例模式，即页面栈中允许存在重复的页面。可能会有4种场景，对应的页面转场效果如下表。 - - -| 路由操作 | 页面A转场效果 | 页面B转场效果 | -| ---------------------------- | ---------------------------------- | ---------------------------------- | -| router.pushUrl，从页面A跳转到新增的页面B | 页面退出，PageTransitionExit生效，向左侧滑出屏幕 | 页面进入，PageTransitionEnter生效，从右侧滑入屏幕 | -| router.back，从页面B返回到页面A | 页面进入，PageTransitionEnter生效，从左侧滑入屏幕 | 页面退出，PageTransitionExit生效，向右侧滑出屏幕 | -| router.pushUrl，从页面B跳转到新增的页面A | 页面进入，PageTransitionEnter生效，从左侧滑入屏幕 | 页面退出，PageTransitionExit生效，向右侧滑出屏幕 | -| router.back，从页面A返回到页面B | 页面退出，PageTransitionExit生效，向左侧滑出屏幕 | 页面进入，PageTransitionEnter生效，从右侧滑入屏幕 | - - -如果希望pushUrl进入的页面总是从右侧滑入，back时退出的页面总是从右侧滑出，则上表中的第3、4种情况不满足要求，那么需要完整的定义4个页面转场效果。 - - -## type配置为RouteType.Push或RouteType.Pop - -type为RouteType.Push表示仅对页面栈的push操作生效，type为RouteType.Pop表示仅对页面栈的pop操作生效。 - - -```ts -// pageA -pageTransition() { - // 定义页面进入时的效果，从右侧滑入，时长为1200ms，页面栈发生push操作时该效果才生效 - PageTransitionEnter({ type: RouteType.Push, duration: 1200 }) - .slide(SlideEffect.Right) - // 定义页面进入时的效果，从左侧滑入，时长为1200ms，页面栈发生pop操作时该效果才生效 - PageTransitionEnter({ type: RouteType.Pop, duration: 1200 }) - .slide(SlideEffect.Left) - // 定义页面退出时的效果，向左侧滑出，时长为1000ms，页面栈发生push操作时该效果才生效 - PageTransitionExit({ type: RouteType.Push, duration: 1000 }) - .slide(SlideEffect.Left) - // 定义页面退出时的效果，向右侧滑出，时长为1000ms，页面栈发生pop操作时该效果才生效 - PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) - .slide(SlideEffect.Right) -} -``` - - - -```ts -// pageB -pageTransition() { - // 定义页面进入时的效果，从右侧滑入，时长为1000ms，页面栈发生push操作时该效果才生效 - PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) - .slide(SlideEffect.Right) - // 定义页面进入时的效果，从左侧滑入，时长为1000ms，页面栈发生pop操作时该效果才生效 - PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) - .slide(SlideEffect.Left) - // 定义页面退出时的效果，向左侧滑出，时长为1200ms，页面栈发生push操作时该效果才生效 - PageTransitionExit({ type: RouteType.Push, duration: 1200 }) - .slide(SlideEffect.Left) - // 定义页面退出时的效果，向右侧滑出，时长为1200ms，页面栈发生pop操作时该效果才生效 - PageTransitionExit({ type: RouteType.Pop, duration: 1200 }) - .slide(SlideEffect.Right) -} -``` - - -以上代码则完整的定义了所有可能的页面转场样式。假设页面跳转配置为多实例模式，即页面栈中允许存在重复的页面。可能会有4种场景，对应的页面转场效果如下表。 - - -| 路由操作 | 页面A转场效果 | 页面B转场效果 | -| ---------------------------- | ---------------------------------------- | ---------------------------------------- | -| router.pushUrl，从页面A跳转到新增的页面B | 页面退出，PageTransitionExit且type为RouteType.Push的转场样式生效，向左侧滑出屏幕 | 页面进入，PageTransitionEnter且type为RouteType.Push的转场样式生效，从右侧滑入屏幕 | -| router.back，从页面B返回到页面A | 页面进入，PageTransitionEnter且type为RouteType.Pop的转场样式生效，从左侧滑入屏幕 | 页面退出，PageTransitionExit且type为RouteType.Pop的转场样式生效，向右侧滑出屏幕 | -| router.pushUrl，从页面B跳转到新增的页面A | 页面进入，PageTransitionEnter且type为RouteType.Push的转场样式生效，从右侧滑入屏幕 | 页面退出，PageTransitionExit且type为RouteType.Push的转场样式生效，向左侧滑出屏幕 | -| router.back，从页面A返回到页面B | 页面退出，PageTransitionExit且type为RouteType.Pop的转场样式生效，向右侧滑出屏幕 | 页面进入，PageTransitionEnter且type为RouteType.Pop的转场样式生效，从左侧滑入屏幕 | - - ->**说明：** -> -> 1. 由于每个页面的页面转场样式都可由开发者独立配置，而页面转场涉及到两个页面，开发者应考虑两个页面的页面转场效果的衔接，如时长尽量保持一致。 -> -> 2. 如果没有定义匹配的页面转场样式，则该页面使用系统默认的页面转场样式。 - - -## 禁用某页面的页面转场 - - -```ts -pageTransition() { - PageTransitionEnter({ type: RouteType.None, duration: 0 }) - PageTransitionExit({ type: RouteType.None, duration: 0 }) -} -``` - - -通过设置页面转场的时长为0，可使该页面无页面转场动画。 - - -## 场景示例 - -下面介绍定义了所有的四种页面转场样式的页面转场动画示例。 - - - -```ts -// PageTransitionSrc1 -import router from '@ohos.router'; -@Entry -@Component -struct PageTransitionSrc1 { - build() { - Column() { - Image($r('app.media.mountain')) - .width('90%') - .height('80%') - .objectFit(ImageFit.Fill) - .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成 - .margin(30) - - Row({ space: 10 }) { - Button("pushUrl") - .onClick(() => { - // 路由到下一个页面，push操作 - router.pushUrl({ url: 'pages/myTest/PageTransitionDst1' }); - }) - Button("back") - .onClick(() => { - // 返回到上一页面，相当于pop操作 - router.back(); - }) - }.justifyContent(FlexAlign.Center) - } - .width("100%").height("100%") - .alignItems(HorizontalAlign.Center) - } - - pageTransition() { - // 定义页面进入时的效果，从右侧滑入，时长为1000ms，页面栈发生push操作时该效果才生效 - PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) - .slide(SlideEffect.Right) - // 定义页面进入时的效果，从左侧滑入，时长为1000ms，页面栈发生pop操作时该效果才生效 - PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) - .slide(SlideEffect.Left) - // 定义页面退出时的效果，向左侧滑出，时长为1000ms，页面栈发生push操作时该效果才生效 - PageTransitionExit({ type: RouteType.Push, duration: 1000 }) - .slide(SlideEffect.Left) - // 定义页面退出时的效果，向右侧滑出，时长为1000ms，页面栈发生pop操作时该效果才生效 - PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) - .slide(SlideEffect.Right) - } -} -``` - - - - -```ts -// PageTransitionDst1 -import router from '@ohos.router'; -@Entry -@Component -struct PageTransitionDst1 { - build() { - Column() { - Image($r('app.media.forest')) - .width('90%') - .height('80%') - .objectFit(ImageFit.Fill) - .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成 - .margin(30) - - Row({ space: 10 }) { - Button("pushUrl") - .onClick(() => { - // 路由到下一页面，push操作 - router.pushUrl({ url: 'pages/myTest/PageTransitionSrc1' }); - }) - Button("back") - .onClick(() => { - // 返回到上一页面，相当于pop操作 - router.back(); - }) - }.justifyContent(FlexAlign.Center) - } - .width("100%").height("100%") - .alignItems(HorizontalAlign.Center) - } - - pageTransition() { - // 定义页面进入时的效果，从右侧滑入，时长为1000ms，页面栈发生push操作时该效果才生效 - PageTransitionEnter({ type: RouteType.Push, duration: 1000 }) - .slide(SlideEffect.Right) - // 定义页面进入时的效果，从左侧滑入，时长为1000ms，页面栈发生pop操作时该效果才生效 - PageTransitionEnter({ type: RouteType.Pop, duration: 1000 }) - .slide(SlideEffect.Left) - // 定义页面退出时的效果，向左侧滑出，时长为1000ms，页面栈发生push操作时该效果才生效 - PageTransitionExit({ type: RouteType.Push, duration: 1000 }) - .slide(SlideEffect.Left) - // 定义页面退出时的效果，向右侧滑出，时长为1000ms，页面栈发生pop操作时该效果才生效 - PageTransitionExit({ type: RouteType.Pop, duration: 1000 }) - .slide(SlideEffect.Right) - } -} -``` - - - -![pageTransition_PushPop](figures/pageTransition_PushPop.gif) - - -下面介绍使用了type为None的页面转场动画示例。 - - - -```ts -// PageTransitionSrc2 -import router from '@ohos.router'; -@Entry -@Component -struct PageTransitionSrc2 { - build() { - Column() { - Image($r('app.media.mountain')) - .width('90%') - .height('80%') - .objectFit(ImageFit.Fill) - .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成 - .margin(30) - - Row({ space: 10 }) { - Button("pushUrl") - .onClick(() => { - // 路由到下一页面，push操作 - router.pushUrl({ url: 'pages/myTest/pageTransitionDst2' }); - }) - Button("back") - .onClick(() => { - // 返回到上一页面，相当于pop操作 - router.back(); - }) - }.justifyContent(FlexAlign.Center) - } - .width("100%").height("100%") - .alignItems(HorizontalAlign.Center) - } - - pageTransition() { - // 定义页面进入时的效果，从左侧滑入，时长为1000ms，无论页面栈发生push还是pop操作均可生效 - PageTransitionEnter({ duration: 1000 }) - .slide(SlideEffect.Left) - // 定义页面退出时的效果，相对于正常页面位置x方向平移100vp，y方向平移100vp，透明度变为0，时长为1200ms，无论页面栈发生push还是pop操作均可生效 - PageTransitionExit({ duration: 1200 }) - .translate({ x: 100.0, y: 100.0 }) - .opacity(0) - } -} -``` - - - -```ts -// PageTransitionDst2 -import router from '@ohos.router'; -@Entry -@Component -struct PageTransitionDst2 { - build() { - Column() { - Image($r('app.media.forest')) - .width('90%') - .height('80%') - .objectFit(ImageFit.Fill) - .syncLoad(true) // 同步加载图片，使页面出现时图片已经加载完成 - .margin(30) - - Row({ space: 10 }) { - Button("pushUrl") - .onClick(() => { - // 路由到下一页面，push操作 - router.pushUrl({ url: 'pages/myTest/pageTransitionSrc2' }); - }) - Button("back") - .onClick(() => { - // 返回到上一页面，相当于pop操作 - router.back(); - }) - }.justifyContent(FlexAlign.Center) - } - .width("100%").height("100%") - .alignItems(HorizontalAlign.Center) - } - - pageTransition() { - // 定义页面进入时的效果，从左侧滑入，时长为1200ms，无论页面栈发生push还是pop操作均可生效 - PageTransitionEnter({ duration: 1200 }) - .slide(SlideEffect.Left) - // 定义页面退出时的效果，相对于正常页面位置x方向平移100vp，y方向平移100vp，透明度变为0，时长为1000ms，无论页面栈发生push还是pop操作均可生效 - PageTransitionExit({ duration: 1000 }) - .translate({ x: 100.0, y: 100.0 }) - .opacity(0) - } -} -``` - - - -![pageTransition_None](figures/pageTransition_None.gif) diff --git a/zh-cn/application-dev/ui/arkts-shadow-effect.md b/zh-cn/application-dev/ui/arkts-shadow-effect.md new file mode 100644 index 0000000000000000000000000000000000000000..47d9cd48f32b71ad7323be0f23d0e22eb3531091 --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-shadow-effect.md @@ -0,0 +1,48 @@ +# 阴影 + + +阴影接口[shadow](../reference/arkui-ts/ts-universal-attributes-image-effect.md)可以为当前组件添加阴影效果，该接口支持两种类型参数，开发者可配置[ShadowOptions](../reference/arkui-ts/ts-universal-attributes-image-effect.md#shadowoptions%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E)自定义阴影效果。ShadowOptions模式下，当radius = 0 或者 color 的透明度为0时，无阴影效果。 + + + +```ts +@Entry +@Component +struct ShadowOptionDemo { + build() { + Row() { + Column() { + Column() { + Text('shadowOption').fontSize(12) + } + .width(100) + .aspectRatio(1) + .margin(10) + .justifyContent(FlexAlign.Center) + .backgroundColor(Color.White) + .borderRadius(20) + .shadow({ radius: 10, color: Color.Gray }) + + Column() { + Text('shadowOption').fontSize(12) + } + .width(100) + .aspectRatio(1) + .margin(10) + .justifyContent(FlexAlign.Center) + .backgroundColor('#a8a888') + .borderRadius(20) + .shadow({ radius: 10, color: Color.Gray, offsetX: 20, offsetY: 20 }) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + } + .height('100%') + } +} +``` + + + +![zh-cn_image_0000001598502322](figures/zh-cn_image_0000001598502322.png) diff --git a/zh-cn/application-dev/ui/arkts-shared-element-transition.md b/zh-cn/application-dev/ui/arkts-shared-element-transition.md new file mode 100644 index 0000000000000000000000000000000000000000..998b35934c26763fce849e3b15f29894513e3429 --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-shared-element-transition.md @@ -0,0 +1,668 @@ +# 共享元素转场 + + +共享元素转场是一种界面切换时对相同或者相似的元素做的一种位置和大小匹配的过渡动画效果。共享元素动画一般和模态转场一起配合使用以实现对应的效果，除此之外，通过转场动画和属性动画的配合，可以适用更多的共享元素转场场景。 + + +## 使用transition和属性动画实现共享元素转场 + +对于同一个容器展开，容器内兄弟组件消失或者出现的场景，可通过对同一个容器展开前后进行宽高位置变化并配置属性动画，对兄弟组件配置出现消失转场动画实现共享元素转场。 + +1. 构建需要展开的页面，并通过状态变量构建好普通状态和展开状态的界面。 + + ```ts + // 通过状态变量的判断，在同一个组件内构建普通状态和展开状态的界面 + @Component + export struct MyExtendView { + // 声明与父组件进行交互的是否展开状态变量 + @Link isExpand: boolean; + @State cardList: Array = xxxx; + + build() { + List() { + // 根据需要定制展开后的组件 + if (this.isExpand) { + Text('expand') + .transition(TransitionEffect.translate(y:300).animation({ curve: curves.springMotion(0.6, 0.8) })) + } + + ForEach(this.cardList, (item: CradData) => { + MyCard({ cardData: item }) + }) + } + .width(this.isExpand ? 200 : 500) // 根据组要定义展开后的组件的属性 + .animation({ curve: curves.springMotion() }) // 为组件属性绑定动画 + } + } + ``` + +2. 将需要展开的页面展开，通过状态变量控制兄弟组件消失或出现，并通过绑定出现消失转场实现兄弟组件转场效果。 + + ```ts + @State isExpand: boolean = false + + ... + List() { + // 通过是否展开状态变量控制兄弟组件的出现或者消失，并配置出现消失转场动画 + if (!this.isExpand) { + Text('收起时我出现') + .transition(TransitionEffect.translate(y:300).animation({ curve: curves.springMotion(0.6, 0.9) })) + } + + MyExtendView({ isExpand: $isExpand }) + .onClick(() => { + this.isExpand = !this.isExpand; + }) + + // 通过是否展开状态变量控制兄弟组件的出现或者消失，并配置出现消失转场动画 + if (this.isExpand) { + Text('展开时我出现') + .transition(TransitionEffect.translate(y:300).animation({ curve: curves.springMotion() })) + } + } + + ... + ``` + + +完整示例和效果如下。 + + + +```ts +// utils.ets +import curves from '@ohos.curves'; + +// 通过状态变量的判断，在同一个组件内构建普通状态和展开状态的界面 +@Component +export struct share_transition_expand { + // 声明与父组件进行交互的是否展开状态变量 + // 元素展开 + @Link isExpand: boolean; + // 当前展开元素 + @State curIndex: number = 0; + private listArray: Array = [1, 2, 3, 4, 5, 6]; + + build() { + Column() { + List() { + ForEach(this.listArray, (item, index) => { + // 根据需要定制展开后的组件 + if (!this.isExpand || this.curIndex == index) { + ListItem() { + Column() { + Row() { + Row() + .backgroundColor(Color.Pink) + .borderRadius(20) + .width(80) + .height(80) + + Column() { + Text('点击展开 Item ' + item) + .fontSize(20) + Text('共享元素转场') + .fontSize(12) + .fontColor(0x909399) + } + .alignItems(HorizontalAlign.Start) + .justifyContent(FlexAlign.SpaceAround) + .margin({ left: 10 }) + .height(80) + } + .width('90%') + .height(100) + + if (this.isExpand) { + Row() { + Text('展开态') + .fontSize(28) + .fontColor(0x909399) + .textAlign(TextAlign.Center) + .transition(TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.6, 0.9) })) + } + .width('90%') + .justifyContent(FlexAlign.Center) + } + } + .onClick(() => { + // 定义展开收起的动画参数 + animateTo({ curve: curves.springMotion(0.6, 0.9) }, () => { + this.curIndex = index; + this.isExpand = !this.isExpand; + }) + }) + .width('90%') + .height(this.isExpand && this.curIndex == index ? '85%' : 100) // 根据需要定义展开后的组件的属性 + .alignItems(HorizontalAlign.Center) + .borderRadius(10) + .margin({ top: 15 }) + .backgroundColor(Color.White) + .shadow({ radius: 20, color: 0x909399, offsetX: 20, offsetY: 10 }) + // 通过是否展开状态变量控制兄弟节点的出现或者消失，并配置出现消失转场动画 + .transition(TransitionEffect.scale({ x: 0, y: 0 }).animation({ curve: curves.springMotion(0.3, 1.5) })) + } + .zIndex(this.curIndex == index ? 1 : 0) + } + }) + } + .height('100%') + .alignListItem(ListItemAlign.Center) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Start) + } +} +``` + + + +```ts +// Index.ets +import { share_transition_expand } from './utils'; + +@Entry +@Component +struct ShareTransitionDemo { + @State isExpand: boolean = false; + + build() { + Column() { + Text('兄弟节点出现消失') + .fontWeight(FontWeight.Bold) + .fontSize(30) + .fontColor(Color.Black) + .margin(10) + + share_transition_expand({ isExpand: $isExpand }) + + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Start) + } +} +``` + + + +![zh-cn_image_0000001600653160](figures/zh-cn_image_0000001600653160.gif) + + +## 使用transition搭配zIndex实现共享元素转场 + +对于同一个容器展开，兄弟组件不消失的场景，可以配合改变Z轴让展开组件显示在最上层，从而实现共享元素转场。 + +- 同时构建普通状态和展开状态：通过是否展开的状态变量，在同一个组件内构建普通状态和展开状态的界面。 + +- 通过zIndex改变层级：展开状态将zIndex置为1，因为zIndex默认为0，设置为1就会置于zIndex值为0的兄弟组件上层。 + +- 通过仿射属性改变位置：根据卡片当前的位置，通过translate在展开的时候移到父容器的顶部。 + +- 通过占位容器不影响兄弟节点位置：外层容器占位，内部容器改变大小。 + +完整示例和效果如下。 + + +```ts +// utils.ets +import curves from '@ohos.curves'; + +// 通过状态变量的判断，在同一个组件内构建普通状态和展开状态的界面 +@Component +export struct share_zIndex_expand { + // 声明与父组件进行交互的是否展开状态变量 + @Link isExpand: boolean; + @Link curIndex: number; + @State listArray: Array = [1, 2, 3, 4, 5, 6]; + private parentScroller: Scroller; // 上层滑动组件控制器 + + build() { + Column() { + List() { + ForEach(this.listArray, (item, index) => { + // 根据需要定制展开后的组件 + if (!this.isExpand || this.curIndex == index) { + ListItem() { + Column() { + Row() { + Row() + .backgroundColor(Color.Pink) + .borderRadius(20) + .width(80) + .height(80) + + Column() { + Text('点击展开 Item ' + item) + .fontSize(20) + Text('共享元素转场') + .fontSize(12) + .fontColor(0x909399) + } + .alignItems(HorizontalAlign.Start) + .justifyContent(FlexAlign.SpaceAround) + .margin({ left: 10 }) + .height(80) + } + .width('90%') + .height(100) + + if (this.isExpand && this.curIndex == index) { + Row() { + Text('展开态') + .fontSize(28) + .fontColor(0x909399) + .textAlign(TextAlign.Center) + .transition(TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.6, 0.9) })) + } + .width('90%') + .justifyContent(FlexAlign.Center) + } + } + .width('90%') + .height(this.isExpand && this.curIndex == index ? 750 : 100) + .alignItems(HorizontalAlign.Center) + .borderRadius(10) + .margin({ top: 15 }) + .backgroundColor(Color.White) + .shadow({ radius: 20, color: 0x909399, offsetX: 20, offsetY: 10 }) + } + .onClick(() => { + // 定义展开收起的动画参数 + animateTo({ curve: curves.springMotion(0.6, 0.9) }, () => { + this.curIndex = index; + this.isExpand = !this.isExpand; + }) + }) + .zIndex(this.curIndex == index ? 1 : 0) // 当前ListItem被选中时，zIndex置1，会显示在其他zIndex为0的兄弟组件之上 + .translate({ // 根据卡片当前的位置，通过translate在展开的时候移到父容器的顶端 + y: this.isExpand && this.curIndex == index ? -60 - this.parentScroller.currentOffset()['yOffset'] : 0 + }) + } + }) + } + .clip(false) + .height('100%') // 占位容器固定大小 + .alignListItem(ListItemAlign.Center) + } + .zIndex(1) + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Start) + } +} +``` + + +```ts +// Index.ets +import { share_zIndex_expand } from './utils' + +@Entry +@Component +struct ShareZIndexDemo { + @State isExpand: boolean = false; + @State curIndex: number = 0; + scroller: Scroller = new Scroller(); + + build() { + Scroll(this.scroller) { + Column() { + Text('ZIndex改变Z轴') + .fontWeight(FontWeight.Bold) + .fontSize(30) + .fontColor(Color.Black) + .zIndex(0) + .margin(10) + + share_zIndex_expand({ isExpand: $isExpand, curIndex: $curIndex, parentScroller: this.scroller }) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Start) + } + } +} +``` + +![zh-cn_image_0000001600332176](figures/zh-cn_image_0000001600332176.gif) + + +## 使用geometryTransition实现共享元素转场 + +[geometryTransition](../reference/arkui-ts/ts-transition-animation-geometrytransition.md)用于组件内隐式共享元素转场，在视图状态切换过程中提供丝滑的上下文继承过渡体验。 + +通过if/else范式使用geometryTransition实现共享元素转场的完整示例和效果如下。 + + +```ts +@Entry +@Component +struct IfElseGeometryTransition { + @State isShow: boolean = false; + + build() { + Stack({ alignContent: Alignment.Center }) { + if (this.isShow) { + Image($r('app.media.test')) + .autoResize(false) + .clip(true) + .width(300) + .height(400) + .offset({ y: 100 }) + .geometryTransition("picture") + .transition(TransitionEffect.OPACITY) + } else { + // geometryTransition此处绑定的是容器，那么容器内的子组件需设为相对布局跟随父容器变化， + // 套多层容器为了说明相对布局约束传递 + Column() { + Column() { + Image($r('app.media.icon')) + .width('100%').height('100%') + }.width('100%').height('100%') + } + .width(80) + .height(80) + // geometryTransition会同步圆角，但仅限于geometryTransition绑定处，此处绑定的是容器 + // 则对容器本身有圆角同步而不会操作容器内部子组件的borderRadius + .borderRadius(20) + .clip(true) + .geometryTransition("picture") + // transition保证节点离场不被立即析构，设置通用转场效果 + .transition(TransitionEffect.OPACITY) + } + } + .onClick(() => { + animateTo({ duration: 1000 }, () => { + this.isShow = !this.isShow; + }) + }) + } +} +``` + +![zh-cn_image_0000001599644878](figures/zh-cn_image_0000001599644878.gif) + +结合模态接口使用geometryTransition的示例和效果如下。 + + +```ts +import curves from '@ohos.curves'; + +@Entry +@Component +struct GeometryTransitionDemo { + // 用于控制模态转场的状态变量 + @State isPresent: boolean = false; + + // 通过@Builder构建模态展示界面 + @Builder + MyBuilder() { + Column() { + Text(this.isPresent ? 'Page 2' : 'Page 1') + .fontWeight(FontWeight.Bold) + .fontSize(30) + .fontColor(Color.Black) + .margin(20) + + Row() { + Text('共享组件一') + .fontWeight(FontWeight.Bold) + .fontSize(20) + .fontColor(Color.White) + } + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .backgroundColor(0xf56c6c) + .width('100%') + .aspectRatio(1) + .margin({ bottom: 20 }) + // 新增的共享元素Row组件，ID是share1 + .geometryTransition('share1') + + Column() { + Text('展开页') + .textAlign(TextAlign.Center) + .fontSize(15) + .fontColor(this.isPresent ? Color.White : Color.Transparent) + .margin(20) + + Text('点击任意位置返回') + .textAlign(TextAlign.Center) + .fontSize(15) + .fontColor(this.isPresent ? Color.White : Color.Transparent) + } + .width('100%') + .transition(TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.6, 1.2) })) + + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Start) + .transition(TransitionEffect.opacity(0.99)) + .backgroundColor(this.isPresent ? 0x909399 : Color.Transparent) + .clip(true) + .onClick(() => { + animateTo({ duration: 1000 }, () => { + this.isPresent = !this.isPresent; + }) + }) + } + + build() { + Column() { + Text('Page 1') + .fontWeight(FontWeight.Bold) + .fontSize(30) + .fontColor(Color.Black) + .margin(20) + + Row() { + Text('共享组件一') + .fontWeight(FontWeight.Bold) + .fontSize(20) + .fontColor(Color.White) + } + .justifyContent(FlexAlign.Center) + .borderRadius(10) + .backgroundColor(0xf56c6c) + .width(150) + .height(150) + .margin(20) + // 模态转场组件 + .bindContentCover($$this.isPresent, this.MyBuilder, ModalTransition.NONE) + // 这里配置了Row组件有共享元素效果，ID是share1 + .geometryTransition('share1') + .onClick(() => { + animateTo({ curve: curves.springMotion(0.6, 1.2) }, () => { + // 在动画闭包内改变状态变量，让模态界面显示 + this.isPresent = !this.isPresent; + }) + }) + + Text('组件二') + .fontWeight(FontWeight.Bold) + .fontSize(20) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + .borderRadius(10) + .backgroundColor(0x67C23A) + .width(150) + .height(150) + .margin(20) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Start) + .backgroundColor(Color.White) + } +} +``` + +![zh-cn_image_0000001597320326](figures/zh-cn_image_0000001597320326.gif) + + + +## 使用属性动画实现共享元素转场效果 + + +```ts +import curves from '@ohos.curves'; + +@Entry +@Component +struct AutoAchieveShareTransitionDemo { + private items: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']; + + // 卡片是否展开 + @State expand: boolean = false; + + // 共享元素相关属性 + @State rect_top: number = 0; // 共享元素position + @State rect_bottom: number = 0; + @State rect_left: number = 0; + @State rect_right: number = 0; + + // 新建元素相关属性 + @State item: string = ''; // 记录展开元素 + @State cardHeight: number = 300; // 卡片高度 + @State cardOpacity: number = 1; // 卡片透明度 + @State layoutHeight: number = 300; // 展开页高度 + @State layoutWidth: string = '90%'; // 展开页宽度 + @State layoutOffset: number = 0; // 展开页偏移量 + @State layoutOpacity: number = 0; // 展开页透明度 + + // 用于结束回调中进行判断 + @State count: number = 0; + + build() { + Stack() { + Scroll() { + Column({ space: 20 }) { + ForEach(this.items, (item, index) => { + Row() { + Column() { + Text('共享元素 ' + item) + .fontSize(30) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bolder) + Text('卡片展开') + .fontSize(20) + .fontColor(0x909399) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + } + .width('90%') + .height(this.cardHeight) + .padding(20) + .backgroundColor(Color.Pink) + .borderRadius(10) + .shadow({ radius: 10, color: 0x909399, offsetX: 10, offsetY: 10 }) + .opacity(this.expand && this.item == item ? 0 : 1) + // 设置唯一ID，获取该ID对应组件的属性信息 + .id(item) + .onClick(() => { + // 获取对应组件的位置、大小信息 + let strJson = getInspectorByKey(item); + let obj = JSON.parse(strJson); + let rectInfo = JSON.parse('[' + obj.$rect + ']'); + let rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]; + let rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]; + let rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]; + let rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1]; + let rect_value = { + "left": rect_left, "top": rect_top, "right": rect_right, "bottom": rect_bottom + }; + + // 设置共享元素的位置、内容、状态 + this.rect_top = rect_top; + this.item = item; + this.expand = true; + this.count += 1; + + animateTo({ curve: curves.springMotion() }, () => { + this.layoutHeight = 2772 / 3.5; + this.layoutWidth = '100%'; + this.layoutOffset = -((rect_top - 136) / 3.5); + }) + }) + }) + } + .width('100%') + .margin({ top: 20 }) + } + .height('100%') + + // 根据获取的组件信息新建与该组件相同的元素 + if (this.expand) { + Column() { + // 共享元素 + Row() { + Column() { + Text('共享元素 ' + this.item) + .fontSize(30) + .fontColor(Color.Black) + .fontWeight(FontWeight.Bolder) + Text('卡片展开') + .fontSize(20) + .fontColor(0x909399) + } + .width('100%') + .height('100%') + .justifyContent(FlexAlign.Center) + } + .width('100%') + .height(this.cardHeight) + .padding(20) + .backgroundColor(Color.Pink) + + // 新增元素 + Text('展开页面\n\n展开页面\n\n展开页面\n\n展开页面\n\n展开页面\n\n展开页面\n\n展开页面\n\n展开页面') + .fontSize(20) + .fontColor(0xcccccc) + .margin({ top: 20 }) + + } + .borderRadius(this.layoutWidth == '100%' ? 0 : 10) + .shadow({ radius: 10, color: 0x909399, offsetX: 10, offsetY: 10 }) + .width(this.layoutWidth) + .height(this.layoutHeight) + .clip(true) + .backgroundColor(Color.White) + // 计算新建组件绝对位置 + .position({ + x: this.layoutWidth == '90%' ? '5%' : 0, + y: (this.rect_top - 136) / 3.5 + }) + .translate({ + y: this.layoutOffset + }) + .onClick(() => { + this.count -= 1; + + animateTo({ + curve: curves.springMotion(), + onFinish: (() => { + if (this.count == 0) { + this.expand = false; + } + }) + }, () => { + this.layoutHeight = this.cardHeight; + this.layoutWidth = '90%'; + this.layoutOffset = 0; + }) + }) + } + } + } +} +``` + + + +![zh-cn_image_0000001599374166](figures/zh-cn_image_0000001599374166.gif) + diff --git a/zh-cn/application-dev/ui/arkts-spring-animation.md b/zh-cn/application-dev/ui/arkts-spring-animation.md deleted file mode 100644 index 6ad3d408a7a3ab018a6ac6e5be1ab7672b528a68..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/arkts-spring-animation.md +++ /dev/null @@ -1,166 +0,0 @@ -# 弹簧曲线动画 - - -ArkUI提供了[预置动画曲线](../reference/arkui-ts/ts-appendix-enums.md#curve)，指定了动画属性从起始值到终止值的变化规律，如Linear、Ease、EaseIn等。同时，ArkUI也提供了由弹簧振子物理模型产生的弹簧曲线。通过弹簧曲线，开发者可以设置超过设置的终止值，在终止值附近震荡，直至最终停下来的效果。弹簧曲线的动画效果比其他曲线具有更强的互动性、可玩性。 - - -弹簧曲线的接口包括两类，一类是[springCurve](../reference/apis/js-apis-curve.md#curvesspringcurve9)，另一类是[springMotion](../reference/apis/js-apis-curve.md#curvesspringmotion9)和[responsiveSpringMotion](../reference/apis/js-apis-curve.md#curvesresponsivespringmotion9)，这两种方式都可以产生弹簧曲线。 - - -## 使用springCurve - -springCurve的接口为： - - -```ts -springCurve(velocity: number, mass: number, stiffness: number, damping: number) -``` - -构造参数包括初速度，弹簧系统的质量、刚度、阻尼。构建springCurve时，可指定质量为1，根据springCurve中的参数说明，调节刚度、阻尼两个参数，达到想要的震荡效果。 - - - -```ts -import curves from '@ohos.curves'; -@Entry -@Component -struct SpringTest { - @State translateX: number = 0; - - private jumpWithSpeed(speed: number) { - this.translateX = -1; - animateTo({ duration: 2000, curve: curves.springCurve(speed, 1, 1, 1.2) }, () => { - // 以指定初速度进行x方向的平移的弹簧动画 - this.translateX = 0; - }) - } - - build() { - Column() { - Button("button") - .fontSize(14) - .width(100) - .height(50) - .margin(30) - .translate({ x: this.translateX }) - Row({space:50}) { - Button("jump 50").fontSize(14) - .onClick(() => { - // 以初速度50的弹簧曲线进行平移 - this.jumpWithSpeed(50); - }) - Button("jump 200").fontSize(14) - .onClick(() => { - // 以初速度200的弹簧曲线进行平移 - this.jumpWithSpeed(200); - }) - }.margin(30) - }.height('100%').width('100%') - } -} -``` - - -![springCurve](figures/springCurve.gif) - - -以上示例中，点击不同的按钮，给定springCurve的不同初速度，button会有“弹性”的到达指定位置，且button的振幅随着速度的增大而变大。另外也可以修改springCurve的质量、刚度、阻尼参数，达到想要的弹性的程度。 - - ->**说明：** -> ->速度只是放大了振荡的效果，但系统能否产生振荡的效果，取决于弹簧振子本身的物理参数，即质量、刚度、阻尼三个参数。刚度越小、阻尼越大，springCurve的“弹性”越弱，振荡效果越弱。随着刚度减小或阻尼变大，达到过阻尼状态后，无论速度为多大，都不会有在终点值附近振荡的效果。 - - -## 使用springMotion和responsiveSpringMotion - -[springMotion](../reference/apis/js-apis-curve.md#curvesspringmotion9)的接口为： - - -```ts -springMotion(response?: number, dampingFraction?: number, overlapDuration?: number) -``` - -[responsiveSpringMotion](../reference/apis/js-apis-curve.md#curvesresponsivespringmotion9)的接口为： - - -```ts -responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number) -``` - -它们的构造参数包括弹簧自然振动周期、阻尼系数、弹性动画衔接时长这三个可选参数，参数的含义请参考其文档。 - - -使用springMotion和responsiveSpringMotion曲线时，duration不生效，适合于跟手动画。 - - - -```ts -import curves from '@ohos.curves'; - -@Entry -@Component -struct SpringMotionTest { - @State positionX: number = 100; - @State positionY: number = 100; - diameter: number = 50; - - build() { - Column() { - Row() { - Circle({ width: this.diameter, height: this.diameter }) - .fill(Color.Blue) - .position({ x: this.positionX, y: this.positionY }) - .onTouch((event: TouchEvent) => { - if (event.type === TouchType.Move) { - // 跟手过程，使用responsiveSpringMotion曲线 - animateTo({ curve: curves.responsiveSpringMotion() }, () => { - // 减去半径，以使球的中心运动到手指位置 - this.positionX = event.touches[0].screenX - this.diameter / 2; - this.positionY = event.touches[0].screenY - this.diameter / 2; - console.info(`move, animateTo x:${this.positionX}, y:${this.positionY}`); - }) - } else if (event.type === TouchType.Up) { - // 离手时，使用springMotion曲线 - animateTo({ curve: curves.springMotion() }, () => { - this.positionX = 100; - this.positionY = 100; - console.info(`touchUp, animateTo x:100, y:100`); - }) - } - }) - } - .width("100%").height("80%") - .clip(true) // 如果球超出父组件范围，使球不可见 - .backgroundColor(Color.Orange) - - Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Center }) { - Text("拖动小球").fontSize(16) - } - .width("100%") - - Row() { - Text('点击位置: [x: ' + Math.round(this.positionX) + ', y:' + Math.round(this.positionY) + ']').fontSize(16) - } - .padding(10) - .width("100%") - }.height('100%').width('100%') - } -} -``` - - -以上代码是跟手动画的一个示例。通过在onTouch事件中，捕捉触摸的位置，改变组件的translate或者position属性，使其在跟手过程中运动到触摸位置，松手后回到原位置。跟手动画的效果如下： - - -![springMotion](figures/springMotion.gif) - - -跟手过程推荐使用responsiveSpringMotion曲线，松手过程推荐使用springMotion曲线。跟手过程随着手的位置变化会被多次触发，所以会接连启动多次responsiveSpringMotion动画，松手时启动一次springMotion动画。跟手、松手过程在对同一对象的同一属性上执行动画，且使用了springMotion或responsiveSpringMotion曲线，每次新启动的动画会继承上次动画使用的速度，实现平滑过渡。 - - ->**说明：** -> -> 1. springCurve可以设置初速度，单一属性存在多个动画时不会互相影响，观察到的是多个动画效果的叠加。 -> -> 2. springMotion虽然内部有速度机制，但不可由开发者设置。在单一属性存在多个动画时，后一动画会取代前一动画，并继承前一动画的速度。 diff --git a/zh-cn/application-dev/ui/arkts-spring-curve.md b/zh-cn/application-dev/ui/arkts-spring-curve.md new file mode 100644 index 0000000000000000000000000000000000000000..916f6741583c3f554d9705d93539b362ad392e48 --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-spring-curve.md @@ -0,0 +1,164 @@ +# 弹簧曲线 + + +阻尼弹簧曲线（以下简称弹簧曲线）对应的阻尼弹簧系统中，偏离平衡位置的物体一方面受到弹簧形变产生的反向作用力，被迫发生振动。另一方面，阻尼的存在为物体振动提供阻力。除阻尼为0的特殊情况，物体在振动过程中振幅不断减小，且最终趋于0，其轨迹对应的动画曲线自然连续。 + + +采用弹簧曲线的动画在达终点时动画速度为0，不会产生动画“戛然而止”的观感，导致影响用户体验。 + + +ArkUI提供了四种阻尼弹簧曲线接口。 + + +- [springMotion](../reference/apis/js-apis-curve.md#curvesspringmotion9)：创建弹性动画，动画时长由曲线参数、属性变化值大小和弹簧初速度自动计算，开发者指定的动画时长不生效。 + springMotion不提供速度设置接口，速度通过继承获得，无需开发者指定。对于某个属性，如果当前存在正在运行的springMotion或者responsiveSpringMotion类型动画，新创建的弹簧动画将停止正在运行的动画，并继承其当前时刻的动画属性值和速度作为新建动画的初始状态。此外，接口提供默认参数，便于开发者直接使用。 + + ```ts + function springMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve; + ``` + + +- [responsiveSpringMotion](../reference/apis/js-apis-curve.md#curvesresponsivespringmotion9)：是springMotion动画的一种特例，仅默认参数不同。一般用于跟手做成动画的场景，离手时可用springMotion创建动画，此时离手阶段动画将自动继承跟手阶段动画速度，完成动画衔接。 + 当新动画的overlapDuration参数不为0，且当前属性的上一个springMotion动画还未结束时，reponse和dampingFracion将在overlapDuration指定的时间内，从旧动画的参数值过渡到新动画的参数值。 + + + ```ts + function responsiveSpringMotion(response?: number, dampingFraction?: number, overlapDuration?: number): ICurve; + ``` + + +- [interpolatingSpring](../reference/apis/js-apis-curve.md#curvesinterpolatingspringcurve10)：适合于需要指定初速度的动效场景，动画时长同样由接口参数自动计算，开发者在动画接口中指定的时长不生效。 + 曲线接口提供速度入参，且由于接口对应一条从0到1的阻尼弹簧曲线，实际动画值根据曲线进行插值计算。所以速度也应该为归一化速度，其值等于动画属性改变的绝对速度除以动画属性改变量。因此不适合于动画起点属性值和终点属性值相同的场景，此时动画属性改变量为0，归一化速度不存在。 + + + ```ts + function interpolatingSpring(velocity: number, mass: number, stiffness: number, damping: number): ICurve; + ``` + + +- [springCurve](../reference/apis/js-apis-curve.md#curvesspringcurve9)：适合于需要直接指定动画时长的场景。springCurve接口与interpolatingSpring接口几乎一致，但是对于采用springCurve的动画，会将曲线的物理时长映射到指定的时长，相当于在时间轴上拉伸或压缩曲线，破坏曲线原本的物理规律，因此不建议开发者使用。 + + ```ts + function springCurve(velocity: number, mass: number, stiffness: number, damping: number): ICurve; + ``` + + +关于弹簧曲线完整的使用示例和参考效果如下，开发者也可参考[动画衔接](arkts-animation-smoothing.md)，掌握使用reponsiveSpringMotion和springMotion进行手势和动画之间的衔接。 + + +弹簧曲线的示例代码和效果如下。 + + + +```ts +import curves from '@ohos.curves'; + +class Spring { + public title: string; + public subTitle: string; + public iCurve: ICurve; + + constructor(title: string, subTitle: string, iCurve: ICurve) { + this.title = title; + this.iCurve = iCurve; + this.subTitle = subTitle; + } +} + +// 弹簧组件 +@Component +struct Motion { + @Prop dRotate: number + private title: string + private subTitle: string + private iCurve: ICurve + + build() { + Row() { + Column() { + Text(this.title) + .fontColor(Color.Black) + .fontSize(16) + Text(this.subTitle) + .fontColor(0xcccccc) + .fontSize(12) + } + .width(200) + .alignItems(HorizontalAlign.Start) + .justifyContent(FlexAlign.Center) + .height(100) + + Stack({ alignContent: Alignment.Top }) { + // 圆环 + Column() + .width(100) + .height(100) + .border({ + width: 10, + color: 0xf56c6c, + radius: 50 + }) + .backgroundColor(Color.White) + + // 遮盖层 + Column() { + Row() + .width(100) + .height(100) + .border({ + width: 10, + color: 0x909399, + radius: 50 + }) + .backgroundColor(0xf56c6c) + } + .width(100) + .height(50) + .clip(true) + .rotate({ angle: this.dRotate, centerX: 50, centerY: 50 }) + .animation({ curve: this.iCurve, iterations: -1 }) + } + .width(100) + .height(100) + } + .height(110) + .borderWidth({ bottom: 1 }) + .borderColor(0xf5f5f5) + .margin({ bottom: 5 }) + .alignItems(VerticalAlign.Top) + } +} + + +@Entry +@Component +export struct SpringDemo { + @State dRotate: number = 0; + private springs: Spring[] = [ + new Spring('springMotion()', '(springMotion(1, 0.25): \n\n周期2, 阻尼0.25)', curves.springMotion(1, 0.25)), + new Spring('responsiveSpringMotion()', 'responsiveSpringMotion(1, 0.25): \n\n默认弹性跟手曲线', curves.responsiveSpringMotion(1, 0.25)), + new Spring('interpolatingSpring()', '(interpolatingSpring(10, 1, 228, 30): \n\n初始速度100， 质量1， 剛度228， 阻尼30)', curves.interpolatingSpring(10, 1, 228, 30)), + new Spring('springCurve()', '(springCurve(10, 1, 228, 30): \n\n初始速度100， 质量1， 剛度228， 阻尼30)', curves.springCurve(10, 1, 228, 30)) + ]; + + build() { + Column() { + ForEach(this.springs, (item: Spring) => { + Motion({ title: item.title, subTitle: item.subTitle, iCurve: item.iCurve, dRotate: this.dRotate }) + }) + } + .justifyContent(FlexAlign.Center) + .width('100%') + .height(437) + .margin({ top: 20 }) + .onClick(() => { + this.dRotate = 360; + }) + } +} +``` + + + +![zh-cn_image_0000001649089041](figures/zh-cn_image_0000001649089041.gif) + diff --git a/zh-cn/application-dev/ui/arkts-traditional-curve.md b/zh-cn/application-dev/ui/arkts-traditional-curve.md new file mode 100644 index 0000000000000000000000000000000000000000..c0e25784b3b6a284458ecae3a6f13d022c05cacf --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-traditional-curve.md @@ -0,0 +1,113 @@ +# 传统曲线 + + +传统曲线基于数学公式，创造形状符合开发者预期的动画曲线。以三阶贝塞尔曲线为代表，通过调整曲线控制点，可以改变曲线形状，从而带来缓入、缓出等动画效果。对于同一条传统曲线，由于不具备物理含义，其形状不会因为用户行为发生任何改变，缺少物理动画的自然感和生动感。建议优先采用物理曲线创建动画，将传统曲线作为辅助用于极少数必要场景中。 + + +ArkUI提供了贝塞尔曲线、阶梯曲线等传统曲线接口，开发者可参照[插值计算](../reference/apis/js-apis-curve.md#ohoscurves-%E6%8F%92%E5%80%BC%E8%AE%A1%E7%AE%97)进行查阅。 + + +传统曲线的示例和效果如下： + + + +``` +class MyCurve { + public title: string; + public curve: Curve; + public color: Color | string; + + constructor(title: string, curve: Curve, color: Color | string = '') { + this.title = title; + this.curve = curve; + this.color = color; + } +} + +const myCurves: MyCurve[] = [ + new MyCurve(' Linear', Curve.Linear, 0x409EFF), + new MyCurve(' Ease', Curve.Ease, 0x67C23A), + new MyCurve(' EaseIn', Curve.EaseIn, 0xE6A23C), + new MyCurve(' EaseOut', Curve.EaseOut, 0xF56C6C), + new MyCurve(' EaseInOut', Curve.EaseInOut, 0xFFB6C1), + new MyCurve(' FastOutSlowIn', Curve.FastOutSlowIn, 0xDC143C), + new MyCurve(' LinearOutSlowIn', Curve.LinearOutSlowIn, 0xFF00FF), + new MyCurve(' FastOutLinearIn', Curve.FastOutLinearIn, 0x00BFFF), + new MyCurve(' ExtremeDeceleration', Curve.ExtremeDeceleration, 0x5F9EA0), + new MyCurve(' Sharp', Curve.Sharp, 0x00FFFF), + new MyCurve(' Rhythm', Curve.Rhythm, 0x66CDAA), + new MyCurve(' Smooth', Curve.Smooth, 0x7CFC00), + new MyCurve(' Friction', Curve.Friction, 0xFFA500) +] + +@Entry +@Component +export struct CurveDemo { + @State dRotate: number = 0; // 旋转角度 + + build() { + Column() { + // 曲线图例 + Grid() { + ForEach(myCurves, (item: MyCurve) => { + GridItem() { + Column() { + Row() + .width(20) + .height(20) + .borderRadius(10) + .backgroundColor(item.color) + Text(item.title) + .fontSize(10) + .fontColor(0x909399) + } + .width('100%') + } + }) + } + .columnsTemplate('1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .padding(10) + .width('100%') + .height(300) + + Stack() { + // 摆动管道 + Row() + .width(290) + .height(290) + .border({ + width: 10, + color: 0xE6E8EB, + radius: 145 + }) + + ForEach(myCurves, (item: MyCurve) => { + // 小球 + Column() { + Row() + .width(20) + .height(20) + .borderRadius(10) + .backgroundColor(item.color) + } + .width(20) + .height(300) + .rotate({ angle: this.dRotate }) + .animation({ duration: 2000, iterations: -1, curve: item.curve, delay: 100 }) + }) + } + .width('100%') + .height(437) + .onClick(() => { + this.dRotate ? null : this.dRotate = 360; + }) + } + .width('100%') + } +} +``` + + +![zh-cn_image_0000001641260233](figures/zh-cn_image_0000001641260233.gif) + diff --git a/zh-cn/application-dev/ui/arkts-transition-animation-within-component.md b/zh-cn/application-dev/ui/arkts-transition-animation-within-component.md deleted file mode 100644 index 00a8f08c31241b96158750a39f92b581618f0bfb..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/arkts-transition-animation-within-component.md +++ /dev/null @@ -1,256 +0,0 @@ -# 组件内转场动画 - - -组件的插入、删除过程即为组件本身的转场过程，组件的插入、删除动画称为组件内转场动画。通过组件内转场动画，可定义组件出现、消失的效果。 - - -组件内转场动画的接口为： - - - -```ts -transition(value: TransitionOptions) -``` - - -[transition](../reference/arkui-ts/ts-transition-animation-component.md)函数的入参为组件内转场的效果，可以定义平移、透明度、旋转、缩放这几种转场样式的单个或者组合的转场效果，必须和[animateTo](arkts-layout-update-animation.md#使用显式动画产生布局更新动画)一起使用才能产生组件转场效果。 - - -## transition常见用法 - -type用于指定当前的transition动效生效在组件的变化场景，类型为[TransitionType](../reference/arkui-ts/ts-appendix-enums.md#transitiontype)。 - -- 组件的插入、删除使用同一个动画效果 - - ```ts - Button() - .transition({ type: TransitionType.All, scale: { x: 0, y: 0 } }) - ``` - - 当type属性为TransitionType.All时，表示指定转场动效生效在组件的所有变化（插入和删除）场景。此时，删除动画和插入动画是相反的过程，删除动画是插入动画的逆播。例如，以上代码定义了一个Button控件。在插入时，组件从scale的x、y均为0的状态，变化到scale的x、y均为1（即完整显示）的默认状态，以逐渐放大的方式出现。在删除时，组件从scale的x、y均为1的默认状态，变化到指定的scale的x、y均为0的状态，逐渐缩小至尺寸为0。 - - -- 组件的插入、删除使用不同的动画效果 - - ```ts - Button() - .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 }, opacity: 0 }) - .transition({ type: TransitionType.Delete, rotate: { x: 0, y: 0, z: 1, angle: 360 } }) - ``` - - 当组件的插入和删除需要实现不同的转场动画效果时，可以调用两次transition函数，分别设置type属性为TransitionType.Insert和TransitionType.Delete。例如，以上代码定义了一个Button控件。在插入时，组件从相对于组件正常布局位置x方向平移200vp、y方向平移-200vp的位置、透明度为0的初始状态，变化到x、y方向平移量为0、透明度为1的默认状态，插入动画为平移动画和透明度动画的组合。在删除时，组件从旋转角为0的默认状态，变化到绕z轴旋转360度的终止状态，即绕z轴旋转一周。 - - -- 只定义组件的插入或删除其中一种动画效果。 - - ```ts - Button() - .transition({ type: TransitionType.Delete, translate: { x: 200, y: -200 } }) - ``` - - 当只需要组件的插入或删除的转场动画效果时，仅需设置type属性为TransitionType.Insert或TransitionType.Delete的transition效果。例如，以上代码定义了一个Button控件。删除时，组件从正常位置、没有平移的默认状态，变化到从相对于正常布局位置x方向平移200vp、y方向平移-200vp的位置的状态。插入该组件并不会产生该组件的转场动画。 - - -## if/else产生组件内转场动画 - -if/else语句可以控制组件的插入和删除。如下代码即可通过Button的点击事件，控制if的条件是否满足，来控制if下的Image组件是否显示。 - - - -```ts -@Entry -@Component -struct IfElseTransition { - @State flag: boolean = true; - @State show: string = 'show'; - - build() { - Column() { - Button(this.show).width(80).height(30).margin(30) - .onClick(() => { - if (this.flag) { - this.show = 'hide'; - } else { - this.show = 'show'; - } - // 点击Button控制Image的显示和消失 - this.flag = !this.flag; - }) - if (this.flag) { - Image($r('app.media.mountain')).width(200).height(200) - } - }.height('100%').width('100%') - } -} -``` - - -以上代码没有配置任何动画。接下来，我们将给以上代码加入组件内转场的效果。首先Image组件是由if控制的组件，需要给其加上transition的参数，以指定组件内转场的具体效果。例如，可以如以下代码，给其插入时加上平移效果，删除时加上缩放和透明度效果。 - - - -```ts -if (this.flag) { - Image($r('app.media.mountain')).width(200).height(200) - .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 } }) - .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } }) -} -``` - - -以上代码虽然指定了动画的样式，但是未指定动画参数，尚不知道需要用多长时间、怎样的曲线完成该动画。transition必须配合animateTo一起使用，并在animateTo的闭包中，控制组件的插入、删除。对于以上示例代码，即为在animateTo闭包中改变flag的值，该部分代码如下所示。指定动画时长为1000ms，曲线使用animateTo函数默认的曲线，改变flag的值。则由flag变化所引起的一切变化，都会按照该动画参数，产生动画。在这里，flag会影响Image的出现和消失。 - - - -```ts -animateTo({ duration: 1000 }, () => { - this.flag = !this.flag; -}) -``` - - -经过以上过程，当animateTo和transition一起使用时，即产生了组件内转场动画。完整示例代码如下： - - - -```ts -@Entry -@Component -struct IfElseTransition { - @State flag: boolean = true; - @State show: string = 'show'; - - build() { - Column() { - Button(this.show).width(80).height(30).margin(30) - .onClick(() => { - if (this.flag) { - this.show = 'hide'; - } else { - this.show = 'show'; - } - - animateTo({ duration: 1000 }, () => { - // 动画闭包内控制Image组件的出现和消失 - this.flag = !this.flag; - }) - }) - if (this.flag) { - // Image的出现和消失配置为不同的过渡效果 - Image($r('app.media.mountain')).width(200).height(200) - .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 } }) - .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } }) - } - }.height('100%').width('100%') - } -} -``` - - -![ifElseTransition](figures/ifElseTransition.gif) - - ->**说明：** -> ->当配置transition的效果为translate或scale时，本身位置叠加上平移或放大倍数后，动画过程中有可能超过父组件的范围。如果超出父组件的范围时，希望子组件完整的显示，那么可以设置父组件的clip属性为false，使父组件不对子组件产生裁剪。如果超出父组件的范围时，希望超出的子组件部分不显示，那么可以设置父组件的clip属性为true，裁剪掉子组件超出的部分。 - - -## ForEach产生组件内转场动画 - -和if/else类似，ForEach可以通过控制数组中的元素个数，来控制组件的插入和删除。通过ForEach来产生组件内转场动画，仍然需要两个条件： - -- ForEach里的组件配置了transition效果。 - -- 在animateTo的闭包中控制组件的插入或删除，即控制数组的元素添加和删除。 - - -以下代码是使用ForEach产生组件内转场动画的一个示例。 - - - -```ts -@Entry -@Component -struct ForEachTransition { - @State numbers: string[] = ["1", "2", "3", "4", "5"] - startNumber: number = 6; - - build() { - Column({ space: 10 }) { - Column() { - ForEach(this.numbers, (item) => { - // ForEach下的直接组件需配置transition效果 - Text(item) - .width(240) - .height(60) - .fontSize(18) - .borderWidth(1) - .backgroundColor(Color.Orange) - .textAlign(TextAlign.Center) - .transition({ type: TransitionType.All, translate: { x: 200 }, scale: { x: 0, y: 0 } }) - }, item => item) - } - .margin(10) - .justifyContent(FlexAlign.Start) - .alignItems(HorizontalAlign.Center) - .width("90%") - .height("70%") - - Button('向头部添加元素') - .fontSize(16) - .width(160) - .onClick(() => { - animateTo({ duration: 1000 }, () => { - // 往数组头部插入一个元素，导致ForEach在头部增加对应的组件 - this.numbers.unshift(this.startNumber.toString()); - this.startNumber++; - }) - }) - Button('向尾部添加元素') - .width(160) - .fontSize(16) - .onClick(() => { - animateTo({ duration: 1000 }, () => { - // 往数组尾部插入一个元素，导致ForEach在尾部增加对应的组件 - this.numbers.push(this.startNumber.toString()); - this.startNumber++; - }) - }) - Button('删除头部元素') - .width(160) - .fontSize(16) - .onClick(() => { - animateTo({ duration: 1000 }, () => { - // 删除数组的头部元素，导致ForEach删除头部的组件 - this.numbers.shift(); - }) - }) - Button('删除尾部元素') - .width(160) - .fontSize(16) - .onClick(() => { - animateTo({ duration: 1000 }, () => { - // 删除数组的尾部元素，导致ForEach删除头部的组件 - this.numbers.pop(); - }) - }) - } - .width('100%') - .height('100%') - } -} -``` - - -效果如下图： - - -![forEachTransition2](figures/forEachTransition2.gif) - - -由于Column布局方式设为了FlexAlign.Start，即竖直方向从头部开始布局。所以往数组末尾添加元素时，并不会对数组中现存元素对应的组件位置造成影响，只会触发新增组件的插入动画。而往数组头部添加元素时，原来数组中的所有元素的下标都增加了，虽然不会触发其添加或者删除，但是会影响到对应组件的位置。所以除新增的组件会做transition动画以外，之前存在于ForEach中组件也会做位置动画。 - - ->**说明：** -> ->if/else、ForEach为语法节点，配置组件内转场效果的组件应直接作为语法节点的孩子。由语法节点的增删引起的组件增删，只能触发其直接孩子组件的组件内转场动画，开发者不应期望其对更深层次的组件产生组件转场动画。 diff --git a/zh-cn/application-dev/ui/arkts-transition-overview.md b/zh-cn/application-dev/ui/arkts-transition-overview.md new file mode 100644 index 0000000000000000000000000000000000000000..31bc15ad63ef7aea78e5e95ad9b98e453d418f0f --- /dev/null +++ b/zh-cn/application-dev/ui/arkts-transition-overview.md @@ -0,0 +1,16 @@ +# 转场动画概述 + + +转场动画是指对将要出现或消失的组件做动画，对始终出现的组件做动画应使用[属性动画](arkts-attribute-animation.md)。转场动画主要为了让开发者从繁重的消失节点管理中解放出来，如果用属性动画做组件转场，开发者需要在动画结束回调中删除组件节点。同时，由于动画结束前已经删除的组件节点可能会重新出现，还需要在结束回调中增加对节点状态的判断。 + + +转场动画分为基础转场和高级模板化转场，有如下几类： + + +- [出现/消失转场](arkts-enter-exit-transition.md)：对新增、消失的控件实现动画效果的能力，是通用的基础转场效果。 + +- [导航转场](arkts-navigation-transition.md)：页面的路由转场方式，对应一个界面消失，另外一个界面出现的动画效果，如设置应用一级菜单切换到二级界面。 + +- [模态转场](arkts-modal-transition.md)：新的界面覆盖在旧的界面之上的动画，旧的界面不消失，新的界面出现，如弹框就是典型的模态转场动画。 + +- [共享元素转场](arkts-shared-element-transition.md)：共享元素转场是一种界面切换时对相同或者相似的元素做的一种位置和大小匹配的过渡动画效果。 diff --git a/zh-cn/application-dev/ui/arkts-zoom-animation.md b/zh-cn/application-dev/ui/arkts-zoom-animation.md deleted file mode 100644 index 59decbcb3f8d566eca5715a758a3045164f60721..0000000000000000000000000000000000000000 --- a/zh-cn/application-dev/ui/arkts-zoom-animation.md +++ /dev/null @@ -1,98 +0,0 @@ -# 放大缩小视图 - - -在不同页面间，有使用相同的元素（例如同一幅图）的场景，可以使用[共享元素转场](../reference/arkui-ts/ts-transition-animation-shared-elements.md)动画衔接。为了突出不同页面间相同元素的关联性，可为它们添加共享元素转场动画。如果相同元素在不同页面间的大小有明显差异，即可达到放大缩小视图的效果。 - - -共享元素转场的接口为： - - - -```ts -sharedTransition(id: string, options?: sharedTransitionOptions) -``` - - -其中根据sharedTransitionOptions中的type参数，共享元素转场分为Exchange类型的共享元素转场和Static类型的共享元素转场。 - - -## Exchange类型的共享元素转场 - -交换型的共享元素转场，需要两个页面中，存在通过sharedTransition函数配置为相同id的组件，它们称为共享元素。这种类型的共享元素转场适用于两个页面间相同元素的衔接，会从起始页共享元素的位置、大小过渡到目标页的共享元素的位置、大小。如果不指定type，默认为Exchange类型的共享元素转场，这也是最常见的共享元素转场的方式。使用Exchange类型的共享元素转场时，共享元素转场的动画参数由目标页options中的动画参数决定。 - - -## Static类型的共享元素转场 - -静态型的共享元素转场通常用于页面跳转时，标题逐渐出现或隐藏的场景，只需要在一个页面中有Static的共享元素，不能在两个页面中出现相同id的Static类型的共享元素。在跳转到该页面（即目标页）时，配置Static类型sharedTransition的组件做透明度从0到该组件设定的透明度的动画，位置保持不变。在该页面（即起始页）消失时，做透明度逐渐变为0的动画，位置保持不变。 - -共享元素转场的动画参数由该组件sharedTransition属性中的动画参数决定。 - - -## 场景示例 - -下面介绍使用共享元素转场进行放大缩小图片的示例。 - - -```ts -// src page -import router from '@ohos.router'; - -@Entry -@Component -struct SharedTransitionSrc { - build() { - Column() { - // 配置Exchange类型的共享元素转场，共享元素id为"sharedImage1" - Image($r('app.media.mountain')).width(50).height(50) - .sharedTransition('sharedImage1', { duration: 1000, curve: Curve.Linear }) - .onClick(() => { - // 点击小图时路由跳转至下一页面 - router.pushUrl({ url: 'pages/myTest/sharedTransitionDst' }); - }) - } - .padding(10) - .width("100%") - .alignItems(HorizontalAlign.Start) - } -} -``` - - - - -```ts -// dest page -import router from '@ohos.router'; -@Entry -@Component -struct SharedTransitionDest { - build() { - Column() { - // 配置Static类型的共享元素转场 - Text("SharedTransition dest page") - .fontSize(16) - .sharedTransition('text', { duration: 500, curve: Curve.Linear, type: SharedTransitionEffectType.Static }) - .margin({ top: 10 }) - - // 配置Exchange类型的共享元素转场，共享元素id为"sharedImage1" - Image($r('app.media.mountain')) - .width(150) - .height(150) - .sharedTransition('sharedImage1', { duration: 500, curve: Curve.Linear }) - .onClick(() => { - // 点击图片时路由返回至上一页面 - router.back(); - }) - } - .width("100%") - .alignItems(HorizontalAlign.Center) - } -} -``` - - -上述示例中，第一个页面（src page)和第二个页面（dest page）都配置了id为"sharedImage1"的共享元素转场，使两个页面能匹配到这一组共享元素。从第一个页面跳转到第二个页面时，第一个页面为起始页，第二个页面为目标页。配置id为"sharedImage1"的组件按照目标页中500ms的时长进行共享元素转场，达到放大视图的效果，id为"text"的组件按照配置的Static类型sharedTransition参数中的500ms的时长进行共享元素转场，标题逐渐出现。从第二个页面返回到第一个页面时，第二个页面为起始页，第一个页面为目标页。配置id为"sharedImage1"的组件按照目标页中1000ms的时长进行共享元素转场，缩小为原始视图，id为"text"的组件按照配置的Static类型sharedTransition参数中的500ms的时长进行共享元素转场，标题逐渐隐藏。 - - - -![sharedTransition](figures/sharedTransition.gif) diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001588458252.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001588458252.gif new file mode 100644 index 0000000000000000000000000000000000000000..cf42cf73d80c25d5907aa105a5763ad9dc2cee2d Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001588458252.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001592669598.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001592669598.gif new file mode 100644 index 0000000000000000000000000000000000000000..9a7a4e9af7af5d2c83a224c2d9e54b278911bc2f Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001592669598.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001592904050.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001592904050.png new file mode 100644 index 0000000000000000000000000000000000000000..51a082a7be243fab1204563cee80b0c941e27f71 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001592904050.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001595763076.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001595763076.png new file mode 100644 index 0000000000000000000000000000000000000000..afb64b5ea556fc8fdc917957169b30664026ae08 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001595763076.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001597320326.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001597320326.gif new file mode 100644 index 0000000000000000000000000000000000000000..4c17bf02d2f1cd0967da0a8432e2545dcb508500 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001597320326.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001597792146.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001597792146.gif new file mode 100644 index 0000000000000000000000000000000000000000..9cbf43f227f2a9d401c9ff00ac56d2c233f5ff6c Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001597792146.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001598502322.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001598502322.png new file mode 100644 index 0000000000000000000000000000000000000000..7b9f843105a307a18e4d2643b3a2e1498ae5b791 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001598502322.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599374166.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599374166.gif new file mode 100644 index 0000000000000000000000000000000000000000..dea5ddab447ff308946f203ba7a30a615909f290 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599374166.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599643478.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599643478.gif new file mode 100644 index 0000000000000000000000000000000000000000..dc50e6735ae96f6fa53aa1b28477b0d6a19d6738 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599643478.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599644878.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599644878.gif new file mode 100644 index 0000000000000000000000000000000000000000..5faecf91bc52fd9f6f3c37531a4578eda72392f3 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599644878.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599658168.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599658168.png new file mode 100644 index 0000000000000000000000000000000000000000..52ff25539581570744a53054d3f40dd65499c875 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599658168.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599808406.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599808406.gif new file mode 100644 index 0000000000000000000000000000000000000000..c1dc0c9c0c9692d6772cd68677340d4b965fa576 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599808406.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599812870.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599812870.png new file mode 100644 index 0000000000000000000000000000000000000000..1e40e3188067df474e316816afc82f5cf3cd7f7d Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599812870.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599813588.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599813588.gif new file mode 100644 index 0000000000000000000000000000000000000000..10152f65da75c5c38e211b809e1b6c23b360e72d Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599813588.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599818064.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599818064.gif new file mode 100644 index 0000000000000000000000000000000000000000..77dd2c348d87b8849b3d326c464dfabde9206ebb Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599818064.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599958466.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599958466.gif new file mode 100644 index 0000000000000000000000000000000000000000..45e48aebebe920703d4f5aebcdc7e78f70008abd Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599958466.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599971890.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599971890.gif new file mode 100644 index 0000000000000000000000000000000000000000..60154a89d359c2e3f9613ff694a33d4707e57e71 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599971890.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599977924.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599977924.gif new file mode 100644 index 0000000000000000000000000000000000000000..53eaef39efeb1c6dc79017b952171d332e99ea6a Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001599977924.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001600119626.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001600119626.gif new file mode 100644 index 0000000000000000000000000000000000000000..60a988737523cfaac6d438c18d3d3ff744982d7b Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001600119626.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001600137920.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001600137920.gif new file mode 100644 index 0000000000000000000000000000000000000000..750bd6eb4427b1fe755aa68e7b84adec81590df4 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001600137920.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001600332176.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001600332176.gif new file mode 100644 index 0000000000000000000000000000000000000000..73bb6bae21ea28171d7fd85d13ed426230a35749 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001600332176.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001600653160.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001600653160.gif new file mode 100644 index 0000000000000000000000000000000000000000..20f0e202c84d5b38e6882a25d99fc34ac6f83fb6 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001600653160.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001641176829.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001641176829.png new file mode 100644 index 0000000000000000000000000000000000000000..ff9e39797d1d1bd2ce03f4b2541083ab173abcee Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001641176829.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001641177073.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001641177073.png new file mode 100644 index 0000000000000000000000000000000000000000..6fc99bb66756dc7f3cfc94eefc90a9f386be412a Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001641177073.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001641260233.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001641260233.gif new file mode 100644 index 0000000000000000000000000000000000000000..dfae7da7ac302788d52e994e49fec1bf88b3156e Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001641260233.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001646921957.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001646921957.gif new file mode 100644 index 0000000000000000000000000000000000000000..64214f844e360139fca29aff574b032b9119641d Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001646921957.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001647027001.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001647027001.gif new file mode 100644 index 0000000000000000000000000000000000000000..6d9954740b9b84e2ea180d7ec7c2491393c41d6b Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001647027001.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649089041.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649089041.gif new file mode 100644 index 0000000000000000000000000000000000000000..c04ff2cffdcdfa1e6aa3e5dd194e88a11b1b6689 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649089041.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649279705.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649279705.gif new file mode 100644 index 0000000000000000000000000000000000000000..c9db9aa31ab6c613d5a5055165ed11eb1945b16c Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649279705.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649282285.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649282285.gif new file mode 100644 index 0000000000000000000000000000000000000000..a3a2433f5eb702fdfe04792cd2c90a1d3cfbf1ea Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649282285.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649338585.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649338585.gif new file mode 100644 index 0000000000000000000000000000000000000000..6d65d5d3a4b61493f4226f7997720b5ce44f4636 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649338585.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649455517.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649455517.png new file mode 100644 index 0000000000000000000000000000000000000000..fbea4a326006c041db662767f1e94db7bf79bf06 Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001649455517.png differ