Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 1cc00ec7 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!22794 22686挑单 

Merge pull request !22794 from LiAn/monthly_20230815
上级 d2f7a737 4558311b
隐藏空白更改
内联 并排
Showing with 57 addition and 47 deletion
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-drag-drop.md
浏览文件 @ 1cc00ec7
......@@ -5,8 +5,16 @@
> **说明：**
>
> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> 支持拖拽控制的组件：[Text](ts-basic-components-text.md)、[Image](ts-basic-components-image.md)、[Video](ts-media-components-video.md)、[List](ts-container-list.md)、[Grid](ts-container-grid.md)。
ArkUI组件默认支持拖拽。
当以下组件的draggable属性设置为true时可以响应拖拽事件，此时，组件不需要配置数据传输，即可进行拖拽。其他组件需要开发者将draggable属性设置为true且在onDragStart等接口中实现数据传输相关内容，才能完成拖拽。
- 默认支持拖拽（拖入和拖出）的组件：Search、TextInput、TextArea
- 默认支持拖入的组件：Video
- 默认支持拖出的组件：Text、List、Grid、FormComponent、Image、Hyperlink
## 属性
......@@ -21,7 +29,8 @@
```ts
// xxx.ets
import UDMF from '@ohos.data.UDMF';
import UDC from '@ohos.data.unifiedDataChannel';
import UTD from '@ohos.data.uniformTypeDescriptor';
@Entry
@Component
struct ImageExample {
......@@ -36,7 +45,7 @@ struct ImageExample {
Text('Image拖拽')
.fontSize('30dp')
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceAround }) {
Image($r('app.media.1'))
Image($r('app.media.icon'))
.width(100)
.height(100)
.border({ width: 1 })
......@@ -72,7 +81,7 @@ struct ImageExample {
}
.height('90%')
.width('100%')
.allowDrop(["File.Media.Text", "File.Media.Image"])
.allowDrop([UTD.UniformDataType.TEXT, UTD.UniformDataType.IMAGE])
.onDrop((event: DragEvent, extraParams: string) => {
let jsonString = JSON.parse(extraParams);
this.uri = jsonString.extraInfo;
......@@ -103,7 +112,7 @@ struct ImageExample {
.border({width: 1})
.height('90%')
.width('100%')
.allowDrop(["File.Media.Image"])
.allowDrop([UTD.UniformDataType.IMAGE])
.onDrop((event: DragEvent, extraParams: string) => {
console.log("enter onDrop")
let dragData = event.getData();
......@@ -111,7 +120,7 @@ struct ImageExample {
if(dragData != undefined) {
let arr = dragData.getRecords();
if(arr.length > 0) {
let image = <UDMF.Image>(arr[0]);
let image = <UDC.Image>(arr[0]);
this.uri = image.imageUri;
let jsonString = JSON.parse(extraParams);
this.BblockArr.splice(jsonString.insertIndex, 0, this.uri);
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
浏览文件 @ 1cc00ec7
......@@ -6,13 +6,18 @@
>
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
>
> 默认支持拖拽（拖入和拖出）的组件：Search、TextInput、TextArea
>
> 默认支持拖入的组件：Video
>
> 默认支持拖出的组件：Text、List、Grid、FormComponent、Image、Hyperlink
>
> 应用本身预置的资源文件（即应用在安装前的HAP包中已经存在的资源文件）仅支持本地应用内拖拽。
ArkUI组件默认支持拖拽。
当以下组件的[draggable](ts-universal-attributes-drag-drop.md)属性设置为true时可以响应拖拽事件，此时，组件不需要配置数据传输，即可进行拖拽。其他组件需要开发者将[draggable](ts-universal-attributes-drag-drop.md)属性设置为true且在onDragStart等接口中实现数据传输相关内容，才能完成拖拽。
- 默认支持拖拽（拖入和拖出）的组件：Search、TextInput、TextArea
- 默认支持拖入的组件：Video
- 默认支持拖出的组件：Text、List、Grid、FormComponent、Image、Hyperlink
## 事件
| 名称 | 支持冒泡 | 功能描述 |
......@@ -78,15 +83,14 @@
## 示例
```ts
import udmf from '@ohos.data.UDMF';
import UDC from '@ohos.data.unifiedDataChannel';
import UTD from '@ohos.data.uniformTypeDescriptor';
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct Index {
@State targetImage: string = '';
@State targetText: string = 'Drag Text';
@State hyperLinkText: string = 'HyperLink';
@State hyperLinkContent: string = 'HyperLink';
@State imageWidth: number = 100;
@State imageHeight: number = 100;
@State imgState: Visibility = Visibility.Visible;
......@@ -100,7 +104,7 @@ struct Index {
if (!data) {
return false;
}
let records: Array<udmf.UnifiedRecord> = data.getRecords();
let records: Array<UDC.UnifiedRecord> = data.getRecords();
if (!records || records.length <= 0) {
return false;
}
......@@ -111,7 +115,7 @@ struct Index {
getDataFromUdmf(event: DragEvent, callback: (data: DragEvent)=>void)
{
if(this.getDataFromUdmfRetry(event, callback)) {
return;
return;
}
setTimeout(()=>{
this.getDataFromUdmfRetry(event, callback);
......@@ -134,12 +138,12 @@ struct Index {
.margin({left: 15})
.visibility(this.imgState)
.onDragEnd((event)=>{
if (event.getResult() === DragResult.DRAG_SUCCESSFUL) {
promptAction.showToast({duration: 100, message: 'Drag Success'});
} else if (event.getResult() === DragResult.DRAG_FAILED) {
promptAction.showToast({duration: 100, message: 'Drag failed'});
}
})
if (event.getResult() === DragResult.DRAG_SUCCESSFUL) {
promptAction.showToast({duration: 100, message: 'Drag Success'});
} else if (event.getResult() === DragResult.DRAG_FAILED) {
promptAction.showToast({duration: 100, message: 'Drag failed'});
}
})
Text('test drag event')
.width('100%')
.height(100)
......@@ -160,9 +164,9 @@ struct Index {
Text('change video source')
}.draggable(true)
.onDragStart((event)=>{
let video: udmf.Video = new udmf.Video();
let video: UDC.Video = new UDC.Video();
video.videoUri = 'resource://RAWFILE/01.mp4';
let data: udmf.UnifiedData = new udmf.UnifiedData(video);
let data: UDC.UnifiedData = new UDC.UnifiedData(video);
event.setData(data);
})
Column() {
......@@ -173,10 +177,10 @@ struct Index {
.width('100%')
.height(100)
.onDragStart((event)=>{
let data: udmf.PlainText = new udmf.PlainText();
let data: UDC.PlainText = new UDC.PlainText();
data.abstract = 'this is abstract';
data.textContent = 'this is content this is content';
event.setData(new udmf.UnifiedData(data));
event.setData(new UDC.UnifiedData(data));
})
}.width('45%')
.height('100%')
......@@ -193,14 +197,14 @@ struct Index {
.draggable(true)
.margin({left: 15})
.border({color: Color.Black, width: 1})
.allowDrop([udmf.UnifiedDataType.IMAGE])
.allowDrop([UTD.UniformDataType.IMAGE])
.onDrop((dragEvent: DragEvent)=> {
this.getDataFromUdmf(dragEvent, (event)=>{
let records: Array<udmf.UnifiedRecord> = event.getData().getRecords();
let records: Array<UDC.UnifiedRecord> = event.getData().getRecords();
let rect: Rectangle = event.getPreviewRect();
this.imageWidth = Number(rect.width);
this.imageHeight = Number(rect.height);
this.targetImage = (<udmf.Image>(records[0])).imageUri;
this.targetImage = (<UDC.Image>(records[0])).imageUri;
event.useCustomDropAnimation = false;
animateTo({duration: 1000}, ()=>{
this.imageWidth = 100;
......@@ -216,11 +220,11 @@ struct Index {
.height(100)
.border({color: Color.Black, width: 1})
.margin(15)
.allowDrop([udmf.UnifiedDataType.TEXT])
.allowDrop([UTD.UniformDataType.TEXT])
.onDrop((dragEvent: DragEvent)=>{
this.getDataFromUdmf(dragEvent, event => {
let records:Array<udmf.UnifiedRecord> = event.getData().getRecords();
this.targetText = (<udmf.Text>(records[0])).details['value'];
let records:Array<UDC.UnifiedRecord> = event.getData().getRecords();
this.targetText = (<UDC.Text>(records[0])).details['value'];
})
})
......@@ -228,17 +232,17 @@ struct Index {
.width('100%')
.height(200)
.controls(true)
.allowDrop([udmf.UnifiedDataType.VIDEO])
.allowDrop([UTD.UniformDataType.VIDEO])
Column() {
Text(this.abstractContent).fontSize(20).width('100%')
Text(this.textContent).fontSize(15).width('100%')
}.width('100%').height(100).margin(20).border({color: Color.Black, width: 1})
.allowDrop([udmf.UnifiedDataType.PLAIN_TEXT])
.allowDrop([UTD.UniformDataType.PLAIN_TEXT])
.onDrop((dragEvent)=>{
this.getDataFromUdmf(dragEvent, event=>{
let records: Array<udmf.UnifiedRecord> = event.getData().getRecords();
let plainText: udmf.PlainText = <udmf.PlainText>(records[0]);
let records: Array<UDC.UnifiedRecord> = event.getData().getRecords();
let plainText: UDC.PlainText = <UDC.PlainText>(records[0]);
this.abstractContent = plainText.abstract;
this.textContent = plainText.textContent;
})
......
zh-cn/application-dev/ui/Readme-CN.md
浏览文件 @ 1cc00ec7
......@@ -53,6 +53,7 @@
- [共享元素转场](arkts-shared-element-transition.md)
- [组件动画](arkts-component-animation.md)
- 动画曲线
- [动画曲线概述](arkts-curve-overview.md)
- [传统曲线](arkts-traditional-curve.md)
- [弹簧曲线](arkts-spring-curve.md)
- [动画衔接](arkts-animation-smoothing.md)
......
zh-cn/application-dev/ui/arkts-curve-overview.md 0 → 100644
浏览文件 @ 1cc00ec7
# 动画曲线概述
动画曲线是属性关于时间的变化函数，决定属性变化时产生动画的运动轨迹。某一时刻下动画曲线的斜率代表动画的速度，对应属性变化的快慢。一条优秀的动画曲线具备连续光滑、符合用户意图、符合物理世界客观规律的特点。开发者可结合用户的使用场景和意图，为动效选取合适的动画曲线。
根据动画曲线是否符合物理世界客观规律，可将其分为物理曲线（ArkUI当前提供了多种物理弹簧曲线）和传统曲线两种类型。相比于传统曲线，物理曲线产生的运动轨迹更加符合用户认知，有助于创造自然生动的动画效果，建议开发者优先使用物理曲线。
\ No newline at end of file
zh-cn/application-dev/ui/arkts-traditional-curve.md
浏览文件 @ 1cc00ec7
# 传统曲线
动画曲线是属性关于时间的变化函数，决定属性变化时产生动画的运动轨迹。某一时刻下动画曲线的斜率代表动画的速度，对应属性变化的快慢。一条优秀的动画曲线具备连续光滑、符合用户意图、符合物理世界客观规律的特点。开发者可结合用户的使用场景和意图，为动效选取合适的动画曲线。根据动画曲线是否符合物理世界客观规律，可将其分为物理曲线（ArkUI当前提供了多种物理弹簧曲线）和传统曲线两种类型。相比于传统曲线，物理曲线产生的运动轨迹更加符合用户认知，有助于创造自然生动的动画效果，建议开发者优先使用物理曲线。
传统曲线基于数学公式，创造形状符合开发者预期的动画曲线。以三阶贝塞尔曲线为代表，通过调整曲线控制点，可以改变曲线形状，从而带来缓入、缓出等动画效果。对于同一条传统曲线，由于不具备物理含义，其形状不会因为用户行为发生任何改变，缺少物理动画的自然感和生动感。建议优先采用物理曲线创建动画，将传统曲线作为辅助用于极少数必要场景中。
ArkUI提供了贝塞尔曲线、阶梯曲线等传统曲线接口，开发者可参照[插值计算](../reference/apis/js-apis-curve.md)进行查阅。
传统曲线的示例和效果如下：
```ts
class MyCurve {
public title: string;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或