suchen
HeimWeb-FrontendHTML-TutorialCSS如何实现弹簧动画效果_html/css_WEB-ITnose

这篇文章的思路以及文章中所涉及到的数学公式都来自于 @Thai Pangsakulyanont 分享的《 Spring Animation in CSS 》一文。

CSS Animation在Web Animation中已不是新技术,不过在制作动画的时候,或许常常纠结 timing-function 如何使用。一般情况之下,都会使用 animation-timing-function/transition-timing-function 自带的几个关键词动画函数。稍为熟悉Web Animation的同学可能会使用 cubic-bezier.com 帮助自己创建一些 timing-function 。往往这一切都只是局限于使用,而不知道其原理究竟是什么。

另外,使用这些基本的 timing-function 几乎是无法模拟出一个真实弹跳(类似弹簧弹性)的动画效果。

其实,事实并不是如此。为什么这么说呢?在制作动画过程中,数学可能帮我们做很多更有意义的事情,比如说借助数学微积分的一些原理就可以让我们制作出更真实的动画效果。就比如说弹簧弹跳动效。那么这篇文章讲的就是这样的内容,如果你感兴趣欢迎继续往下阅读。

首先来看一个动画效果的示例:

上面动画示例来自于 @dtinth 写的 案例 。只不过这里将作者的Stylus换成了Sass。

话说这些数学公式都是来自于 @Thai Pangsakulyanont 分享的《 Spring Animation in CSS 》一文。而且自己离开学校有近二十年,很多知识都还给了老师,如果文章有不对之处,还请大家多多指正。

为什么选择CSS Animation

这是一个亘古不变的话题,其实没有啥好纠结的。对于一位在JavaScript方面啥都不懂的同学而言,他往往追过的是如何将动画效果能通过CSS完成,而且达到近似JavaScript方面的效果(虽然这几乎是不太可能,但往往很多时候是不会相关很远)。那么抛开这些而言,我们从技术角度出发,目前实现Web Animation有很多优秀的库,比如 React-motion Velocity.js GSAP 。但它们都有一个问题: JavaScript访问DOM都是单线程 。而使用CSS Animation没有这一问题存在。

Tweening的基础知识

来看一个简单的动画,比如将一个盒子从 left:100px 推到 left:200px 。

这意味着,随着时间的推移,在 100px 至 200px 之间不要停。

当动画执行时,我希望覆盖的面是减小 100px (从 100% 到 0% ),与此同时,覆盖的而增加到 200px (从 0% 到 100% )。

处理动画到 200px 有一个过程,我们把这个过程简称为 p ,通过 p 使用使用下面的公式,可以计算出每个时间段 left 的值:

$$left: (1-p)(100px)+p(200px)$$

下面这张图解释了它是如何工作的:

来概括一下,如果动画要从 A 过渡到 B ,而运动进展是 p ,那么他的属性值将是:

$$(1-p)A+pB$$

有些同学可能喜欢写成这样:

$$A+p(B-A)$$

把这个称之为 lerp 或者 linear interpolation (线性插值)。

虽然把这个称为线性,但现实世界的动画并不是线性的。例如,你可能希望动画开始是缓慢的,而快要结束时速度是快速的(相当于物体做加速度)。在动画播放中可以使用一个缓动函数(easing function),但这样处理过程和时间就不是线性操作。

而缓动函数主要是用来创建时间和动画发展之间的关系。

缓动函数指定动画效果在执行时的速度,使其看起来更加真实。现实物体照着一定节奏移动,并不是一开始就移动很快的。当我们打开抽屉时,首先会让它加速,然后慢下来。当某个东西往下掉时,首先是越掉越快,撞到地上后回弹,最终才又碰触地板。—— easing function

注: mj.js 官网 对easing function做了很详细的阐述。

物理(Physics)

下面一个弹簧块,假设在它不动的时候位置是 x = 1 :

现在你推了一下弹簧,它的位置为成了 x = 0 :

当你松开手,不推弹簧时,弹簧就会来回的移动,直到弹簧到达平衡位置 x = 1 ,才会停下来不动。

