CSS动画学习指南:原理与实例

2015/09/25 · CSS · 1
评论 ·
动画

本文由 伯乐在线 –
段昕理
翻译,唐尤华
校稿。未经许可,禁止转载!
英文出处:Tom
Waterhouse澳门凯旋门游戏网址,。应接参预翻译组。

翻译注:那篇文章相比较古老了,大约成文于2013年。放在当今大幅变化的web前端世界中犹如有一点过时。不过究其所写的内容-CSS动画的法规,则万变不离其宗,掌握动画的基本原理极度主要,里面涉及的12条基础动画原则,对创立高素质的卡通效果有所极好的指点意义。当时帮助CSS动画属性的浏览器相当的少,这段时间差相当少全部主流浏览器基本都帮助了(别跟自身提IE哦)。小说中的代码示例和我们后天写的CSS3动画基本是同一,放在未来的浏览器跑也并未有包容性难题。

现近些日子 Firefox 和
基于Webkit引擎的浏览器都帮忙CSS动画了,择日比不上撞日,何不尝试一下。抛去技艺形态,不管是价值观木偶剧、Computer3D动画、Flash或CSS,遵从的动画原理都以相通的。

咱俩就要篇章中初露精通CSS动画,并依照带领标准创设CSS动画。然后将经超过实际例,使用古板木偶剧原理创制CSS动画。最终,呈现一些忠实世界里的用例。

澳门凯旋门游戏网址 1

CSS 动画属性

在深切在此以前,大家先写点基础的CSS:

Animation
是CSS的新属性,允许大家没有要求借助Javascript或Flash就可认为HTML成分(如:div、h1
和 span)创立动画。今后支持这么些天性的浏览器有 包罗Webkit
引擎的浏览器,如:Safari 4+、Safari for iOS (iOS 2+)、Chrome 1+和Firefox
5。
不辅助该属性的浏览器则会忽略动画代码,此时要保管您的页面不完全注重那天性情。

是因为那一个手艺绝对来讲较新,供给丰裕浏览器商家的前缀。到近来结束,每种浏览器的语法则则没什么差异,只是用前缀区分。下边的代码例子中,大家用的是
-webkit 前缀语法。

要为成分增多动画,你只须求将CSS 动画关联到该因素就能够了:

CSS

