更多
黑客联盟 黑客软件
学生黑客联盟
您现在的位置:学生黑客联盟 > 编程频道 > WEB前端 > 浏览信息
CSS3动画-抛物线
时间:2015-03-20 22:05 来源:www.stuhack.com 作者:学盟网
CSS3动画之抛物线 今天来说下CSS3动画,目标是让一个方块做抛物线运动。主要用到的CSS3属性有animation,transform,@keyframes,transition等。 Animation版-0 我们先建立一个HTML文件,test.html: 因为animation属性可以通过@keyframes 规则创建动画,那么

CSS3动画之抛物线

今天来说下CSS3动画,目标是让一个方块做抛物线运动。主要用到的CSS3属性有animation,transform,@keyframes,transition等。 学生黑客联盟 www.stuhack.com


Animation版-0

我们先建立一个HTML文件,test.html: 学生黑客联盟 www.stuhack.com


 
本文来自学盟网(www.stuhack.com)
 

因为animation属性可以通过@keyframes 规则创建动画,那么如果我们要做抛物线,可以尝试简单定义几个阶段的位置。
编写我们的CSS文件,animation.css:

内容来自学生黑客联盟

.item {
    width:50px;
    height: 50px;
    display: inline-block;
    position: absolute;
    top: 100px;
    background-color: red;
}

div { 
      animation: example 3s linear 1s 1; 
      -webkit-animation: example 3s linear 1s 1;
      -moz-animation: example 3s linear 1s 1;
 }

@-moz-keyframes example { 
     0% { transform: translate3d(0px, 0, 0);        } 
     25% { transform: translate3d(100px, -40px, 0); }
     50% { transform: translate3d(200px, -56px, 0); }
     75% { transform: translate3d(300px, -68px, 0); } 
    100% { transform: translate3d(400px, -80px, 0); } 
}
 @-webkit-keyframes example { 
     0% { transform: translate3d(0px, 0, 0);        } 
     25% { transform: translate3d(100px, -40px, 0); }
     50% { transform: translate3d(200px, -56px, 0); }
     75% { transform: translate3d(300px, -68px, 0); } 
    100% { transform: translate3d(400px, -80px, 0); } 
} 
copyright www.stuhack.com

运行一下,只能用惨不忍睹来形容了。写到这里肯定要被喷了,这简直就是坑爹啊。
首先这种做法并不是抛物线,只是几段线段拼在一起,如果把百分比做的细一点,可以类似于抛物线,但是大大加大了coding的时间,而且只是在模拟抛物线,还不如使用抛物线的公式,通过javascript去计算每个点的坐标。 copyright www.stuhack.com

这一版是纯粹的反面教材。

内容来自学生黑客联盟


Animation版-1

重新分析一下这个问题,抛物线其实是水平方向的匀速运动和垂直方向的匀加速运动。那么我们可以在item外面套一个div,里面那个控制水平方向的运动,速度曲线用linear,外面那个控制垂直方向的运动,速度曲线用ease-in。
test.html:

本文来自学盟网(www.stuhack.com)


 内容来自学生黑客联盟 
 

然后是animation.css:

www.stuhack.com

.item, .item2 {
    width:50px;
    height: 50px;
    display: inline-block;
    position: absolute;
    top: 100px;
    left: 0px;
    background-color: red;
}
.wraper {
    animation: vertical-animation 3s ease-in 1s 1; 
    -webkit-animation: vertical-animation 3s ease-in 1s 1;
    -moz-animation: vertical-animation 3s ease-in 1s 1;
}

.wraper .item {
    animation: hor-animation 3s linear 1s 1; 
    -webkit-animation: hor-animation 3s linear 1s 1;
    -moz-animation: hor-animation 3s linear 1s 1;
}

@-moz-keyframes hor-animation { 
    0% { transform: translateX(0px);     } 
    100% { transform: translateX(400px); } 
}
 @-webkit-keyframes hor-animation { 
    0% { transform: translateX(0px);     } 
    100% { transform: translateX(400px); }
}

@-moz-keyframes vertical-animation { 
    0% { transform: translateY(0px);     } 
    100% { transform: translateY(400px); } 
}
 @-webkit-keyframes vertical-animation { 
    0% { transform: translateY(0px);     } 
    100% { transform: translateY(400px); } 
} 本文来自学盟网(www.stuhack.com) 

ok,运行一下,不错像个抛物线。 本文来自学盟网(www.stuhack.com)


Transition版-1

刚才那种方式,需要多加一个dom元素,那有没有办法不加呢。当然有,可以对postion:absolute使用transition属性,分别控制top和left的变化,top变化时间曲线为ease-in,left变化的时间曲线为linear。
我们加多一个item2来做这件事情:
test.html:

学盟网


 

学生黑客联盟 www.stuhack.com

    <script type=text/javascript src=animation.js></script>

animation.css:

本文来自学盟网(www.stuhack.com)

