diff --git a/.idea/.gitignore b/.idea/.gitignore deleted file mode 100644 index 26d33521af10bcc7fd8cea344038eaaeb78d0ef5..0000000000000000000000000000000000000000 --- a/.idea/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ -# Default ignored files -/shelf/ -/workspace.xml diff --git a/.idea/gradle.xml b/.idea/gradle.xml deleted file mode 100644 index 5a8b0b22b8a4b41ad6a103c3d433bbbeb6573577..0000000000000000000000000000000000000000 --- a/.idea/gradle.xml +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml deleted file mode 100644 index 8ed5f34df8494ed90108ce6a2ebd4fa2a8296e95..0000000000000000000000000000000000000000 --- a/.idea/misc.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml deleted file mode 100644 index 27b1b30affc66aa92b39febb7a26ee883f8943e0..0000000000000000000000000000000000000000 --- a/.idea/modules.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml deleted file mode 100644 index 35eb1ddfbbc029bcab630581847471d7f238ec53..0000000000000000000000000000000000000000 --- a/.idea/vcs.xml +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/.idea/xts_acts.iml b/.idea/xts_acts.iml deleted file mode 100644 index ca414777d8ab7cc89d22736b155e7f3deeab653c..0000000000000000000000000000000000000000 --- a/.idea/xts_acts.iml +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.css b/ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.css new file mode 100644 index 0000000000000000000000000000000000000000..4f34b584c4d5d3419a285809290365aa02f0e2ab --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.css @@ -0,0 +1,472 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development 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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 30px; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 3px; + padding-top: 3px; + padding-right: 3px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 60px; + height: 30px; + padding-start: 2px; + padding-end: 2px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; +} + + +.style3{ + width: 100%; + height:10%; + padding: 0px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis:50px; + flex-shrink: 1; +} +.style4{ + width: 60%; + height: 6%; + padding: 2px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 150px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.style7 { + height:120px; + margin-top: 10px; + color: green; +} + +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} + +.style8{ + flex-direction: row; + flex-wrap:nowrap; + scrollbar-color: yellow; + scrollbar-width: 10px; + overscroll-effect:spring; + height: 40px; + overflow:scroll; +} + +.style9{ + display: grid; + height: 40px; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 100%; + border-radius: 2px; +} + +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} + +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} + +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} + +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + flex-weight: 1; +} + +.event1{ + width: 60%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 70%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 80%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + width: 100%; + height: 30px; +} + + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +#prop1 { + width: 80%; + height:30px; + background-color: #ad4e2a; + margin: 5px; +} + +.prop2 { + width: 80%; + height:30px; + background-color: #343524; + margin: 5px; +} + +.prop4 { + width: 80%; + height:30px; + background-color: #456345; + margin: 5px; +} + +.prop5 { + width: 80%; + background-color: #831834; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + height:20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + height:20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + height:20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + height:20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.accessibility-container{ + flex-direction: column; +} + +.accessibility1{ + height:20px; + background-color: #321124; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + margin: 5px; +} +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 60%; + height: 20px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 20px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 20px; +} + +.function4{ + flex-direction: row; + width: 60%; + height: 20px; + overflow:scroll; +} +.flex-class{ + margin-top: 5px; + width: 100%; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.hml b/ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..db5c4ad81e546cc4de9e0ae8d4f09b2f5ae58186 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.hml @@ -0,0 +1,301 @@ + + +
+
+
+ + 通用样式 + + + 通用样式1 + + + + + 通用样式2 + + + + + 通用样式3 + + + + + 通用样式4 + + + + + 通用样式5 + +
+ + + + +
+
+ + +
+ + 动画样式 + + + 动画样式1 + + + + + 动画样式2 + + + +
+
+ +
+
+ +
+
+ + 通用属性 + + + 通用属性1 + + + + + 通用属性2 + + + + + 通用属性3 + + + + + 特有属性 + + + +
+
+
+
+ + 通用事件 + + + 通用事件1 + + + + + 通用事件2 + + + + + 通用事件3 + + + + + 特有事件1 + + + + +
+
+
+
+ + 通用方法 + + + 通用方法1 + + + + + 通用方法2 + + + + + 通用方法3 + + + + + 特有方法 + +
+ + + + +
+
+
+ +
+
+ +
+
+ + 渐变样式 + + + 渐变样式1 + + + + + 渐变样式2 + + + + + 渐变样式3 + + + + + 渐变样式4 + + + +
+
+
+
+ + 无障碍 + + + 无障碍1 + + + +
+
+
+
+ + 原子布局 + + + 原子布局1 + +
+ + + + + + + + + + + + +
+ + 原子布局2 + +
+ + + + + + + + + + + + +
+ + 原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+ + 多模输入 + + + 多模输入1 + + + +
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.js b/ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..53f3a2ab4b08b2fb2f66e42ba87108027ca1c66c --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/imageAnimator/router/index.js @@ -0,0 +1,528 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development 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 prompt from '@system.prompt'; +export default { + data: { + images: [ + {src: "/common/images/im-ani1.jpg"}, + {src: "/common/images/im-ani2.jpg"}, + {src: "/common/images/im-ani3.jpg"} + ] + }, + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, +// + start(){ + prompt.showToast({ + message: '动画开始' + }); + }, + pause(){ + + prompt.showToast({ + message: '动画暂停' + }); + }, + stop(){ + prompt.showToast({ + message: '动画停止' + }); + }, + resume(){ + prompt.showToast({ + message: "动画回复" + }); + }, + handleStart() { + console.info("111") + this.$refs.animator.start(); + }, + handlePause() { + this.$refs.animator.pause(); + }, + handleResume() { + this.$refs.animator.resume(); + }, + handleStop() { + this.$refs.animator.stop(); + }, +// + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', + }; + var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, + ]; + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +}