同步操作将从 OpenHarmony/docs 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
组件支持动态的旋转、平移、缩放效果,可在style或css中设置。
string6+ | <percentage> | <length> string6+ | <percentage> | <length> |
变换对象的原点位置,支持px和百分比(相对于动画目标组件),如果仅设置一个值,另一个值为50%,第一个string的可选值为:left | center | right ,第二个string的可选值为:top | center | bottom。 |
||
详见表1。 |
|||
格式:duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name,每个字段不区分先后,但是 duration / delay 按照出现的先后顺序解析。 |
|||
指定@keyframes,详见表2。 |
|||
|
|||
|
|||
|
|||
指定组件状态切换时的过渡效果,可以通过transition属性设置如下四个属性:
|
表 1 transform操作说明
入参为六个值的矩阵,6个值分别代表:scaleX, skewY, skewX, scaleY, translateX, translateY。 |
||
表 2 @keyframes属性说明
定义应用在组件上的变换类型,见表1。 |
|||
string | <percentage> | <length> string | <percentage> | <length> |
背景图位置。单位支持百分比和px,第一个值是水平位置,第二个值是垂直位置。如果仅设置一个值,另一个值为50%。第一个string的可选值为:left | center | right ,第二个string的可选值为:top | center | bottom。
|
对于不支持起始值或终止值缺省的情况,可以通过from和to显示指定起始和结束。可以通过百分比指定动画运行的中间状态6+。示例:
<div class="container">
<div class="rect">
</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
}
.rect{
width: 200px;
height: 200px;
background-color: #f76160;
animation: Go 3s infinite;
}
@keyframes Go
{
from {
background-color: #f76160;
transform:translate(100px) rotate(0deg) scale(1.0);
}
/* 可以通过百分比指定动画运行的中间状态6+ */
50% {
background-color: #f76160;
transform:translate(100px) rotate(60deg) scale(1.3);
}
to {
background-color: #09ba07;
transform:translate(100px) rotate(180deg) scale(2.0);
}
}
<!-- xxx.hml -->
<div class="container">
<div class="simpleAnimation simpleSize" style="animation-play-state: {{playState}}"></div>
<text onclick="toggleState">animation-play-state: {{playState}}</text>
</div>
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.simpleSize {
background-color: blue;
width: 100px;
height: 100px;
}
.simpleAnimation {
animation: simpleFrames 9s;
}
@keyframes simpleFrames {
from { transform: translateX(0px); }
to { transform: translateX(100px); }
}
// xxx.js
export default {
data: {
title: "",
playState: "running"
},
toggleState() {
if (this.playState === "running") {
this.playState = "paused";
} else {
this.playState = "running";
}
}
}
<!-- xxx.hml -->
<div id='img' class="img"></div>
/* xxx.css */
.img {
width: 294px;
height: 233px;
background-image: url('common/heartBeat.jpg');
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 900%;
animation-name: heartBeating;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-iteration-count: -1;
animation-timing-function: steps(8, end);
}
@keyframes heartBeating {
from { background-position: 0% 0%;}
to { background-position: 100% 0%;}
}
<!-- xxx.hml -->
<div class="container">
<div class="content"></div>
</div>
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.content { /* 组件状态1 */
height: 200px;
width: 200px;
background-color: red;
transition: all 5s ease 0s;
}
.content:active { /* 组件状态2 */
height: 400px;
width: 400px;
background-color: blue;
transition: all 5s linear 0s;
}
说明: @keyframes的from/to不支持动态绑定。 steps函数的end和start含义如下图所示。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。