这就像easing function。也就是说它是一个时间函数( timing-function ),这个时间函数是从 0% 开始到 100% 结束。而弹簧是这里面的物体之一。

下面的内容开始复杂起来了,顺间感觉我们不是在说CSS Animation的事情,而是开始在学习物理了,而且下面还会涉及到一些物理方程式(力学、弹簧相关物理方程式)。

首先来看 Spring Force 拉着弹簧块回到平衡位置。这里的 X 是物体的位移的平衡位置:

$$F_{s}=-kX$$

还有就是 damping force 减缓运动的阻力。想像一下,要是没有这个阻力,弹簧来回摆动能停下来?

$$F_{d}=-cv$$

那么这样就可以计算出用在弹簧上的力有多大:

$$F=F_{s}+F_{d}=-kX-cv$$

想必大家都听过牛顿第二定律吧:

$$F=ma$$

为了简单起见,我们假设mass(要是没有记错,这个好像是指物体的密度一样)值为 1 (即 m=1 ),这样就可以得到:

$$F=-kX-cv$$ $$ma=-kX-cv$$ $$a=-kX-cv$$

现次, X 代表物体从其平衡位置开始移动。这就意味着,如果我们想从 x = x 到 x = 1 ,那么我们要每次移动 x-1 才能到达那个指定位置。

$$X=x-1$$

这样可以计算出 left 的值:

$$a=-k(x-1)-cv$$

这就是我们的运动方程式。现在我们完成了从物理方程式中得到了需要的运动方程式。

计算

如果你还记得微积分的一些知识,那么下面的内容对你来说不是难事。接下来使用微积分一些公式来计算出物体运动的位置和时间的关系。

$$x=f(t)$$

根据位置,算出速度:

$$v=\frac{dx}{dt}=f'(t)$$

根据速度,得到加速度:

$$a=\frac{dv}{dt}=f''(t)$$

回忆一下运动的方程式:

$$a=-k(x-1)-cv$$

使用上面的公式来替代 x 、 v 和 a ,现在你看到的公式是这样的:

$$f''(t)=-k(f(t)-1)-cf'(t)$$

这是一个微分方程式。这些对于我来说太复杂了,如果你和我一样不知道如何使用自己所掌握的微积分知识来解决,那么可以使用 Wolfram | Alpha 帮你。

为了能让事情变得简单一些,我们来做一些限制,减少其中的复杂难度。

记住,我们让块移动之前,块的位置假设在 x=0 。也就是说块的初始位置是 x=0 ,初始时间是 t=0 ,这样得到:

$$f(0)=0$$

我们也知道,特体在放手前它是不会移动的,这也意味着,咱们还有这样的一个公式:

$$f'(0)=0$$

不幸的是, Wolfram | Alpha 使用 k 和 c 这样的变量无法解这个方程式,所以我们还需要一些其他的值。

比如 react-motion库中的wobble动画 ,设置了 k=180 , c=12 。这样就可以解方程式:

$$f(0)=0$$ $$f'(0)=0$$ $$f''(t)=-180(f(t)-1)-12f'(t)$$

在 Wolfram | Alpha 中输入:

f(0) = 0; f'(0) = 0; f''(t) = -180(f(t) - 1) - 12f'(t)

你可以看到下图:

Wolfram | Alpha 给我们的答案是:

$$x=-\frac{1}{2}e^{-6t}(-2e^{6t}+sin(12t)+2cos(12t))$$

哪里来的 ½ , 6 , sin() 和 cos() ?我也不知道,这对于我来说太复杂,太难,太不可思议。

但它看上去是合法的(合不合法,我也看不懂,暂当 Wolfram | Alpha 计算不会出错),因为 sin 和 cos 感觉是在做一个摆动运动,就像弹簧一样。把 t=0 到 t=1 按每 0.01 为分隔值,绘制出一张像下面的图:

CSS Animation

我们不能把这么复杂的方程式运用到CSS,但我们可以生成一些近似方程式的。在CSS Animation中可以通过 @keyframes 来指定,但是我们的方程是一个连续函数。

正如上面绘制的图一样,我们把这个运用到CSS的 @keyframes 中,例如,动画持续的时间为 1s ,那么CSS代码看起来像这样:

