diff --git a/UI/JsAnimationStyle/README_zh.md b/UI/JsAnimationStyle/README_zh.md new file mode 100644 index 0000000000000000000000000000000000000000..a4bb0ba08ffcb8471e1e0fffdd133fecc2ea4a06 --- /dev/null +++ b/UI/JsAnimationStyle/README_zh.md @@ -0,0 +1,24 @@ +# JS动画与自定义字体 + +### 简介 + +本示例展示了JS中动画样式，渐变样式，转场样式和自定义字体的效果及使用方法。 + +1.动画样式：移动，旋转，缩放，复合动画 + +2.渐变样式：线性渐变，重复性渐变 + +3.转场样式：共享元素样式，自定义页面转场样式，卡片转场样式 + +4.自定义字体样式：引用otf字体文件实现（ttf字体使用同理） + +### 使用说明 + +本示例主界面为四个按钮，分别对应动画样式，渐变样式,转场样式和自定义字体样式。 + +进入各样式页面，点击页面效果按钮，展示对应效果（如“移动”按钮，展示移动动画效果）。 + +### 约束与限制 + +本示例仅支持在轻量系统上运行。 + diff --git a/UI/JsAnimationStyle/build.gradle b/UI/JsAnimationStyle/build.gradle new file mode 100644 index 0000000000000000000000000000000000000000..1f5c317ac2ab17535902bb104e9a07145de7d7d8 --- /dev/null +++ b/UI/JsAnimationStyle/build.gradle @@ -0,0 +1,36 @@ +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#ZH-CN_TOPIC_0000001154985555__section1112183053510 +ohos { + compileSdkVersion 6 + defaultConfig { + compatibleSdkVersion 6 + } +} + +buildscript { + repositories { + maven { + url 'https://repo.huaweicloud.com/repository/maven/' + } + maven { + url 'https://developer.huawei.com/repo/' + } + jcenter() + } + dependencies { + classpath 'com.huawei.ohos:hap:2.4.4.3-RC' + } +} + +allprojects { + repositories { + maven { + url 'https://repo.huaweicloud.com/repository/maven/' + } + maven { + url 'https://developer.huawei.com/repo/' + } + jcenter() + } +} diff --git a/UI/JsAnimationStyle/entry/build.gradle b/UI/JsAnimationStyle/entry/build.gradle new file mode 100644 index 0000000000000000000000000000000000000000..5ec24517d9185b38548572f8e552ecc0ad95eeca --- /dev/null +++ b/UI/JsAnimationStyle/entry/build.gradle @@ -0,0 +1,17 @@ +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#ZH-CN_TOPIC_0000001154985555__section1112183053510 +ohos { + compileSdkVersion 6 + defaultConfig { + compatibleSdkVersion 6 + } + buildTypes { + release { + proguardOpt { + proguardEnabled false + rulesFiles 'proguard-rules.pro' + } + } + } + supportSystem "standard" +} diff --git a/UI/JsAnimationStyle/entry/src/main/config.json b/UI/JsAnimationStyle/entry/src/main/config.json new file mode 100644 index 0000000000000000000000000000000000000000..2bbbb24d7dc12e968506327dfe595670589bedef --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/config.json @@ -0,0 +1,70 @@ +{ + "app": { + "bundleName": "ohos.samples.jsanimationstyle", + "version": { + "code": 1000000, + "name": "1.0" + } + }, + "deviceConfig": {}, + "module": { + "package": "ohos.samples.jsanimationstyle", + "name": ".MyApplication", + "mainAbility": "ohos.samples.jsanimationstyle.MainAbility", + "deviceType": [ + "phone" + ], + "distro": { + "deliveryWithInstall": true, + "moduleName": "entry", + "moduleType": "entry", + "installationFree": false + }, + "abilities": [ + { + "skills": [ + { + "entities": [ + "entity.system.home" + ], + "actions": [ + "action.system.home" + ] + } + ], + "name": "ohos.samples.jsanimationstyle.MainAbility", + "icon": "$media:icon", + "description": "$string:mainability_description", + "label": "$string:app_name", + "type": "page", + "launchType": "standard" + } + ], + "js": [ + { + "pages": [ + "pages/index/index", + "pages/animation/index/index", + "pages/animation/rotate/rotate", + "pages/animation/scale/scale", + "pages/animation/translate/translate", + "pages/animation/compositeanimation/compositeanimation", + "pages/gradient/index", + "pages/customfont/index", + "pages/transitions/index/index", + "pages/transitions/sharedelement/sharedelement", + "pages/transitions/sharedtargetpage/sharedtargetpage", + "pages/transitions/cardtargetpage/cardtargetpage", + "pages/transitions/cardtransition/cardtransition", + "pages/transitions/customtransition/customtransition", + "pages/transitions/customtarget/customtarget" + ], + "name": "default", + "window": { + "designWidth": 720, + "autoDesignWidth": false + } + } + ] + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/app.js b/UI/JsAnimationStyle/entry/src/main/js/default/app.js new file mode 100644 index 0000000000000000000000000000000000000000..8e47afff13e928a74fdcc01a108e4422404b9ac9 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/app.js @@ -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('AceApplication onCreate'); + }, + onDestroy() { + console.info('AceApplication onDestroy'); + } +}; diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Bold.otf b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Bold.otf new file mode 100644 index 0000000000000000000000000000000000000000..acffb8e85b5504457374f69f7573041f855856cf Binary files /dev/null and b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Bold.otf differ diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-ExtraLight.otf b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-ExtraLight.otf new file mode 100644 index 0000000000000000000000000000000000000000..9ba1f58e2f12245dd9da9f31621322ab36aa9bd2 Binary files /dev/null and b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-ExtraLight.otf differ diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Heavy.otf b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Heavy.otf new file mode 100644 index 0000000000000000000000000000000000000000..045062c718f35fb89c01a31d46fdb596a3401c3c Binary files /dev/null and b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Heavy.otf differ diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Light.otf b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Light.otf new file mode 100644 index 0000000000000000000000000000000000000000..ef74e2c69fc0144316d88a13a8dff6ad9f3422cb Binary files /dev/null and b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Light.otf differ diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Medium.otf b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Medium.otf new file mode 100644 index 0000000000000000000000000000000000000000..bdf66834070930678c97c2656217977dcc4b1d4b Binary files /dev/null and b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Medium.otf differ diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Normal.otf b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Normal.otf new file mode 100644 index 0000000000000000000000000000000000000000..3cb93369ffe313d6f90a9a4901ecc19bb0389184 Binary files /dev/null and b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Normal.otf differ diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Regular.otf b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Regular.otf new file mode 100644 index 0000000000000000000000000000000000000000..73fcdaffa1ca0db99f21cce6dbad5838d2725755 Binary files /dev/null and b/UI/JsAnimationStyle/entry/src/main/js/default/common/style/SourceHanSansSC-Regular.otf differ diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/i18n/en-US.json b/UI/JsAnimationStyle/entry/src/main/js/default/i18n/en-US.json new file mode 100644 index 0000000000000000000000000000000000000000..700857cc2cd1186961f8592b01c56d690d4c95d0 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/i18n/en-US.json @@ -0,0 +1,35 @@ +{ + "strings": { + "animationstyle": "Animation style", + "translate": "Translate", + "rotate": "Rotate", + "scale": "Scale", + "compositeAnimation": "CompositeAnimation", + + "gradientstyle": "Gradient style", + "default": "The default gradient direction is from top to bottom", + "angle": "45 degree angle gradient", + "right": "Set the direction to right to gradient from left to right", + "repeat":"Gradient from left to right, repeat the gradient", + + "transitionstyle": "Transition style", + "element": "Shared Element", + "card": "Card transition", + "customtransition": "Custom transition", + "customtarget": "customtarget", + "remove": "MAIN TITLE", + "detail": "this is detail", + "sharedjump": "Jump to shared target page", + "sharedpaget": "This is shared target page", + + "customfontstyle": "Custom font style", + "txt_default": "txt_default", + "txt_bold": "txt_bold", + "txt_extraLight": "txt_extraLight", + "txt_heavy": "txt_Heavy", + "txt_medium": "txt_Medium", + "txt_normal": "txt_Normal", + "txt_regular": "txt_Regular", + "clickback": "click back" + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/i18n/zh-CN.json b/UI/JsAnimationStyle/entry/src/main/js/default/i18n/zh-CN.json new file mode 100644 index 0000000000000000000000000000000000000000..c07ca64f24dc8a719511055f22b6a7acba301d05 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/i18n/zh-CN.json @@ -0,0 +1,35 @@ +{ + "strings": { + "animationstyle": "动画样式", + "translate": "移动", + "rotate": "旋转", + "scale": "缩放", + "compositeAnimation": "复合动画", + + "gradientstyle": "渐变样式", + "default": "默认渐变方向为从上向下渐变", + "angle": "45度夹角渐变" , + "right": "设置方向为to right为从左向右渐变" , + "repeat": "从左向右渐变，重复渐变", + + "transitionstyle": "转场样式", + "element": "共享元素样式", + "card": "卡片转场样式", + "customtransition": "自定义转场样式", + "customtarget": "自定义样式跳转目标页", + "remove": "MAIN TITLE", + "detail": "我是详情页", + "sharedjump": "跳转目标页", + "sharedpaget": "我是目标页", + + "customfontstyle": "自定义字体样式", + "txt_default": "系统默认字体", + "txt_bold": "自定义字体_bold", + "txt_extraLight": "自定义字体_extraLight", + "txt_heavy": "自定义字体_Heavy", + "txt_medium": "自定义字体_Medium", + "txt_normal": "自定义字体_Normal", + "txt_regular": "自定义字体_Regular", + "clickback": "点击返回" + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/compositeanimation/compositeanimation.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/compositeanimation/compositeanimation.css new file mode 100644 index 0000000000000000000000000000000000000000..b9308ce621726f4f0f22b84cea92ccc8414f310a --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/compositeanimation/compositeanimation.css @@ -0,0 +1,45 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; +} + +.composite_style { + font-size: 20px; + text-align: center; + text-color: black; + background-color: #f76160; + width: 100px; + height: 100px; + animation-name:compositeAnimation ; + animation-duration: 4s; + animation-delay: 0s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} +@keyframes compositeAnimation +{ + from { + background-color: #f76160; + transform:translate(100px,100px) rotate(0deg) scale(1.0); + } + to { + background-color: #09ba07; + transform:translate(200px,200px) rotate(180deg) scale(1.5); + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/compositeanimation/compositeanimation.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/compositeanimation/compositeanimation.hml new file mode 100644 index 0000000000000000000000000000000000000000..dd10b0876116d0699a74cf3b7f19af06bd1bc549 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/compositeanimation/compositeanimation.hml @@ -0,0 +1,20 @@ + + +
+ + {{ $t('strings.compositeAnimation') }} + +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/compositeanimation/compositeanimation.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/compositeanimation/compositeanimation.js new file mode 100644 index 0000000000000000000000000000000000000000..699c71d0bd509bec4cc9828057b643d152aa8758 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/compositeanimation/compositeanimation.js @@ -0,0 +1,21 @@ +/* + * 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 { + data: { + }, + onInit() { + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.css new file mode 100644 index 0000000000000000000000000000000000000000..754a5457c805264ba9fc541434e5de990c8f3f48 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.css @@ -0,0 +1,27 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} + +.btn { + width: 60%; + height: 50px; + font-size: 20px; + margin-top: 20px; +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..5764157930e66267d1eb87538d0ff47ad76efdb5 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.hml @@ -0,0 +1,21 @@ + + +
+ + + + +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.js new file mode 100644 index 0000000000000000000000000000000000000000..897007e30876f9b06016d32b782baa047e6598d9 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/index/index.js @@ -0,0 +1,45 @@ +/* + * 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 router from '@system.router' +export default { + data: { + }, + onInit() { + }, + onClickTranslate() { + router.push({ + uri: "pages/animation/translate/translate" + }) + }, + + onClickRotate() { + router.push({ + uri: "pages/animation/rotate/rotate" + }) + }, + + onClickScale() { + router.push({ + uri: "pages/animation/scale/scale" + }) + }, + + onClickComposite() { + router.push({ + uri: "pages/animation/compositeanimation/compositeanimation" + }) + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/rotate/rotate.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/rotate/rotate.css new file mode 100644 index 0000000000000000000000000000000000000000..0fc7efce276a08e0d9761103ab5e93541c762a92 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/rotate/rotate.css @@ -0,0 +1,44 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} + +.rotate_style { + font-size: 20px; + text-align: center; + text-color: black; + background-color: chocolate; + width: 200px; + height: 200px; + animation-name: rotate_animation; + animation-duration: 4s; + animation-delay: 0s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +@keyframes rotate_animation +{ + from { + transform:rotate(0deg); + } + to { + transform:rotate(180deg); + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/rotate/rotate.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/rotate/rotate.hml new file mode 100644 index 0000000000000000000000000000000000000000..e8ab77dd0baac005a5d8d8f1b0f521ae1ca2b165 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/rotate/rotate.hml @@ -0,0 +1,20 @@ + + +
+ + {{ $t('strings.rotate') }} + +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/rotate/rotate.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/rotate/rotate.js new file mode 100644 index 0000000000000000000000000000000000000000..699c71d0bd509bec4cc9828057b643d152aa8758 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/rotate/rotate.js @@ -0,0 +1,21 @@ +/* + * 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 { + data: { + }, + onInit() { + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/scale/scale.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/scale/scale.css new file mode 100644 index 0000000000000000000000000000000000000000..78321739548f8d60579fa2b6e4448110974793c5 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/scale/scale.css @@ -0,0 +1,44 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} + +.scale_style { + font-size: 20px; + text-align: center; + text-color: black; + background-color: chocolate; + width: 100px; + height: 100px; + animation-name: scale_animation; + animation-duration: 4s; + animation-delay: 0s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +@keyframes scale_animation +{ + from { + transform: scale(1.0); + } + to { + transform:scale(2.0); + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/scale/scale.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/scale/scale.hml new file mode 100644 index 0000000000000000000000000000000000000000..ed2f6797e9cce7741e1867a3e2f4f1e39060e50c --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/scale/scale.hml @@ -0,0 +1,20 @@ + + +
+ + {{ $t('strings.scale') }} + +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/scale/scale.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/scale/scale.js new file mode 100644 index 0000000000000000000000000000000000000000..699c71d0bd509bec4cc9828057b643d152aa8758 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/scale/scale.js @@ -0,0 +1,21 @@ +/* + * 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 { + data: { + }, + onInit() { + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/translate/translate.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/translate/translate.css new file mode 100644 index 0000000000000000000000000000000000000000..9de123358e34bf0e703fcfcb0b3b7edeb18b4060 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/translate/translate.css @@ -0,0 +1,45 @@ +/* + * 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. + */ + +.container { + flex-direction: row; + justify-content: center; + align-items: center; +} + +.translate_style { + font-size: 20px; + text-align: center; + text-color: black; + background-color: chocolate; + width: 200px; + height: 200px; + transform-origin: 0px 50%; + animation-name: translate_animation; + animation-duration: 4s; + animation-delay: 0s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +@keyframes translate_animation +{ + from { + transform:translate(0px) ; + } + to { + transform:translate(150px) ; + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/translate/translate.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/translate/translate.hml new file mode 100644 index 0000000000000000000000000000000000000000..9216ca711cc80a2be09f32488fd0e78a6068d1d0 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/translate/translate.hml @@ -0,0 +1,20 @@ + + +
+ + {{ $t('strings.translate') }} + +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/translate/translate.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/translate/translate.js new file mode 100644 index 0000000000000000000000000000000000000000..699c71d0bd509bec4cc9828057b643d152aa8758 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/animation/translate/translate.js @@ -0,0 +1,21 @@ +/* + * 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 { + data: { + }, + onInit() { + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.css new file mode 100644 index 0000000000000000000000000000000000000000..5a4f2548aa82a33113074aabf1f7566dce192220 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.css @@ -0,0 +1,85 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + justify-content: center; + align-items: center; + background-color: aliceblue; +} + +.demo-default{ + font-size: 20px; +} + +.demo-bold { + font-family: font_bold; + margin-top: 10px; + font-size: 20px; +} +@font-face{ + font-family: font_bold; + src: url("/common/style/SourceHanSansSC-Bold.otf"); +} + +.demo-extraLight { + font-family: font_extraLight; + margin-top: 10px; + font-size: 20px; +} +@font-face{ + font-family: font_extraLight; + src: url("/common/style/SourceHanSansSC-ExtraLight.otf"); +} + +.demo-heavy { + font-family: font_heavy; + margin-top: 10px; + font-size: 20px; +} +@font-face{ + font-family: font_heavy; + src: url("/common/style/SourceHanSansSC-Heavy.otf"); +} + +.demo-medium { + font-family: font_medium; + margin-top: 10px; + font-size: 20px; +} +@font-face{ + font-family: font_medium; + src: url("/common/style/SourceHanSansSC-Medium.otf"); +} + +.demo-normal { + font-family: font_normal; + margin-top: 10px; + font-size: 20px; +} +@font-face{ + font-family: font_normal; + src: url("/common/style/SourceHanSansSC-Normal.otf"); +} + +.demo-regular { + font-family: font_regular; + margin-top: 10px; + font-size: 20px; +} +@font-face{ + font-family: font_regular; + src: url("/common/style/SourceHanSansSC-Regular.otf"); +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..6a8aeb19a55e0c23f41b502e134e77a71f097b12 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.hml @@ -0,0 +1,24 @@ + + +
+ {{$t('strings.txt_default')}} + {{$t('strings.txt_bold')}} + {{$t('strings.txt_extraLight')}} + {{$t('strings.txt_heavy')}} + {{$t('strings.txt_medium')}} + {{$t('strings.txt_normal')}} + {{$t('strings.txt_regular')}} +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.js new file mode 100644 index 0000000000000000000000000000000000000000..699c71d0bd509bec4cc9828057b643d152aa8758 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/customfont/index.js @@ -0,0 +1,21 @@ +/* + * 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 { + data: { + }, + onInit() { + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/gradient/index.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/gradient/index.css new file mode 100644 index 0000000000000000000000000000000000000000..0dab878c3514c33789b3b06abfd1b925972a7fb5 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/gradient/index.css @@ -0,0 +1,58 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} + +.style_default{ + height: 20%; + width: 100%; + font-size:10px; + text-color: black; + padding-left: 10px; + background: linear-gradient(rgb(255,0,0),rgb(0, 255, 0)); +} +.style_angle{ + height: 20%; + width: 100%; + font-size:10px; + text-color: black; + padding-left: 10px; + margin-top: 2%; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.style_right{ + height: 20%; + width: 100%; + font-size:10px; + text-color: black; + padding-left: 10px; + margin-top: 2%; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 0, 255) 60%); +} + +.style_repeat{ + height: 20%; + width: 100%; + font-size:10px; + text-color: black; + padding-left: 10px; + margin-top: 2%; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/gradient/index.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/gradient/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..dc580baa33caf3d1f88c9bbef7d058f89b13c0bc --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/gradient/index.hml @@ -0,0 +1,32 @@ + + +
+ + {{ $t('strings.default') }} + + + + {{ $t('strings.angle') }} + + + + {{ $t('strings.right') }} + + + + {{ $t('strings.repeat') }} + +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/gradient/index.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/gradient/index.js new file mode 100644 index 0000000000000000000000000000000000000000..699c71d0bd509bec4cc9828057b643d152aa8758 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/gradient/index.js @@ -0,0 +1,21 @@ +/* + * 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 { + data: { + }, + onInit() { + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e0fe2e9b607abfc41d1f66350d4e882a9260ff5b --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.css @@ -0,0 +1,26 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} +.btn { + width: 60%; + height: 50px; + font-size: 20px; + margin-top: 20px; +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..c5fe110137bd32ac4c75f98df73ff270e40cd138 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.hml @@ -0,0 +1,21 @@ + + +
+ + + + +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.js new file mode 100644 index 0000000000000000000000000000000000000000..cddf8bf120ac77534fd73c7be1d950420b9c7707 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/index/index.js @@ -0,0 +1,46 @@ +/* + * 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 router from '@system.router' +export default { + data: { + }, + onInit() { + }, + + onClickAnimationStyle() { + router.push({ + uri: "pages/animation/index/index" + }) + }, + + onClickGradientStyle() { + router.push({ + uri: "pages/gradient/index" + }) + }, + + onClickTransitionStyle() { + router.push({ + uri: "pages/transitions/index/index" + }) + }, + + onClickCustomFontStyle() { + router.push({ + uri: "pages/customfont/index" + }) + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtargetpage/cardtargetpage.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtargetpage/cardtargetpage.css new file mode 100644 index 0000000000000000000000000000000000000000..d11b181cb56d4b610dca0b223b4f08d2a4c08172 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtargetpage/cardtargetpage.css @@ -0,0 +1,26 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + align-items: center; + background-color: #EBFFD7; +} +.div { + height: 600px; + flex-direction: column; + align-items: center; + justify-content: center; +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtargetpage/cardtargetpage.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtargetpage/cardtargetpage.hml new file mode 100644 index 0000000000000000000000000000000000000000..c4cb433431f266b53aed373c73b575faa779b261 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtargetpage/cardtargetpage.hml @@ -0,0 +1,20 @@ + + +
+
+ {{ $t('strings.detail') }} +
+
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtargetpage/cardtargetpage.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtargetpage/cardtargetpage.js new file mode 100644 index 0000000000000000000000000000000000000000..e28c83fb698961fdd76d8112800dc58404607fcb --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtargetpage/cardtargetpage.js @@ -0,0 +1,26 @@ +/* + * 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 router from '@system.router' +export default { + data: { + }, + onInit() { + }, + + jumpBack() { + router.back(); + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.css new file mode 100644 index 0000000000000000000000000000000000000000..0023bb945de6e0314d98361f4ab7679ea6889683 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.css @@ -0,0 +1,31 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + align-items: center; + background-color: #ABDAFF; +} +.item { + height: 80px; + background-color: #FAFAFA; + margin-top: 2px; +} +.outer { + width: 300px; + height: 100px; + align-items: flex-end; + transition-effect:unfold; +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.hml new file mode 100644 index 0000000000000000000000000000000000000000..8a823e830f45489d9c087b26df4ac91897259f2a --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.hml @@ -0,0 +1,26 @@ + + +
+
+ {{$t('strings.remove')}} +
+ + + {{$item.title}} + + +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.js new file mode 100644 index 0000000000000000000000000000000000000000..092889a93792498e38e42bf9876376aba6b2c74d --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/cardtransition/cardtransition.js @@ -0,0 +1,33 @@ +/* + * 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 router from '@system.router' +export default { + data: { + list: [] + }, + onInit() { + for(var i = 0; i < 15; i++) { + var item = { uri: "pages/transitions/cardtargetpage/cardtargetpage", + title: "this is title" + i, id: "item_" + i } + this.list.push(item); + } + }, + + jumpPage(id, uri) { + var cardId = this.$element(id).ref; + router.push({ uri: uri, params : { ref : cardId } }); + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.css new file mode 100644 index 0000000000000000000000000000000000000000..866fd05af770381aacbab7396b27d6fc00ec6058 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.css @@ -0,0 +1,47 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + justify-content: flex-start; + align-items: center; + background-color: #f8f8ff; + transition-enter: Gocustomtransition; + transition-duration: 1000ms; +} + +.content { + height: 80%; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.btn { + width: 60%; + height: 80px; + font-size: 20px; +} + +@keyframes Gocustomtransition { + from { + transform: translateX(750px); + opacity: 0; + } + to { + transform: translateX(0px); + opacity: 1; + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.hml new file mode 100644 index 0000000000000000000000000000000000000000..1a2e075bbb79013f5d281c27f589a57a1634e0a9 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.hml @@ -0,0 +1,20 @@ + + +
+
+ +
+
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.js new file mode 100644 index 0000000000000000000000000000000000000000..e28c83fb698961fdd76d8112800dc58404607fcb --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtarget/customtarget.js @@ -0,0 +1,26 @@ +/* + * 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 router from '@system.router' +export default { + data: { + }, + onInit() { + }, + + jumpBack() { + router.back(); + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.css new file mode 100644 index 0000000000000000000000000000000000000000..ebd41739bc074365ca2d44ff525afd8094000991 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.css @@ -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. + */ + +.container { + flex-direction: column; + justify-content: center; + align-items: center; + transition-exit: Gocustomtarget; + transition-duration: 1000ms; +} + +.btn { + width: 60%; + height: 80px; + font-size: 20px; +} + +@keyframes Gocustomtarget { + from { + transform: translateX(0px); + opacity: 1; + } + to { + transform: translateX(-750px); + opacity: 0; + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.hml new file mode 100644 index 0000000000000000000000000000000000000000..fb159cef0b260b1d663a8ea37c6d95c850aca539 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.hml @@ -0,0 +1,18 @@ + + +
+ +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.js new file mode 100644 index 0000000000000000000000000000000000000000..a96c9d444821df0873dc9b2df1d28eabfaac610a --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/customtransition/customtransition.js @@ -0,0 +1,28 @@ +/* + * 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 router from '@system.router' +export default { + data: { + }, + onInit() { + }, + + onClickCustomTarget() { + router.push({ + uri: "pages/transitions/customtarget/customtarget" + }) + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.css new file mode 100644 index 0000000000000000000000000000000000000000..754a5457c805264ba9fc541434e5de990c8f3f48 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.css @@ -0,0 +1,27 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} + +.btn { + width: 60%; + height: 50px; + font-size: 20px; + margin-top: 20px; +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..b8f9e8901fe269a95014a3cf132248a00eae853a --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.hml @@ -0,0 +1,20 @@ + + +
+ + + +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.js new file mode 100644 index 0000000000000000000000000000000000000000..e76e6e025186eb1902ef20f28edeb5f0e20770a5 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/index/index.js @@ -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 router from '@system.router' +export default { + data: { + }, + onInit() { + }, + onClickElement(){ + router.push({ + uri: "pages/transitions/sharedelement/sharedelement" + }) + }, + + onClickCard() { + router.push({ + uri: "pages/transitions/cardtransition/cardtransition" + }) + }, + + onClickCustomTransition() { + router.push({ + uri: "pages/transitions/customtransition/customtransition" + }) + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.css new file mode 100644 index 0000000000000000000000000000000000000000..bc8ddd7a5b2958233d24a8f105420dd2363e46fa --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.css @@ -0,0 +1,42 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + justify-content: center; + align-items: center; +} + +.shared-element-txt1-transition-style { + width: 50%; + height: 100px; + font-size: 20px; + background-color: royalblue; + text-color: red; + font-size: 20px; + shared-transition-effect: static; + shared-transition-name: shared-transition; + shared-transition-timing-function: friction; +} +@keyframes shared-transition { + from { + opacity: 0; + transform:translate(20px) ; + } + to { + opacity: 1; + transform:translate(100px) ; + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.hml new file mode 100644 index 0000000000000000000000000000000000000000..1e89d5893ac0f2b5a757f665216c485f34c487f0 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.hml @@ -0,0 +1,18 @@ + + +
+ {{ $t('strings.sharedjump') }} +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.js new file mode 100644 index 0000000000000000000000000000000000000000..ed30db54dad01e055fe2f4460a822cef1e1eb775 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedelement/sharedelement.js @@ -0,0 +1,28 @@ +/* + * 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 router from '@system.router' +export default { + data: { + }, + onInit() { + }, + + jumpSharedTargetPage() { + router.push({ + uri: "pages/transitions/sharedtargetpage/sharedtargetpage", + }); + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.css b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.css new file mode 100644 index 0000000000000000000000000000000000000000..21915f9a3c5fcf1023b157054354a74dbe448c5d --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.css @@ -0,0 +1,41 @@ +/* + * 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. + */ + +.container { + flex-direction: column; + align-items: center; + justify-content: center; +} + +.shared-element-txt2-transition-style { + width: 50%; + height: 100px; + font-size: 20px; + background-color: royalblue; + text-color: red; + shared-transition-effect: static; + shared-transition-name: shared-transition; + shared-transition-timing-function: friction; +} +@keyframes shared-transition { + from { + opacity: 1; + transform:translate(20px) ; + } + to { + opacity: 0; + transform:translate(100px) ; + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.hml b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.hml new file mode 100644 index 0000000000000000000000000000000000000000..11faef5e1c09df35d61ffe5d00060fd7c848d1a3 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.hml @@ -0,0 +1,18 @@ + + +
+ {{ $t('strings.sharedpaget') }} +
\ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.js b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.js new file mode 100644 index 0000000000000000000000000000000000000000..e28c83fb698961fdd76d8112800dc58404607fcb --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/js/default/pages/transitions/sharedtargetpage/sharedtargetpage.js @@ -0,0 +1,26 @@ +/* + * 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 router from '@system.router' +export default { + data: { + }, + onInit() { + }, + + jumpBack() { + router.back(); + } +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/resources/base/element/string.json b/UI/JsAnimationStyle/entry/src/main/resources/base/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..09dc2ad5070bf6b7a4d6d2813f142d4a70a70ab3 --- /dev/null +++ b/UI/JsAnimationStyle/entry/src/main/resources/base/element/string.json @@ -0,0 +1,12 @@ +{ + "string": [ + { + "name": "app_name", + "value": "JsAnimationStyle" + }, + { + "name": "mainability_description", + "value": "JS_Empty Ability" + } + ] +} \ No newline at end of file diff --git a/UI/JsAnimationStyle/entry/src/main/resources/base/media/icon.png b/UI/JsAnimationStyle/entry/src/main/resources/base/media/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c Binary files /dev/null and b/UI/JsAnimationStyle/entry/src/main/resources/base/media/icon.png differ diff --git a/UI/JsAnimationStyle/screenshots/device/animation_style.png b/UI/JsAnimationStyle/screenshots/device/animation_style.png new file mode 100644 index 0000000000000000000000000000000000000000..91531820e631907a1b3608a338fec583ef2ef0e4 Binary files /dev/null and b/UI/JsAnimationStyle/screenshots/device/animation_style.png differ diff --git a/UI/JsAnimationStyle/screenshots/device/custom_font.png b/UI/JsAnimationStyle/screenshots/device/custom_font.png new file mode 100644 index 0000000000000000000000000000000000000000..7888c1bfc850d55ed4356a5455eefe61f77d6063 Binary files /dev/null and b/UI/JsAnimationStyle/screenshots/device/custom_font.png differ diff --git a/UI/JsAnimationStyle/screenshots/device/gradient_style.png b/UI/JsAnimationStyle/screenshots/device/gradient_style.png new file mode 100644 index 0000000000000000000000000000000000000000..24cd790f83871fea703874b63d301d3be0f92b3a Binary files /dev/null and b/UI/JsAnimationStyle/screenshots/device/gradient_style.png differ diff --git a/UI/JsAnimationStyle/screenshots/device/main_page.png b/UI/JsAnimationStyle/screenshots/device/main_page.png new file mode 100644 index 0000000000000000000000000000000000000000..ea84ecddff4a73b625c598089fb445c941f5a66e Binary files /dev/null and b/UI/JsAnimationStyle/screenshots/device/main_page.png differ diff --git a/UI/JsAnimationStyle/screenshots/device/transution_style.png b/UI/JsAnimationStyle/screenshots/device/transution_style.png new file mode 100644 index 0000000000000000000000000000000000000000..9750f3ed0622bc59fee6d94a65ee161b15b3c9d7 Binary files /dev/null and b/UI/JsAnimationStyle/screenshots/device/transution_style.png differ diff --git a/UI/JsAnimationStyle/settings.gradle b/UI/JsAnimationStyle/settings.gradle new file mode 100644 index 0000000000000000000000000000000000000000..4773db73233a570c2d0c01a22e75321acfbf7a07 --- /dev/null +++ b/UI/JsAnimationStyle/settings.gradle @@ -0,0 +1 @@ +include ':entry'