如何提高纯CSS3弹跳球animation
[英]How to improve a pure CSS3 bouncing ball animation
问题描述
As part of a much bigger hybrid app project I need to get the user to select a set of four numbers by tapping on bouncing balls numbered 0 through to 9. I don't want to lumber the app with a Physics engine just for that so I have elected to use a pure CSS3 animation.
作为一个更大的混合应用程序项目的一部分，我需要通过点击编号为 0 到 9 的弹跳球来让用户使用 select 一组四个数字。我不想仅仅为此而使用物理引擎使应用程序变得笨拙。我选择使用纯 CSS3 animation。 My efforts are shown below我的努力如下所示
body,html { margin:0; padding:0; background-color:black; } #stage{position:relative;}.ball { position:absolute; width:7vw; height:7vw; border-radius:50%; display:flex; justify-content:center; align-content:center; align-items:center; margin:0; padding:0; } @keyframes bounce { 0% {transform:translateY(0);} 95% {transform:translateY(86vh);} 100% {transform:translateY(86vh);} } #ballZero { background: #f45342; margin-left:1em; animation:bounce 3s; animation-direction:alternate; animation-timing-function:ease; animation-iteration-count:infinite; } #ballOne { background-color:lime; margin-left:calc(2em + 7vw); animation:bounce 2.7s; animation-direction:alternate; animation-timing-function:ease; animation-iteration-count:infinite; } #ballTwo { background-color:aqua; margin-left:calc(3em + 14vw); animation:bounce 3.2s; animation-direction:alternate; animation-timing-function:ease; animation-iteration-count:infinite; }
<,DOCTYPE html> <html> <head> <meta name='viewport' content='initial-scale=1,maximum-scale=1.user-scalable=no' /> <link rel='stylesheet' href='matter,css'/> <style> body:html{margin;0:padding;0:font-family;arial:} #stage { height;100vh: width;100vw; } </style> </head> <body> <div id='stage'> <div class="ball" id='ballZero'>0</div> <div class='ball' id='ballOne'>1</div> <div class='ball' id='ballTwo'>2</div> </div> </body> </html>
While this works the result is far from smooth and I recognize that CSS animations is far from being my strong suite.虽然这可行，但结果远非顺利，我认识到 CSS 动画远非我的强项。 How can I improve this animation to make the effect look more realistic - bearing in mind that in the real thing I require 10 balls?我该如何改进这个 animation 以使效果看起来更逼真 - 请记住，在真实的东西中我需要 10 个球？ Why do the balls not bounce just as soon as they touch the bottom desipite the 100% {transform:translateY(86vh);} ?尽管有100% {transform:translateY(86vh);} ，为什么球一触到底部就不会反弹？
2 个解决方案
解决方案1
1 已采纳 2021-02-03 21:57:17
If we add slightly different timing functions to the up and the down flight we get a bit more of a bounce effect - certainly on the ground bounce.如果我们在向上和向下飞行中添加稍微不同的计时功能，我们会得到更多的反弹效果——当然是在地面反弹上。
@keyframes bounce
{
0% {transform:translateY(0); animation-timing-function: ease-in;}
60% {transform:translateY(86vh); animation-timing-function: ease-out;}
100% {transform:translateY(0); animation-timing-function: ease-in;}
}
Playing around with cubic-bezier timing functions we'd probably get better results - though seems to be a bit of an experimental field.使用三次贝塞尔计时函数，我们可能会得到更好的结果——尽管这似乎是一个实验领域。 Here's the result of applying the above functions:以下是应用上述函数的结果：
body,html { margin:0; padding:0; background-color:black; } #stage{position:relative;}.ball { position:absolute; width:7vw; height:7vw; border-radius:50%; display:flex; justify-content:center; align-content:center; align-items:center; margin:0; padding:0; } @keyframes bounce { 0% {transform:translateY(0); animation-timing-function: ease-in;} 60% {transform:translateY(86vh); animation-timing-function: ease-out;} 100% {transform:translateY(0); animation-timing-function: ease-in;} } #ballZero { background: #f45342; margin-left:1em; animation:bounce 3s; animation-direction:alternate; animation-timing-function:ease; animation-iteration-count:infinite; } #ballOne { background-color:lime; margin-left:calc(2em + 7vw); animation:bounce 2.7s; animation-direction:alternate; animation-timing-function:ease; animation-iteration-count:infinite; } #ballTwo { background-color:aqua; margin-left:calc(3em + 14vw); animation:bounce 3.2s; animation-direction:alternate; animation-timing-function:ease; animation-iteration-count:infinite; } body,html{margin:0;padding:0;font-family:arial;} #stage { height:100vh; width:100vw; } <div id='stage'> <div class="ball" id='ballZero'>0</div> <div class='ball' id='ballOne'>1</div> <div class='ball' id='ballTwo'>2</div> </div>
解决方案2
0 2021-02-03 11:27:14
body,html { margin:0; padding:0; background-color:black; } #stage{position:relative;}.ball { position:absolute; width:7vw; height:7vw; border-radius:50%; display:flex; justify-content:center; align-content:center; align-items:center; margin:0; padding:0; } @keyframes bounce { 0% {transform:translateY(0);} 100% {transform:translateY(86vh);} } #ballZero { background: #f45342; margin-left:1em; animation:bounce 3s; animation-direction:alternate; animation-timing-function:ease-in; animation-iteration-count:infinite; } #ballOne { background-color:lime; margin-left:calc(2em + 7vw); animation:bounce 2.7s; animation-direction:alternate; animation-timing-function:ease-in; animation-iteration-count:infinite; } #ballTwo { background-color:aqua; margin-left:calc(3em + 14vw); animation:bounce 3.2s; animation-direction:alternate; animation-timing-function:ease-in; animation-iteration-count:infinite; }
<,DOCTYPE html> <html> <head> <meta name='viewport' content='initial-scale=1,maximum-scale=1.user-scalable=no' /> <link rel='stylesheet' href='matter,css'/> <style> body:html{margin;0:padding;0:font-family;arial:} #stage { height;100vh: width;100vw; } </style> </head> <body> <div id='stage'> <div class="ball" id='ballZero'>0</div> <div class='ball' id='ballOne'>1</div> <div class='ball' id='ballTwo'>2</div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.