diff --git a/ETSUI/eTSArkUIAnimation/READEME_zh.md b/ETSUI/eTSArkUIAnimation/READEME_zh.md new file mode 100644 index 0000000000000000000000000000000000000000..ac87ce9d7514ef0e7607e5759baf3a8d2ae0185f --- /dev/null +++ b/ETSUI/eTSArkUIAnimation/READEME_zh.md @@ -0,0 +1,17 @@ +# ArkUI-动画 + +## 简介 + +本示例通过点击按钮触发动画,向用户展示属性动画与显示动画的效果。 + +## 使用说明 + +1.点击屏幕中的圆形图片,播放显示动画展开其它图片,实现整体的旋转与位移变换。再次点击主屏幕中间圆形图片,将其它图片收拢。 + +2.点击展开后的任一图片,播放属性动画,实现图片的自转、缩放与透明度变换。 + +3.点击页面下方加号按钮,将增加图片数量;点击减号按钮,将减少图片数量。图片数量最多增加至8张,最少减少至3张,默认为3张。 + +## 约束与限制 + +本示例仅支持在标准系统上运行。 \ No newline at end of file diff --git a/ETSUI/eTSArkUIAnimation/build.gradle b/ETSUI/eTSArkUIAnimation/build.gradle new file mode 100644 index 0000000000000000000000000000000000000000..1dfdb44173dc8632aabd3cd298611707dbf38159 --- /dev/null +++ b/ETSUI/eTSArkUIAnimation/build.gradle @@ -0,0 +1,34 @@ +// Top-level build file where you can add configuration options common to all sub-projects/modules. +apply plugin: 'com.huawei.ohos.app' + +//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510 +ohos { + compileSdkVersion 7 + supportSystem "standard" +} + +buildscript { + repositories { + maven { + url 'https://repo.huaweicloud.com/repository/maven/' + } + maven { + url 'https://developer.huawei.com/repo/' + } + } + dependencies { + classpath 'com.huawei.ohos:hap:3.0.5.2' + classpath 'com.huawei.ohos:decctest:1.2.7.2' + } +} + +allprojects { + repositories { + maven { + url 'https://repo.huaweicloud.com/repository/maven/' + } + maven { + url 'https://developer.huawei.com/repo/' + } + } +} diff --git a/ETSUI/eTSArkUIAnimation/entry/build.gradle b/ETSUI/eTSArkUIAnimation/entry/build.gradle new file mode 100644 index 0000000000000000000000000000000000000000..cef7b37de8f320938458ca42edde1462669836d2 --- /dev/null +++ b/ETSUI/eTSArkUIAnimation/entry/build.gradle @@ -0,0 +1,21 @@ +apply plugin: 'com.huawei.ohos.hap' +//For instructions on signature configuration, see https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ide_debug_device-0000001053822404#section1112183053510 +ohos { + compileSdkVersion 8 + defaultConfig { + compatibleSdkVersion 7 + } + buildTypes { + release { + proguardOpt { + proguardEnabled false + rulesFiles 'proguard-rules.pro' + } + } + } +} + +dependencies { + implementation fileTree(dir: 'libs', include: ['*.jar', '*.har']) + testImplementation 'junit:junit:4.13.1' +} diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/config.json b/ETSUI/eTSArkUIAnimation/entry/src/main/config.json new file mode 100644 index 0000000000000000000000000000000000000000..68a94e438289b04499cc983c6f70af3f64f5f299 --- /dev/null +++ b/ETSUI/eTSArkUIAnimation/entry/src/main/config.json @@ -0,0 +1,67 @@ +{ + "app": { + "bundleName": "ohos.samples.etsarkuianimation", + "vendor": "samples", + "version": { + "code": 1000000, + "name": "1.0.0" + } + }, + "deviceConfig": {}, + "module": { + "package": "ohos.samples.etsarkuianimation", + "name": ".MyApplication", + "mainAbility": ".MainAbility", + "srcPath": "", + "deviceType": [ + "phone" + ], + "distro": { + "deliveryWithInstall": true, + "moduleName": "entry", + "moduleType": "entry", + "installationFree": false + }, + "abilities": [ + { + "skills": [ + { + "entities": [ + "entity.system.home" + ], + "actions": [ + "action.system.home" + ] + } + ], + "orientation": "unspecified", + "visible": true, + "srcPath": "MainAbility", + "name": ".MainAbility", + "srcLanguage": "ets", + "icon": "$media:icon", + "description": "$string:description_mainability", + "formsEnabled": false, + "label": "$string:entry_MainAbility", + "type": "page", + "launchType": "standard" + } + ], + "js": [ + { + "mode": { + "syntax": "ets", + "type": "pageAbility" + }, + "pages": [ + "pages/index" + ], + "name": ".MainAbility", + "window": { + "designWidth": 720, + "autoDesignWidth": false + } + } + ] + } +} \ No newline at end of file diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/app.ets b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/app.ets new file mode 100644 index 0000000000000000000000000000000000000000..bf28e58b36cf11db491d3f00768ef2c9e41d05cf --- /dev/null +++ b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/app.ets @@ -0,0 +1,23 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export default { + onCreate() { + console.info('Application onCreate') + }, + onDestroy() { + console.info('Application onDestroy') + }, +} \ No newline at end of file diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/common/stackButton.ets b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/common/stackButton.ets new file mode 100644 index 0000000000000000000000000000000000000000..50258870aaec9f48f4d482e21b2d9e6581f7535b --- /dev/null +++ b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/common/stackButton.ets @@ -0,0 +1,173 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Point, AxisModel } from '../model/axisModel.ets' + +const IMAGE_RESOURCE: Resource[] = [ + $r('app.media.money1'), + $r('app.media.money2'), + $r('app.media.money3'), + $r('app.media.money4'), + $r('app.media.money5'), + $r('app.media.money6'), + $r('app.media.money7'), + $r('app.media.money8') +] + +@Observed +class Item { + index: number = 0 + clicked: boolean = false + image: Resource = $r('app.media.money1') + + constructor(index: number, image: Resource, clicked: boolean) { + this.index = index + this.image = image + this.clicked = clicked + } +} + +@Component +struct SmallAnimation { + @Link mainFlag: boolean + private point: Point = new Point(0, 0) + @State item: Item = new Item(0, $r('app.media.money1'), false) + + build() { + Image(this.item.image) + .objectFit(ImageFit.Contain) + .width('20%') + .height('20%') + .translate(this.mainFlag ? { x: this.point.x, y: this.point.y } : { x: 0, y: 0 }) + .rotate({ x: 0, y: 0, z: 1, angle: this.item.clicked ? 360 : 0 }) + .scale(this.item.clicked ? { x: 1.25, y: 1.25 } : { x: 1, y: 1 }) + .opacity(this.item.clicked ? 0.6 : 1) + .onClick(() => { + this.item.clicked = !this.item.clicked + }) + .animation( + { + delay: 10, + duration: 300, + iterations: 1, + curve: Curve.Smooth, + playMode: PlayMode.Normal + } + ) + } +} + +@Component +export struct StackButton { + @State mainFlag: boolean = false + @State imagerArr: Array = [] + @State @Watch('onQuantityChange') quantity: number = 3 + private axis: AxisModel = new AxisModel(125, this.quantity) + + onQuantityChange() { + this.imagerArr = [] + for (let i = 0; i < this.quantity; i++) { + this.imagerArr.push(new Item(i, IMAGE_RESOURCE[i], false)) + } + this.axis = new AxisModel(125, this.quantity) + } + + aboutToAppear() { + this.onQuantityChange() + } + + add() { + if (this.quantity >= 3 && this.quantity < 8) { + this.quantity += 1 + } else if (this.quantity >= 8) { + this.quantity = 8 + } + } + + reduce() { + if (this.quantity > 3 && this.quantity <= 8) { + this.quantity -= 1 + } else if (this.quantity <= 3) { + this.quantity = 3 + } + } + + reset() { + for (let i = 0; i < this.quantity; i++) { + if (this.imagerArr[i].clicked) { + this.imagerArr[i].clicked = false + } + } + } + + animate() { + animateTo( + { + delay: 10, + tempo: 0.68, + iterations: 1, + duration: 500, + curve: Curve.Smooth, + playMode: PlayMode.Normal + }, () => { + this.mainFlag = !this.mainFlag + }) + } + + build() { + Column() { + Stack() { + ForEach(this.imagerArr, (item: Item, index: number) => { + SmallAnimation({ item: item, point: this.axis.points[item.index], mainFlag: $mainFlag }) + }, item => JSON.stringify(item)) + + Image(this.mainFlag ? $r('app.media.image1') : $r('app.media.image2')) + .width('35%') + .height('35%') + .objectFit(ImageFit.Contain) + .scale({ x: this.mainFlag ? 0.75 : 1, y: this.mainFlag ? 0.75 : 1 }) + .onClick(() => { + this.reset() + this.animate() + }) + } + .rotate({ x: 0, y: 0, z: 1, angle: this.mainFlag ? 0 : 360 }) + .width('100%') + .height('80%') + .layoutWeight(1) + .margin({ top: '8%' }) + + Row() { + Image($r('app.media.add')) + .objectFit(ImageFit.Contain) + .width('20%') + .height('95%') + .margin({ top: 5, right: '10%' }) + .onClick(() => { + this.add() + }) + Image($r('app.media.reduce')) + .objectFit(ImageFit.Contain) + .width('20%') + .height('95%') + .margin({ top: 5, left: '10%' }) + .onClick(() => { + this.reduce() + }) + } + .height('10%') + } + } +} \ No newline at end of file diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/model/axisModel.ets b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/model/axisModel.ets new file mode 100644 index 0000000000000000000000000000000000000000..42c0aa67be41a17ccd4d02e49e38310b1d7063d1 --- /dev/null +++ b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/model/axisModel.ets @@ -0,0 +1,48 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export class Point { + public x: number = 0 + public y: number = 0 + + constructor(x: number, y: number) { + this.x = x + this.y = y + } +} + +export class AxisModel { + private radius: number + private num: number + public points: Point[] = [] + + constructor(radius: number, num: number) { + this.radius = radius + this.num = num + this.points = [] + this.Init(this.radius, this.num) + } + + Init(radius, num) { + if (num <= 0) { + return + } + for (let i = 0; i <= num; i++) { + let x = this.radius * Math.cos(2 * Math.PI * i / num) + let y = this.radius * Math.sin(2 * Math.PI * i / num) + this.points.push(new Point(x, y)) + } + } +} \ No newline at end of file diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/pages/index.ets b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/pages/index.ets new file mode 100644 index 0000000000000000000000000000000000000000..1a81689bc2d0330f1ea8466c587a4377e9496cd7 --- /dev/null +++ b/ETSUI/eTSArkUIAnimation/entry/src/main/ets/MainAbility/pages/index.ets @@ -0,0 +1,39 @@ +/* + * Copyright (c) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { StackButton } from '../common/stackButton.ets' + +@Entry +@Component +struct Index { + build() { + Column() { + Row() { + Text($r('app.string.entry_MainAbility')) + .fontSize(20) + .fontColor(Color.White) + .textAlign(TextAlign.Center) + } + .height('6%') + .width('100%') + .padding({ left: 15 }) + .backgroundColor('#0D9FFB') + + StackButton() + } + .width('100%') + .height('100%') + } +} \ No newline at end of file diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/element/string.json b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..70b973b0785ff87f097b578431fdb8193c97560f --- /dev/null +++ b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/element/string.json @@ -0,0 +1,12 @@ +{ + "string": [ + { + "name": "entry_MainAbility", + "value": "Animation" + }, + { + "name": "description_mainability", + "value": "eTS_Empty Ability" + } + ] +} \ No newline at end of file diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/add.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/add.png new file mode 100644 index 0000000000000000000000000000000000000000..01b08d6f20e0c0ba10b9aaf5e7e8ef202dcb102f Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/add.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/icon.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/icon.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/image1.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/image1.png new file mode 100644 index 0000000000000000000000000000000000000000..365ab223c4da6cd599de94fc6ad0717230c0af94 Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/image1.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/image2.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/image2.png new file mode 100644 index 0000000000000000000000000000000000000000..83efc92c1fd7f66347b93c3c784adc10168930c7 Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/image2.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money1.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money1.png new file mode 100644 index 0000000000000000000000000000000000000000..56819da5afbf8b79e10d5a6110aec2da2f6aaf19 Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money1.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money2.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money2.png new file mode 100644 index 0000000000000000000000000000000000000000..71b5c6f244cb643410d225fe03b357e72cfcfb68 Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money2.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money3.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money3.png new file mode 100644 index 0000000000000000000000000000000000000000..70e0df4f29719528026b24f315edfd3cf8d89399 Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money3.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money4.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money4.png new file mode 100644 index 0000000000000000000000000000000000000000..6f47a017d498d76b983a79719c8c45100a23a529 Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money4.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money5.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money5.png new file mode 100644 index 0000000000000000000000000000000000000000..3721211d081ab638ab1bdbae82d12ae89fe9611f Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money5.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money6.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money6.png new file mode 100644 index 0000000000000000000000000000000000000000..8e1bff73eef6265bbc2e4427c490638cfb1636a6 Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money6.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money7.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money7.png new file mode 100644 index 0000000000000000000000000000000000000000..0bf837c1acc7233d18c90fd90ef427769f9cb6f0 Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money7.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money8.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money8.png new file mode 100644 index 0000000000000000000000000000000000000000..a8eb80ddc94a58d4972e98b5ddd4022242776dfa Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/money8.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/reduce.png b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/reduce.png new file mode 100644 index 0000000000000000000000000000000000000000..cdc77b71bf6748920a8b38cec8e751d8fdb69def Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/base/media/reduce.png differ diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/en/element/string.json b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/en/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..70b973b0785ff87f097b578431fdb8193c97560f --- /dev/null +++ b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/en/element/string.json @@ -0,0 +1,12 @@ +{ + "string": [ + { + "name": "entry_MainAbility", + "value": "Animation" + }, + { + "name": "description_mainability", + "value": "eTS_Empty Ability" + } + ] +} \ No newline at end of file diff --git a/ETSUI/eTSArkUIAnimation/entry/src/main/resources/zh/element/string.json b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/zh/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..e25b2adff8fa2b599e95cd95103e918a0a81af78 --- /dev/null +++ b/ETSUI/eTSArkUIAnimation/entry/src/main/resources/zh/element/string.json @@ -0,0 +1,12 @@ +{ + "string": [ + { + "name": "entry_MainAbility", + "value": "动画" + }, + { + "name": "description_mainability", + "value": "eTS_Empty Ability" + } + ] +} \ No newline at end of file diff --git a/ETSUI/eTSArkUIAnimation/screenhots/devices/main.png b/ETSUI/eTSArkUIAnimation/screenhots/devices/main.png new file mode 100644 index 0000000000000000000000000000000000000000..21c21fa67c8cd556499942450ec334b26646f1fe Binary files /dev/null and b/ETSUI/eTSArkUIAnimation/screenhots/devices/main.png differ diff --git a/ETSUI/eTSArkUIAnimation/settings.gradle b/ETSUI/eTSArkUIAnimation/settings.gradle new file mode 100644 index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07 --- /dev/null +++ b/ETSUI/eTSArkUIAnimation/settings.gradle @@ -0,0 +1 @@ +include ':entry'