/* This is the animation code. */ @-webkit-keyframes example { from {
transform: scale(2.0); } to { transform: scale(1.0); } } /* This is the
element that we apply the animation to. */ div {
-webkit-animation-name: example; -webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease; /* ease is the default */
-webkit-animation-delay: 1s; /* 0 is the default */
-webkit-animation-iteration-count: 2; /*澳门凯旋门注册网址, 1 is the default */
-webkit-animation-direction: alternate; /* normal is the default */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* This is the animation code. */
@-webkit-keyframes example {
   from { transform: scale(2.0); }
   to   { transform: scale(1.0); }
}
 
/* This is the element that we apply the animation to. */
div {
   -webkit-animation-name: example;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease; /* ease is the default */
   -webkit-animation-delay: 1s;             /* 0 is the default */
   -webkit-animation-iteration-count: 2;    /* 1 is the default */
   -webkit-animation-direction: alternate;  /* normal is the default */
}

首先,大家创设动画代码。这段代码能够出现在CSS文件中的任何义务,只要成分能找到呼应动画的名字(animation-name)就足以了。

还会有一种更方便的不二等秘书技为要素增加动画:

CSS

div { -webkit-animation: example 1s ease 1s 2 alternate; }

1
2
3
div {
-webkit-animation: example 1s ease 1s 2 alternate;
}

这段代码做了一定简化,并从未把具有属性值都写上。如若某个值未有写,浏览器会回落使用暗许值。

那些是最基础的。上面大家将显得更加的多的代码。

选拔古板木偶剧原理

在笔者眼里,守旧木偶剧的鼻祖迪斯尼,开始的一段时期在著名的书籍《Illusion of
Life》里创设了价值观木偶剧的12条原则。这几个基础标准得以采取到具有品种动画,不过你并无需像动画片专家一致遵从。大家将那12条原则运用到CSS动画实例上,把贰个基础动画转换成特别可相信的视觉幻象。

纵然如此只是蹦蹦跳跳的小球,但您能够见见几个版本中的不一致世界。

其一例子体现了CSS动画性情。下边包车型客车代码中,大家用部分空div成分来展现什么运维;我们都精通那代码远远不够语义化,但重点在于它将页面变得有声有色起来,那在此前的浏览器中是相对做不到的。

扼住和拉伸

澳门凯旋门游戏网址 2

其一弹跳球为压扁和拉伸做了很好的来得。假诺弹球高速下滑并冲击地面,你能够调查到它被挤扁然后在弹回的历程中被拉伸。

在基本常识层面,这一个事例让我们的卡通有了分量和伸缩的觉获得。假诺扔七个保龄球,我们不会希望它有任何拉伸,很大概只是会撞坏地面。

能够因而CSS3的品质 transform 来发出压扁和拉伸的职能。

CSS

@-webkit-keyframes example { 0% { -webkit-transform: scaleY(1.0); } 50%
{ -webkit-transform: scaleY(1.2); } 100% { -webkit-transform:
scaleY(1.0); } }

1
2
3
4
5
@-webkit-keyframes example {
   0% { -webkit-transform: scaleY(1.0); }
   50% { -webkit-transform: scaleY(1.2); }
   100% { -webkit-transform: scaleY(1.0); }
}

这段代码会将物体纵向(y轴,上下)的比重改造为本来比例的1.2倍,然后还原到原始尺寸。

大家还为这么些动画使用了稍稍复杂一点的电火花计时器。对于基础动画只要求初步(from)和了结(to)就能够了。但您也能够透过白分比的措施为每种日子点设置动画,就好像代码所突显的那么。

扼住成效已经完成了。未来我们应用转变(translate)来运动物体。大家可以它将形变放在一同。

CSS

50% { -webkit-transform: translateY(-300px) scaleY(1.2); }

1
2
3
50% {
-webkit-transform: translateY(-300px) scaleY(1.2);
}

改造属性允许大家在不变基础属性(如
位置、宽度、中度)的前提下操作物体,那就使其非常适合CSS动画。这么些专门的转移属性让小球在动画的中间点从本地弹起。

(请留神:要查看这么些动画,你必要最新版的Firefox、Chrome或Safari。作者书写这段文字的时候,Safari浏览器提供了一流视觉感受。)

(译者注:现最近主流的浏览器都曾经能很好的兑现动画效果了)

查阅挤压和拉伸的效果.

没错,小球看起来依旧很糙,但是这么些不大调治是让动画片变得绘身绘色的率先步。

预备

安不忘危在根本动作发生从前增添了悬念或力量感。例如,在您起跳从前腿部的曲折有助于观望者预判你下一步会做什么。在我们的弹球例子中,事前追加叁个简短的阴影表示有东西将在从地点掉下。

翻看预备效果.

我们加多了另贰个 div 成分代表影子,那样大家能够独自的为其设置动画。

要在此处扩展预期,大家要求让小球飞快掉上场景中。通过适配各百分比的日子点来兑现,小球在开头点和第叁个动作之间向来不活动。

CSS

@-webkit-keyframes example { 0% { -webkit-transform: translateY(-300px)
scaleY(1.2); } 35% { -webkit-transform: translateY(-300px) scaleY(1.2);
} /* Same position as 0% */ 65% { -webkit-transform: translateY(0px)
scaleY(1.2); } /* Starts moving after 35% to this position */ 67% {
-webkit-transform: translateY(10px) scaleY(0.8); } 85% {
-webkit-transform: translateY(-100px) scaleY(1.2); } 100% {
-webkit-transform: translateY(0px); } }

1
2
3
4
5
6
7
8
@-webkit-keyframes example {
   0% { -webkit-transform: translateY(-300px) scaleY(1.2); }
   35% { -webkit-transform: translateY(-300px) scaleY(1.2); } /* Same position as 0% */
   65% { -webkit-transform: translateY(0px) scaleY(1.2); }    /* Starts moving after 35% to this position */
   67% { -webkit-transform: translateY(10px) scaleY(0.8); }
   85% { -webkit-transform: translateY(-100px) scaleY(1.2); }
   100% { -webkit-transform: translateY(0px); }
}

在动画的35%的岁月点前,小球在万象中的位置并未发生变化,没有移动。然后在
35% 到 65%,小球忽然冒出在戏台上,剩下的卡通紧接着跟上。

也能够运用动画片延迟(animation-delay)来促成预备:

CSS

div { -webkit-animation-delay: 1s; }

1
2
3
div {
-webkit-animation-delay: 1s;
}

CSS动画学习指南:原理与实例。舞台

澳门凯旋门游戏网址 3

方今施行把舞台增加参预景中,将动画片归入情况中。回想一下迪士尼的影视,假使去掉了离奇的背景会变成什么?那是法力的孤岛。

戏台也是诱惑注意的第一因素。与班子的戏台一样,光线总是照射到最重大的区域。舞台应该进入到视线中。除了弹球,作者为弹球的下落增多了二个粗略的背景。这样看客就驾驭舞台的中心会出现动画,场景也就足以从一片大白雪(深黄区域)中平地而起了。

逐帧 VS 状态到状态

在价值观木偶剧中,能够选拔怎么整合自个儿的卡通。逐帧意味着须求画骑行列的每一帧。状态到状态意味着创设类别的个别关键帧,然后填充中间的区间。填充间隔在被称作渐变(“in-betweening”或“tweening”),那是制作Flash动画的术语。

在CSS动画中,大家常见选拔第三种艺术,状态到状态。就是说,大家将为动作加上关键帧,之后浏览器将会自动在那么些关键帧直接做渐变平滑管理。当然,我们同样也能向逐帧技能学习。浏览器只提供零星的动画效果;一时候,你为直达某种的功效时,必须利用更不方便的点子为两种卡通做拼接。

CSS动画学习指南:原理与实例。惯性和重叠

和物理世界同样!惯性和重叠常用在人物的人身运动中,举个例子人物胳膊的忽悠或头发的下跌。想象一个人顶着大肚腩快捷的转身:他们的躯体先转过来,然后肚腩飞速跟上。

对大家来讲,那代表当球掉落时必要使其符合物理定律。上边的例子中型小型球掉落很不自然,就跟未有遭到重力的影响同样。大家盼望小球掉落,然后反弹。可是得讲完下一规格手艺兑现。

慢进慢出

那是与加快或减速有关。想象多少个超速的汽车必要停下来。如果它瞬间就停下来,明确没人信。我们知晓汽车需求时间来减速,所以要先让汽车脚刹踏板并暂缓甘休。

还应该有二个和重力相关的功力。想象儿童荡秋千。当她们到达最高点时会减速,当重临到最低点时又会加速。最快的快慢现身在弧面包车型客车平底。然后上涨到相反的可行性,如此反复。

澳门凯旋门游戏网址 4

回到我们的例证,调度进和出的速度能够让小球的活动(最后)特别可靠。

CSS动画学习指南:原理与实例。当球撞击地面,碰撞会使起急速弹回。当达到最高点,它会减速。那样看起来小球疑似真正的掉落。

在 CSS 中,大家得以操纵 animation-timing-function 属性:

CSS动画学习指南:原理与实例。CSS

-webkit-animation-timing-function: ease-out;

1
-webkit-animation-timing-function: ease-out;

这么些属性包罗以下这么些值:

  • ease-in 先河时悠悠,然后加速。
  • ease-out 开端时急速,然后减速直到甘休。
  • ease-in-out 起初缓缓,一贯加速到宗旨,然后减速直到停止。
  • linear 一贯维持匀速。

你还足以选取贝塞尔曲线来创建自定义的缓动速度。

查阅慢进慢出职能

弧线

澳门凯旋门游戏网址 5

与听从物理定律类似,弧线服从的大旨原则叫做“上涨的事物必定落下”。弧线在图谋物体运动轨迹时特别有效。

这几个动画用 CSS
来达成多少麻烦一点。大家想让小球上下移动的还要往边上移动。所以,我们让小球从左侧平滑进入的还要保持弹跳动画。与其把持有的动作都放置二个动画片中,不比做八个单身的卡通更简短。在那么些例子里,大家将小球用另一个div 成分包裹,然后单独加多动画。

HTML

XHTML

<div class=”ball-arc”> <div class=”ball”></div>
</div>

1
2
3
<div class="ball-arc">
<div class="ball"></div>
</div>

CSS

JavaScript

CSS动画学习指南:原理与实例。.ball-arc { -webkit-animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1);
} /* cubic-bezier here is to adjust the animation-timing speed. This
example makes the ball take longer to slow down. */ /*
那的贝塞尔曲线用作调治动画的进程。 这一个例子使小球的减速时间越来越长了*CSS动画学习指南:原理与实例。/
@-webkit-keyframes ball-x { 0% { -webkit-transform: translateX(-275px);
} 100% { -webkit-transform: translateX(0px); } }

1
2
3
4
5
6
7
8
9
10
11
.ball-arc {
-webkit-animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1);
}
   /* cubic-bezier here is to adjust the animation-timing speed.
   This example makes the ball take longer to slow down. */
   /* 这的贝塞尔曲线用作调整动画的速度。
   这个例子使小球的减速时间更长了*/