@keyframes keyframe-name {  0%   { /* css code for t=0.00s */ }  1%   { /* css code for t=0.01s */ }  2%   { /* css code for t=0.02s */ }  3%   { /* css code for t=0.03s */ }         /* ... */  99%  { /* css code for t=0.99s */ }  100% { /* css code for t=1.00s */ }}

这样写起来,你肯定要骂娘了,也切实际。不过可以使用一些CSS预处理器来生成。下在我们使用Sass来做。

@Thai Pangsakulyanont 分享的《 Spring Animation in CSS 》一文使用的是Stylus。由于自己对Stylus不太熟悉,将其换成Sass。

首先要使用Sass把 Wolfram | Alpha 给我们的答案换成一个函数:

@function spring-wobbly($t) {    @return -0.5 * pow(2.71828, (-6 * $t)) * (-2 * pow(2.71828, (6 * $t)) + sin(12 * $t) + 2 * cos(12 * $t))}

由于Sass自身不提供这些数学函数,比如 sin() 和 cos() 之类。如果这些函数都要自己去写是非常的蛋疼,这里给大家推荐一个非常优秀的Sass库 MathSass 。这个库涵盖了常见的函数。详细的使用,可以 阅读其使用规范 。

比如,在上面的函数前引入 math :

@import "node_modules/mathsass/dist/math";

实际项目中把上面的地址换成你自己的项目地址才能有效。

还记得前面使用插值函数覆盖tweeing动画那部分吗,我们也可以写一个函数:

@function lerp($a, $b, $p) {    @return $a + $p * ($b - $a);}

接下来生成 @keyframes :

@keyframes move {    @for $i from 0 through 100 {        #{$i}% {            left: lerp(100px, 200px, spring-wobbly($i / 100));        }    }}

生成的CSS:

接下来只需要引用声明好的动画:

.box {  animation: 1s move linear;  animation-fill-mode: both;}

效果如下:

在动画中其实运用到数学原理还是很多的,比如@bboy90的《 CSS3动画帧数科学计算法 》一文详细介绍了如何通过公式合理的计算 @keyframes 。另外附上@月影 姐姐分享的PPT,里面详细介绍了一些动画控制:

上面PPT里的数学公式和一些DEMO,非常值得我们去思考。另外附上一个视频:

定制

回到文中主要介绍的内容,在实际动画制作中,你完全可以根据自己需要的材质密度和摩擦系数去自定义自己所需的动画效果。

当然你也可以尝试去修改 f'(0) 的值。比如设置一个负值,让盒子从相反的方向反弹回来。

你也可以使用不同的参数,让他运动得更快或更慢。总而言之,你可以根据上面的原理,去制定所需要的一切动画效果。

总结

谁说编程不需要数学,今天不是编程,仅仅只是做一个动画效果,都运用到了物理学和数学中的微积分。所以说,你学的一切都是有用的。

在我看来,不管你懂不懂微积分,或者说物理相关的知识,你只需要知道其中的原理,哪怕你都不懂这些,你也可以借助第三方工具(比如说文中提到的Wolfram Alpha)可以帮助你解决你所欠缺的知识。

总而言之,学到的都是属于你的。如果想让一件事情做得更为完美,那么你的知识都将是其中的基石。

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Die Zukunft von HTML: Evolution und Trends im WebdesignDie Zukunft von HTML: Evolution und Trends im WebdesignApr 17, 2025 am 12:12 AM

Die Zukunft von HTML ist voller unendlicher Möglichkeiten. 1) Neue Funktionen und Standards umfassen mehr semantische Tags und die Beliebtheit von Webcomponenten. 2) Der Webdesign -Trend entwickelt sich weiterhin für reaktionsschnelles und zugängliches Design. 3) Die Leistungsoptimierung verbessert die Benutzererfahrung durch reaktionsschnelle Bildlade- und faulen Ladetechnologien.

