Skip to content

D
Docs

OpenHarmony / Docs
10 个月 前同步成功

通知 158
Star 292
Fork 28
D
Docs

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 a94f8741 编写于 作者: L luoying_ace_admin
浏览文件
操作

revise doc 

Signed-off-by: Nluoying_ace_admin <luoying19@huawei.com>
上级 f3c000da
隐藏空白更改
内联 并排
Showing with 117 addition and 118 deletion
zh-cn/application-dev/ui/js-framework-syntax-css.md
浏览文件 @ a94f8741
......@@ -100,7 +100,7 @@ div {
color: #007dff;
}
/* 对class="container"的组件下的直接后代text设置样式 */
.container &gt; text {
.container > text {
color: #fa2a2d;
}
```
......
zh-cn/application-dev/ui/ui-js-animate-attribute-style.md
浏览文件 @ a94f8741
......@@ -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);
......
zh-cn/application-dev/ui/ui-js-animate-component.md
浏览文件 @ a94f8741
......@@ -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
<!-- xxx.hml -->
<div class="container">
<div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
</div>
<div class="row">
<button type="capsule" value="play" onclick="playAnimation"></button>
<button type="capsule" value="pause" onclick="pauseAnimation"></button>
</div>
<div class="row1">
<button type="capsule" value="reverse" onclick="reverseAnimation"></button>
<button type="capsule" value="cancel" onclick="cancelAnimation"></button>
</div>
<div id="content" style="width: 350px;height: 350px;margin-top: 100px;background: linear-gradient(pink, purple);">
</div>
<div class="row">
<button type="capsule" value="play" onclick="playAnimation"></button>
<button type="capsule" value="pause" onclick="pauseAnimation"></button>
</div>
<div class="row1">
<button type="capsule" value="reverse" onclick="reverseAnimation"></button>
<button type="capsule" value="cancel" onclick="cancelAnimation"></button>
</div>
</div>
```
......@@ -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() // 调用播放取消的方法
}
}
```
......
zh-cn/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ a94f8741
......@@ -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;
......
zh-cn/application-dev/ui/ui-js-building-ui-animation.md
浏览文件 @ a94f8741
......@@ -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
<!-- xxx.hml -->
<div class="item-container">
<text class="header">animation-name</text>
<div class="item {{colorParam}}">
<text class="txt">color</text>
</div>
<div class="item {{opacityParam}}">
<text class="txt">opacity</text>
</div>
<input class="button" type="button" name="" value="show" onclick="showAnimation"/>
<div class="item {{colorParam}}">
<text class="txt">color</text>
</div>
<div class="item {{opacityParam}}">
<text class="txt">opacity</text>
</div>
<input class="button" type="button" name="" value="show" onclick="showAnimation"/>
</div>
```
```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';
},
}
}
```
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或