@-webkit-keyframes ball-x {
   0% { -webkit-transform: translateX(-275px); }
   100% { -webkit-transform: translateX(0px); }
}

那般,我们通过三个动画片移动小球的侧方向(ball-x),另贰个动画调整小球的弹跳(ball-y)。
那一个方法唯一不佳的地方在于,假设您想做的作业很复杂,最后会让您陷入一群缺乏语义的代码堆砌之中。

翻看弧线效果

协助动画

协助动画是让动画显得尤为真实的神妙之处。协助动画致力于细节。打个假若,如果有三个留着长长的头发的中国人民银行走,主动作是行路,援救动作是头发的摇荡,可能也恐怕是时装的褶子随风变化。

咱们的事例和那几个特别相像。为了充实验小学球的越来越多细节,我们创设小球纹理的扶持动画。那样就招致了小球是被扔进去的错觉。

这一次不再为那几个动画增加另二个div成分,我们抬高二个 img
图像成分充当小球的纹理。

CSS

.ball img { -webkit-animation: spin 2.5s; } @-webkit-keyframes spin { 0%
{ -webkit-transform: rotate(-180deg); } 100% { -webkit-transform:
rotate(360deg); } }

1
2
3
4
5
6
7
8
.ball img {
-webkit-animation: spin 2.5s;
}
 