.item, .item2 {
    width:50px;
    height: 50px;
    display: inline-block;
    position: absolute;
    top: 100px;
    left: 0px;
    background-color: red;
}

.wraper {
    animation: vertical-animation 3s ease-in 1s 1; 
    -webkit-animation: vertical-animation 3s ease-in 1s 1;
    -moz-animation: vertical-animation 3s ease-in 1s 1;
}

.wraper .item {
    animation: hor-animation 3s linear 1s 1; 
    -webkit-animation: hor-animation 3s linear 1s 1;
    -moz-animation: hor-animation 3s linear 1s 1;
}

@-moz-keyframes hor-animation { 
    0% { transform: translateX(0px);     } 
    100% { transform: translateX(400px); } 
}
 @-webkit-keyframes hor-animation { 
    0% { transform: translateX(0px);     } 
    100% { transform: translateX(400px); }
}

@-moz-keyframes vertical-animation { 
    0% { transform: translateY(0px);     } 
    100% { transform: translateY(400px); } 
}
 @-webkit-keyframes vertical-animation { 
    0% { transform: translateY(0px);     } 
    100% { transform: translateY(400px); } 
}

.item2 {
    top: 150px;
    left: 0px;
    transition: top 3s ease-in 1s,
                left 3s linear 1s;
    -webkit-transition: top 3s ease-in 1s,
                        left 3s linear 1s;
    -moz-transition: top 3s ease-in 1s,
                     left 3s linear 1s;
} 
内容来自学生黑客联盟

这里我们需要多加一个javascript文件来控制item2 top和left属性的改变。
animation.js: 内容来自学生黑客联盟

window.onload = function(){
    var item2 = document.querySelector(.item2);

    item2.style.top = 550px;
    item2.style.left = 400px;
} www.stuhack.com 

ok,运行一下,也是一个抛物线运动。 学生黑客联盟 www.stuhack.com


问题来了

首先是item和item2的运动不一致,item总是比item2先运动。
是不是页面载入的问题,那我们稍微改动一下,让他们尽量是同时运动的。
在css中,先让item暂停, copyright www.stuhack.com

.wraper {
    animation: vertical-animation 3s ease-in 1s 1; 
    -webkit-animation: vertical-animation 3s ease-in 1s 1;
    -moz-animation: vertical-animation 3s ease-in 1s 1;
    animation-play-state:paused;
    -webkit-animation-play-state:paused;
}

.wraper .item {
    animation: hor-animation 3s linear 1s 1; 
    -webkit-animation: hor-animation 3s linear 1s 1;
    -moz-animation: hor-animation 3s linear 1s 1;
    animation-play-state:paused;
    -webkit-animation-play-state:paused;
} 内容来自学生黑客联盟 

这里通过添加animation-play-state:paused来让动画一开始是暂停的。
在javascript中控制动画的运行,以及item2的top和left值得改变。

学盟网

window.onload = function(){
    var item2 = document.querySelector(.item2),
        item = document.querySelector(.item),
        warper = document.querySelector(.warper);

    item2.style.top = 550px;
    item2.style.left = 400px;
    item.style.animationPlayState = running;
    item.style.webkitAnimationPlayState = running;
    warper.style.animationPlayState = running;
    warper.style.webkitAnimationPlayState = running;
} 
内容来自学生黑客联盟

好了,再运行一下,还是item先运动。并且感觉item2有点卡顿。 copyright www.stuhack.com

GPU硬件加速

这里终于要说到重点了,我们打开chrome的调试工具,观察一下两种方案的paint耗时。
首先是transition版,也就是item2.
transition
可以看到,其中绿色的那一块,大概是有96ms花在painting上。
然后我们再看看animation版的,也就是item:
animation
哇,花在painting上的时间只有0.68ms。
进一步咋网上搜索了一下,原来是使用translate会触发硬件加速。大大缩短的painting的时间。transition呢没有利用到硬件加速,而且会触发多次repaint,所以会感觉有点卡顿,不够流畅。

内容来自学生黑客联盟


结语

首先,我们分析问题的时候,不应该只是看到事物的表面行为不应该单纯的模拟表面,而应该思考本质。就像做抛物线,不能只是模拟运动轨迹,而更应该理解抛物线运动的实质。
还有,不禁要感叹一句,CSS3还真是博大精深啊。还有感谢腾讯ISUX某大哥的指点。

www.stuhack.com

 




本文标题:CSS3动画-抛物线

本文地址:http://www.stuhack.com/bc/qianduan/032014197.html

免责声明:本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。




百度钱包“落子

一个商户通过审核入驻百度钱包,将获得百度[查看详细]

移动搜索&发

移动搜索在移动端的创新和颠覆也为百度探索[查看详细]

张向宁:移动互联

张向宁回顾了他2002年提出的“互联网十大预[查看详细]

淘宝开卖二维码门

截至4月20日,淘宝已经售出车展的实体门票[查看详细]

百度钱包杀入移动

“百度钱包”将完成的 “搜索用户”与“消[查看详细]