HTML vs. CSS vs. JavaScript: Ein vergleichender ÜberblickHTML vs. CSS vs. JavaScript: Ein vergleichender ÜberblickApr 16, 2025 am 12:04 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: HTML ist für die Inhaltsstruktur verantwortlich, CSS ist für den Stil verantwortlich und JavaScript ist für dynamisches Verhalten verantwortlich. 1. HTML definiert die Webseitenstruktur und den Inhalt durch Tags, um die Semantik zu gewährleisten. 2. CSS steuert den Webseitenstil über Selektoren und Attribute, um es schön und einfach zu lesen. 3. JavaScript steuert das Verhalten von Webseiten über Skripte, um dynamische und interaktive Funktionen zu erzielen.

HTML: Ist es eine Programmiersprache oder etwas anderes?HTML: Ist es eine Programmiersprache oder etwas anderes?Apr 15, 2025 am 12:13 AM

HtmlisnotaprogrammingLanguage; itiSamarkuplanguage.1) htmlstructuresandFormatswebcontentuses.2) itWorkswithCSSForstylingandjavaScriptForinteraktivität, EnhancingWebDevelopment.

HTML: Erstellen der Struktur von WebseitenHTML: Erstellen der Struktur von WebseitenApr 14, 2025 am 12:14 AM

HTML ist der Eckpfeiler der Erstellung von Webseitenstruktur. 1. HTML definiert die Inhaltsstruktur und die Semantik und Verwendung usw. Tags. 2. Stellen Sie semantische Marker wie usw. zur Verfügung, um den SEO -Effekt zu verbessern. 3. Um die Benutzerinteraktion durch Tags zu verwirklichen, achten Sie auf die Verifizierung der Form. 4. Verwenden Sie fortschrittliche Elemente wie in Kombination mit JavaScript, um dynamische Effekte zu erzielen. 5. Zu den häufigen Fehlern gehören nicht abgegebene Bezeichnungen und nicht geeignete Attributwerte, und Überprüfungstools sind erforderlich. 6. Optimierungsstrategien umfassen das Reduzieren von HTTP -Anforderungen, die Komprimierung von HTML, die Verwendung semantischer Tags usw.

Von Text zu Websites: Die Kraft von HTMLVon Text zu Websites: Die Kraft von HTMLApr 13, 2025 am 12:07 AM

HTML ist eine Sprache, mit der Webseiten erstellt, die Webseitenstruktur und -inhalt über Tags und Attribute definiert werden. 1) HTML organisiert die Dokumentstruktur über Tags, wie z. B.. 2) Der Browser analysiert HTML, um das DOM zu erstellen und die Webseite zu rendern. 3) Neue Merkmale von HTML5, wie z. B. Multimedia -Funktionen. 4) Zu den häufigen Fehlern gehören nicht abgestimmte Bezeichnungen und nicht geeignete Attributwerte. 5) Die Optimierungsvorschläge umfassen die Verwendung semantischer Tags und die Reduzierung der Dateigröße.

HTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchHTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchApr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

Die Rolle von HTML: Strukturierung von WebinhaltenDie Rolle von HTML: Strukturierung von WebinhaltenApr 11, 2025 am 12:12 AM

Die Rolle von HTML besteht darin, die Struktur und den Inhalt einer Webseite durch Tags und Attribute zu definieren. 1. HTML organisiert Inhalte über Tags wie das Lesen und Verständnis. 2. Verwenden Sie semantische Tags wie usw., um die Zugänglichkeit und SEO zu verbessern. 3. Optimierung des HTML -Codes kann die Ladegeschwindigkeit und die Benutzererfahrung der Webseite verbessern.

HTML und Code: Ein genauerer Blick auf die TerminologieHTML und Code: Ein genauerer Blick auf die TerminologieApr 10, 2025 am 09:28 AM

HtmlisaspecifictypeofcodeFocusedonstructuringuringwebcontent, während "Code" breitincludesluages ​​-ähnlichjavaScriptandpythonforfunctionality.1) htmldefineswebpageStructureStags.2) "Code" cometesaWiNrangeOfLanguagesForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForfirsInsForfunctionNacts

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat -Befehle und wie man sie benutzt
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

SublimeText3 Linux neue Version

SublimeText3 Linux neue Version

SublimeText3 Linux neueste Version

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung