diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001063148757.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001063148757.gif index 2283e46371317539004c0007886500c1a81dd83a..f59b87e0afc79eafbddef8de2a264cf2f41b97c7 100755 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001063148757.gif and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001063148757.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001071134933.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001071134933.png index 5000709da6dfadee24e10fdbd679b3a28e46578b..d39e5026790f8d85866b0e293f6b53ad455ff1c4 100755 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001071134933.png and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001071134933.png differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001217168141.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001217168141.gif index f470f5261becb6c2d7b30f691a0794db2b1feb93..75abb6f81315b55e677acd8c4d943b2f22d76fff 100644 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001217168141.gif and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001217168141.gif differ diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220635011.gif b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220635011.gif index d669cf40b97891ba3853be28574dceae172fe138..0be34d5b9598c7e03132b08e030fd71d977886b5 100644 Binary files a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220635011.gif and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001220635011.gif differ diff --git a/zh-cn/application-dev/ui/js-framework-syntax-css.md b/zh-cn/application-dev/ui/js-framework-syntax-css.md index a3961ebc73492776031d337f8a6c0be62925a9bb..16d19b5d25d8dd79a44f4398134426c32a6e2fcf 100644 --- a/zh-cn/application-dev/ui/js-framework-syntax-css.md +++ b/zh-cn/application-dev/ui/js-framework-syntax-css.md @@ -100,7 +100,7 @@ div { color: #007dff; } /* 对class="container"的组件下的直接后代text设置样式 */ -.container > text { +.container > text { color: #fa2a2d; } ``` diff --git a/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md b/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md index ed82f95ad103deb99230ef795154d7f268b2bac0..01007ff725f78cf9e78507cf6d1bf2b4b2ddc7c3 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md +++ b/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md @@ -26,8 +26,10 @@ justify-content: center; align-items: center; flex-direction: column; + width: 100%; + height: 100%; } -.fade{ +.fade { width: 30%; height: 200px; left: 35%; @@ -35,13 +37,13 @@ position: absolute; animation: 2s change infinite friction; } -.bigger{ +.bigger { width: 20%; height: 100px; background-color: blue; animation: 2s change1 infinite linear-out-slow-in; } -text{ +text { width: 100%; height: 100%; text-align: center; @@ -61,7 +63,7 @@ text{ } } /* 父组件大小变化 */ -@keyframes change1{ +@keyframes change1 { 0% { width: 20%; height: 100px; @@ -70,11 +72,11 @@ text{ width: 80%; height: 200px; } -} +} /* 子组件文字缩放 */ -@keyframes change2{ - 0%{ - transform: scale(0); +@keyframes change2 { + 0% { + transform: scale(0); } 100% { transform: scale(1.5); diff --git a/zh-cn/application-dev/ui/ui-js-animate-component.md b/zh-cn/application-dev/ui/ui-js-animate-component.md index 859fb01701d252c51c60600f2dd283bd62fbd1b5..4588277ce58dd416ba31db834e2edf841cbdac51 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-component.md +++ b/zh-cn/application-dev/ui/ui-js-animate-component.md @@ -83,6 +83,7 @@ export default { justify-content: center; align-items: center; width: 100%; + height: 100%; } .box{ width: 200px; @@ -103,7 +104,7 @@ export default { onInit() { this.options = { duration: 4000, - }; + } this.keyframes = [ { transform: { @@ -127,11 +128,11 @@ export default { width: 300, height: 300 } - ]; + ] }, Show() { - this.animation = this.$element('content').animate(this.keyframes, this.options); - this.animation.play(); + this.animation = this.$element('content').animate(this.keyframes, this.options) + this.animation.play() } } ``` @@ -225,16 +226,16 @@ animation对象支持动画事件和动画方法。可以通过添加开始和 ```html
-
-
-
- - -
-
- - -
+
+
+
+ + +
+
+ + +
``` @@ -244,6 +245,8 @@ animation对象支持动画事件和动画方法。可以通过添加开始和 flex-direction: column; align-items: center; justify-content: center; + width: 100%; + height: 100%; } button{ width: 200px; @@ -272,75 +275,64 @@ button{ ```js // xxx.js -import prompt from '@system.prompt'; export default { - data: { - animation: '', - }, - onInit() { - }, - onShow() { - var options = { - duration: 1500, - easing:'ease-in', - elay:5, - direction:'normal', - iterations:2 - }; - var frames = [ - { - transform: { - translate: '-150px -0px' - }, - opacity: 0.1, - offset: 0.0, - width: 200, - height: 200, - }, - { - transform: { - translate: '150px 0px' - }, - opacity: 1.0, - offset: 1.0, - width: 300, - height: 300, - } - ]; - this.animation = this.$element('content').animate(frames, options); - this.animation.onstart = function(){ - prompt.showToast({ - message: "start" - }); - }; //添加开始事件 - this.animation.onrepeat = function(){ - prompt.showToast({ - message: " repeated" - }); - };//添加重播事件 - this.animation.oncancel = function(){ - prompt.showToast({ - message: "canceled" - }); - };//添加取消事件 - this.animation.onfinish = function(){ - prompt.showToast({ - message: "finish" - }); - };//添加完成事件 - }, - playAnimation() { - this.animation.play();//调用播放开始的方法 - }, - pauseAnimation() { - this.animation.pause();//调用播放暂停的方法 - }, - reverseAnimation() { - this.animation.reverse();//调用播放倒放的方法 - }, - cancelAnimation() { - this.animation.cancel();//调用播放取消的方法 - } + data: { + animation: '', + }, + onShow() { + var options = { + duration: 1500, + easing:'ease-in', + delay:5, + direction:'normal', + iterations:2 + }; + var frames = [ + { + transform: { + translate: '-150px -0px' + }, + opacity: 0.1, + offset: 0.0, + width: 200, + height: 200, + }, + { + transform: { + translate: '150px 0px' + }, + opacity: 1.0, + offset: 1.0, + width: 300, + height: 300, + } + ]; + this.animation = this.$element('content').animate(frames, options); + this.animation.onstart = function() { + console.info('animation start') + } // 添加开始事件 + this.animation.onrepeat = function() { + console.info('animation repeated') + } // 添加重播事件 + this.animation.oncancel = function() { + console.info('animation canceled') + } // 添加取消事件 + this.animation.onfinish = function() { + console.info('animation finish') + } // 添加完成事件 + }, + playAnimation() { + this.animation.play() // 调用播放开始的方法 + }, + pauseAnimation() { + this.animation.pause() // 调用播放暂停的方法 + }, + reverseAnimation() { + this.animation.reverse() // 调用播放倒放的方法 + }, + cancelAnimation() { + this.animation.cancel() // 调用播放取消的方法 + } } ``` diff --git a/zh-cn/application-dev/ui/ui-js-animate-transform.md b/zh-cn/application-dev/ui/ui-js-animate-transform.md index c189f6380ba1191a159fcbfeccc562c73383e015..c07c524558072b7206186c1e4a961b42b466c98f 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-transform.md +++ b/zh-cn/application-dev/ui/ui-js-animate-transform.md @@ -202,22 +202,24 @@ display: flex; align-items: center; justify-content: center; + width: 100%; + height: 100%; } -.rect{ +.rect { width: 100px; height: 100px; animation: rotate 3s infinite; margin-left: 100px; } -.rect1{ +.rect1 { background-color: #f76160; } -.rect2{ +.rect2 { background-color: #60f76f; /* 改变原点位置*/ transform-origin: 10% 10px; } -.rect3{ +.rect3 { background-color: #6081f7; /* 改变原点位置*/ transform-origin: right bottom; @@ -231,7 +233,7 @@ } } /* 3d示例样式 */ -.rotate3d{ +.rotate3d { margin-top: 150px; flex-direction: column; background-color:#F1F3F5; @@ -242,27 +244,27 @@ border-radius: 300px; border: 1px solid #ec0808; } -.content{ +.content { padding-top: 150px; display: flex; align-items: center; justify-content: center; } /* react4 react5 翻转形成眼睛 */ -.rect4{ +.rect4 { width: 100px; height: 100px; animation: rotate3d1 17ms infinite; background: linear-gradient(#e6c4ec, #be15d9) } -.rect5{ +.rect5 { width: 100px; height: 100px; animation: rotate3d1 17ms infinite; margin-left: 100px; background: linear-gradient(#e6c4ec, #be15d9) } -.mouse{ +.mouse { margin-top: 150px; width: 200px; height: 100px; @@ -271,7 +273,7 @@ animation: rotate3d2 17ms infinite; } /* 眼睛的动效 */ -@keyframes rotate3d1{ +@keyframes rotate3d1 { 0% { transform:rotate3d(0,0,0,0deg) } @@ -283,7 +285,7 @@ } } /* 嘴的动效 */ -@keyframes rotate3d2{ +@keyframes rotate3d2 { 0% { transform:rotate3d(0,0,0,0deg) } @@ -435,6 +437,8 @@ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY background-color:#F1F3F5; display: flex; justify-content: center; + width: 100%; + height: 100%; } .rect{ width: 100px; diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-animation.md b/zh-cn/application-dev/ui/ui-js-building-ui-animation.md index 03c99a2899ceea6680d97a434e3e0d527a8b7ef5..ca34f39427ebf3f32af73ad860fcc9df61eead6d 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-animation.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-animation.md @@ -27,12 +27,14 @@ ```css /* xxx.css */ .container { + width: 100%; flex-direction: column; align-items: center; } .translate { height: 150px; width: 300px; + margin: 50px; font-size: 50px; background-color: #008000; transform: translate(200px); @@ -40,14 +42,16 @@ .rotate { height: 150px; width: 300px; + margin: 50px; font-size: 50px; background-color: #008000; transform-origin: 200px 100px; - transform: rotateX(45deg); + transform: rotate(45deg); } .scale { height: 150px; width: 300px; + margin: 50px; font-size: 50px; background-color: #008000; transform: scaleX(1.5); @@ -81,28 +85,24 @@ animation样式需要在css文件中先定义keyframe，在keyframe中设置动 ```html
- animation-name -
- color -
-
- opacity -
- +
+ color +
+
+ opacity +
+
``` ```css /* xxx.css */ .item-container { - margin-right: 60px; - margin-left: 60px; + margin: 60px; flex-direction: column; } -.header { - margin-bottom: 20px; -} .item { + width: 80%; background-color: #f76160; } .txt { @@ -112,6 +112,7 @@ animation样式需要在css文件中先定义keyframe，在keyframe中设置动 } .button { width: 200px; + margin: 10px; font-size: 30px; background-color: #09ba07; } @@ -141,7 +142,7 @@ animation样式需要在css文件中先定义keyframe，在keyframe中设置动 } ``` -``` +```js // xxx.js export default { data: { @@ -153,7 +154,7 @@ export default { this.opacityParam = ''; this.colorParam = 'color'; this.opacityParam = 'opacity'; - }, + } } ```