安卓前端开发IDE 安卓端开发是前端还是 安卓前端开发技术
本文是对css的动画应用的简单讨论,这里的重点是复合运动。
我们知道css的动画主要有两种方式过渡(transition)和动画(animation)来实现。
比如我想鼠标移入时,旋转一圈,可以这么做:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
transition: transform 2s linear;
}
div:hover {
transform: rotate(360deg);
}
</style>
复合运动,既旋转又平移呢?这个很好做,transform首先是支持复合变换的:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
transition: transform 2s linear;
}
div:hover {
transform: rotate(360deg) translateX(400px);
}
</style>
但是实现的效果跟我们想象不一样。上面效果走的是螺旋线,这是因为transform变换是有顺序的。上面的写法是先平移,再旋转,因此旋转的中心一直再变。我们可以交换一下顺序:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
transition: transform 2s linear;
}
div:hover {
transform: translateX(400px) rotate(360deg);
}
</style>
之前的效果是旋转和平移的时间都是两秒。我希望平移的时间是1s,那么只用transform应该是做不到的。我们可以使用transition的复合运动:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
position: relative;
left: 0;
transition: transform 2s linear, left 1s linear;
}
div:hover {
transform: rotate(360deg);
left: 400px;
}
</style>
因为旋转的时间是平移的两倍,因此效果是平移完时,旋转才进行了一半。
如果我希望效果是反过来的,即先旋转1s,然后再边平移边旋转,可以使用延迟:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
position: relative;
left: 0;
transition: transform 2s linear, left 1s 1s linear;
}
div:hover {
transform: rotate(360deg);
left: 400px;
}
</style>
此时我又希望情况变成这样,不要之前一秒的旋转了,直接从旋转的一半开始,边旋转边平移。
此时要使用负延迟:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
position: relative;
left: 0;
transition: transform 2s -1s linear, left 1s linear;
}
div:hover {
transform: rotate(360deg);
left: 400px;
}
</style>
transition不是强大的动画,有很多局限性。
第一,不支持无限动画。
第二,触发条件需要属性变化。
而animation比较强大,用“帧”的观点来说,transition只是animation的一帧。
比如说2次旋转:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
animation: rotate 2s linear 2;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
</style>
旋转加平移:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
animation: animate 2s linear infinite;
}
@keyframes animate {
100% {
transform: translateX(400px) rotate(360deg);
}
}
</style>
我希望像过渡一样,移入旋转平移,移出是逆向操作。那么animation能实现反复式旋转吗?
答案是可以的,定义旋转方向为alternate:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
animation: animate 2s linear infinite alternate;
}
@keyframes animate {
100% {
transform: translateX(400px) rotate(360deg);
}
}
</style>
上面的交替效果也可以通过中间帧的方式来实现:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
animation: animate 4s linear infinite;
}
@keyframes animate {
50% {
transform: translateX(400px) rotate(360deg);
}
}
</style>
animation也是有复合效果的,因而可以实现交替动画。
比如,先旋转1s,然后再平移1s,然后再放缩1s:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
animation: rotate 1s linear, translate 1s 1s linear, scale 1s 2s linear;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes translate {
100% {
transform: translateX(400px);
}
}
@keyframes scale {
100% {
transform: scale(1.5);
}
}
</style>
但是效果还是跟我们想象中的不太一样,我们希望平移后直接再那个位置进行放缩。
因此我们要在最后那个动画上做点文章:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
animation: rotate 1s linear, translate 1s 1s linear, scale 1s 2s linear;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes translate {
100% {
transform: translateX(400px);
}
}
@keyframes scale {
0% {
transform: translateX(400px);
}
100% {
transform: translateX(400px) scale(1.5);
}
}
</style>
此效果只用一个动画的关键帧应该也能做到,留作作业。
这里再讨论一个时期,我们希望整个动画停留在最后一帧的最终效果上,那么请使用forwards:
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
animation: rotate 1s linear, translate 1s 1s linear, scale 1s 2s linear forwards;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes translate {
100% {
transform: translateX(400px);
}
}
@keyframes scale {
0% {
transform: translateX(400px);
}
100% {
transform: translateX(400px) scale(1.5);
}
}
</style>
能否运动中,当我hover时,希望暂停:
也可以做到
html 代码
<div>div</div>
<style>
div {
margin: 100px;
width: 100px;
height: 100px;
background: #00ffff;
animation: rotate 1s linear, translate 1s 1s linear, scale 1s 2s linear forwards;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
@keyframes translate {
100% {
transform: translateX(400px);
}
}
@keyframes scale {
0% {
transform: translateX(400px);
}
100% {
transform: translateX(400px) scale(1.5);
}
}
div:hover {
animation-play-state: paused;
}
</style>
本文完。
安卓开发属于前端还是后端 web前端和安卓开发哪个好 安卓与前端开发区别
评论前必须登录!
注册