@-webkit-keyframes spin {
   0% { -webkit-transform: rotate(-180deg); }
   100% { -webkit-transform: rotate(360deg); }
}

查看协助动画

定时

澳门凯旋门游戏网址 6

那条规范只针对动画定期。借使动画的定时期调节制得越好,就越邻近实际世界。

小球的例证完美的阐释了那些意见。例子中的小球很轻,设定这么些速度拾壹分的。借使是三个保龄球,大家会期待它降低的快慢更加快。而只要动画比未来更加慢,则看起来疑似在太空中打网球。选拔适合的时间点会让您的卡通片看起来更真实。

能够很有利地经过 animation-duration
来调治时间长度,也足以透过动画的比重设置独立的时间长度。

夸张

卡通以夸张或疑虑的大意特点著称。一个卡通人物能够变变成任何形状然后在恢复平常。在数不完运用场景中,通过夸大来优良,让动画片富有生机。不然看起来会很平淡。

就算如此,使用夸张效果时需求提心吊胆。迪士尼有一个符合实际条件的措施,但稍事推进了一步。想象三个剧中人物朝墙里跑,它的人体会被压扁的特别夸张,用来重申碰撞的力量。

咱俩应用挤压和拉伸的夸大手法让小球对该地的撞击越发明朗。小编还为动画增多了越来越小巧的摇晃。最终,大家在球的踊跃进程中拉伸小球来优秀速度感。

就像此前增加动画的做法无差别于,大家再加多一个 div
成分,那些因素使小球撞击地面时还要发出摇曳。

CSS

@-webkit-keyframes wobble { 0%, 24%, 54%, 74%, 86%, 96%, 100% {
-webkit-transform: scaleX(1.0); /* Make the ball a normal size at these
points */ } 25%, 55%, 75% { -webkit-transform: scaleX(1.3) scaleY(0.8)
translateY(10px); /* Points hitting the floor: squash effect */ } 30%,
60%, 80% { -webkit-transform: scaleX(0.8) scaleY(1.2); /* Wobble
inwards after hitting the floor */ } 75%, 87% { -webkit-transform:
scaleX(1.2); /* Subtler squash for the last few bounces */ } 97%
-webkit-transform: scaleX(1.1); /* Even subtler squash for last bounce
*/ } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@-webkit-keyframes wobble {
 
0%, 24%, 54%, 74%, 86%, 96%, 100% {
   -webkit-transform: scaleX(1.0);
/* Make the ball a normal size at these points */
}
 
25%, 55%, 75% {
   -webkit-transform: scaleX(1.3) scaleY(0.8) translateY(10px);
/* Points hitting the floor: squash effect */
}
 
30%, 60%, 80% {
   -webkit-transform: scaleX(0.8) scaleY(1.2);
/* Wobble inwards after hitting the floor */
}
 
75%, 87% {
   -webkit-transform: scaleX(1.2);
/* Subtler squash for the last few bounces */
}
 
97% -webkit-transform: scaleX(1.1);
/* Even subtler squash for last bounce */
}
 
}

这段代码看起来比之前复杂了多数。那是大约的试错。在找到确切的效用钱须要频繁品味。

查阅夸张效果

敬业绘图及剧中人物吸重力

可以教你就好像此多了……至少在代码方面。最终这两条动画原则无法透过代码来反映。他们是你现在须要全面包车型客车技巧,让你谈到底能塑造真正摄人心魄的卡通。

当迪士尼开始创建白雪公主的卡通片时,他们的动书法家被派回去重新学习写生和躯体协会。这种对细节的关切在影片中一叶落而知天下秋。那正好说明非凡的动画片需求足履实地的描绘功底和声乐知识。

绝大多数的CSS动画和复杂的数字动画非常的小学一年级样,可是基础标准是同一的。无论是通过正在张开的门突显内容,依旧正在密封并发送一封“联系大家”的封皮,动画都必须是可相信的,无法像机器同样……除非你制作的正是机械动画。

每八个卡通角色都有特别的吸重力。就如迪士尼总给大家来得的,任何事物都得以有性灵:一个保温壶、一棵树、以至是汤勺。但在CSS的社会风气里,供给思索全部动画如何促进设计,使全体的感受更适意。大家不想在此制作大眼怪的动画片。

奔走吧动画!

CSS的卡通天性比非常厉害。和每多少个CSS新天性同样,一初阶轻便被过分使用和错误的运用。以致有些会重蹈Flash复杂动画页面覆辙的惊恐。固然小编有信念Web社区应该不会这么做。

CSS动画能让网址变得有生机。可能大家的小球动画非常不够简洁,但它向我们显示一种采用CSS让页面上其余因素变鲜活的或是。

CSS动画仍是能够让页面上的因素更便于互动,让页面越来越有趣。结合JavaScript,以致能产生创设游戏动画的另一条路。将上面的12条原则应用在你的卡通中,能使您的网址更有信服力、更摄人心魄、越来越有趣,从而推动越来越好的完全部验。

翻译推荐:

若果您和本身一样懒,想制作CSS动画又不想写复杂的CSS3代码,这有七个十二分科学的CSS3开源动画库推荐给你,Animate.css和CSS3
ANIMATION CHEAT
SHEET。其它译者也编制了三个CSS3动画制作库H5Show,让您轻轻易松的始建时下流行的Html5演示动画。当然想制作出高水准的卡通片,掌握作品中的12条动画原则特别主要。

2 赞 6 收藏 1
评论

关于小编:段昕理

澳门凯旋门游戏网址 7

因为iPod而喜欢上苹果的一体系产品,非常料定他们追求极致的旺盛。专业之余,喜欢前端的开源项目,Github(

个人主页 ·
笔者的篇章 ·
15 ·
   

澳门凯旋门游戏网址 8

相关文章