5个月前 (09-08)  互联网 |   抢沙发  15 
文章评分 0 次,平均分 0.0

今天,我们要向您展示如何巧妙使用HTML、CSS动画,测序和SVG过滤器可以给生命带来一个最不可能的(可爱的)是一个web页面上看到的东西——动物。我们将探讨画动物的两种技术:一个普通的HTML和CSS,内联SVG背景图像。

这个演示实验- SVG动画过滤器是高度目前仅可在铬。

涉及的动画也复杂,因此本教程将重点放在不同的技术创建每个这些生物及其所涉及的栩栩如生的动作。由你决定让你的创造力流和自己创造独特而有趣的动画动物。

说了这么多,让我们开始吧!

塑造动物

演示使用两种不同的技术来创建不同的身体部位的形状的动物。狐狸沙哑的使用CSS border - radius属性,使用内联背景SVG图像,形状更复杂。

标记

两个动物使用嵌套的HTML部门组身体部位。分组的概念是非常重要的对于创建栩栩如生的动作——当头部移动,眼睛和耳朵应该移动,固定在头上。

 

<code>&lt;!-- Markup for the fox head --&gt; &lt;div class="fox-head"&gt; &lt;div class="fox-face"&gt; &lt;div class="fox-ears"&gt; &lt;div class="fox-ear"&gt;&lt;/div&gt; &lt;div class="fox-ear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="fox-skull"&gt;&lt;/div&gt; &lt;div class="fox-front"&gt;&lt;/div&gt; &lt;div class="fox-eyes"&gt;&lt;/div&gt; &lt;div class="fox-nose"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Markup for the husky head --&gt; &lt;div class="husky-head"&gt; &lt;div class="husky-ear"&gt;&lt;/div&gt; &lt;div class="husky-ear"&gt;&lt;/div&gt; &lt;div class="husky-face"&gt; &lt;div class="husky-eye"&gt;&lt;/div&gt; &lt;div class="husky-eye"&gt;&lt;/div&gt; &lt;div class="husky-nose"&gt;&lt;/div&gt; &lt;div class="husky-mouth"&gt; &lt;div class="husky-lips"&gt;&lt;/div&gt; &lt;div class="husky-tongue"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</code>

每个部分可以独立活动,将与它的父元素,因此,它创建了一个更现实的效果。您会注意到,尾巴深深嵌套在其他尾巴组件。当每个尾巴部分是定位相对于母公司,然后旋转相同,它创造的幻觉曲线。

制作CSS和SVG动画动物

用CSS塑造

 border-radius用CSS属性主要用于塑造哈士奇。对于许多元素,需要单独控制每个边界半径。例如,下面是哈士奇的后腿的形状:

 

<code>.husky-hind-leg { // ... border-top-left-radius: 35% 100%; border-top-right-radius: 40% 100%; }</code>

第一个数字表明深曲线顶部/底部边缘开始,第二个显示有多深曲线左/右边缘开始。

其他形状,如前腿,无法形成 border-radius孤单,和需要的使用 transform:

 

<code>.husky-front-legs &gt; .husky-leg:before { transform: skewY(-30deg) skewX(10deg); transform-origin: top right; }</code>

一旦形状,每个元素是一个绝对的、基于百分比的位置在母公司。这样可以确保每个部位的准确位置,以及响应能力。

 

制作CSS和SVG动画动物

制作CSS和SVG动画动物

 

塑造与SVG

狐狸,Sass-SVG是用于创建复杂的SVG每个部位的形状。SVG图像可以作为背景图像甚至更好的,他们可以编写内联只要base - 64或utf - 8编码(最大的浏览器支持)。

不过,手工编写它们是困难的。我用Adobe Illustrator创建初始形状:

制作CSS和SVG动画动物

然后我身体的每个部分保存为一个SVG图像。SVG代码转移到通过Sass-SVG SCSS样式表。例如,这是狐狸的鼻子:

 

<code>.fox-nose:before { @include svg((viewBox: (0 0 168 168))) { // the nose @include svg('path', ( fill: $color-nose, d: 'M83.7,86.7c3.3,0,11.6-3.9,11.6-7.1c0-3.2-9.4-3.2-11.6-3.2c-2.2,0-11.6,0-11.6,3.2 C72.1,82.8,80.4,86.7,83.7,86.7z' )); // the line connecting the nose to the mouth @include svg('path', ( stroke: $color-nose, fill: none, d: 'M83.7,102.3V86.7' )); // the mouth @include svg('path', ( stroke: $color-nose, fill: none, d: 'M94.5,104.9c0,0-5.2-2.7-10.8-2.7c-5.6,0-10.8,2.7-10.8,2.7' )); } }</code>

这将产生一个编码,内联SVG字符串内的url()这看起来像这样:

 

<code>.fox-nose:before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg..."); }</code>

因为SVG是一个背景图像,它可以转换和动画,就好像它是一个HTML元素。与Sass-SVG Sass $variables可用于SVG完全控制了吗 fill stroke颜色。

福克斯的响应性与内联SVG直截了当。viewbox属性值((viewBox: (0 0 168 168)))是直接从SVG文件,但只要高度/宽度比保存,包含SVG背景图像的元素可以是任何大小。福克斯的所有部分的头是绝对定位,与相同的高度和宽度 .fox-head.

与SVG Squigglevision过滤器

Squigglevision是一个动画技术模拟手绘动画的摆动的轮廓形状。这使得场景,如狐狸和沙哑,似乎更动态和画,即使动物不动。

SVG具有过滤 <feTurbulence>让“噪音”的应用。的 <feDisplacementMap>过滤器相结合来指定距离的像素应该在每个过滤器。

 

<code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt; &lt;defs&gt; &lt;filter id="squiggly-0"&gt; &lt;feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/&gt; &lt;feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" /&gt; &lt;/filter&gt; &lt;filter id="squiggly-1"&gt; &lt;feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/&gt; &lt;feDisplacementMap in="SourceGraphic" in2="noise" scale="3" /&gt; &lt;/filter&gt; &lt;filter id="squiggly-2"&gt; &lt;feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/&gt; &lt;feDisplacementMap in="SourceGraphic" in2="noise" scale="2" /&gt; &lt;/filter&gt; &lt;filter id="squiggly-3"&gt; &lt;feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/&gt; &lt;feDisplacementMap in="SourceGraphic" in2="noise" scale="3" /&gt; &lt;/filter&gt; &lt;filter id="squiggly-4"&gt; &lt;feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/&gt; &lt;feDisplacementMap in="SourceGraphic" in2="noise" scale="1" /&gt; &lt;/filter&gt; &lt;/defs&gt; &lt;/svg&gt;</code>

每个过滤器都有略微不同的属性。这些过滤器使用CSS可以应用于任何元素 filter: url(...);财产。创建“squigglevision”效应,一个关键帧动画集快速连续过滤一次。

 

<code>@keyframes squigglevision { 0% { -webkit-filter: url('#squiggly-0'); filter: url('#squiggly-0'); } 25% { -webkit-filter: url('#squiggly-1'); filter: url('#squiggly-1'); } 50% { -webkit-filter: url('#squiggly-2'); filter: url('#squiggly-2'); } 75% { -webkit-filter: url('#squiggly-3'); filter: url('#squiggly-3'); } 100% { -webkit-filter: url('#squiggly-4'); filter: url('#squiggly-4'); } }</code>
注意:这些SVG过滤器似乎并不在Firefox目前工作,所以将过滤这样的动画一个渐进增强。

动画的动物

CSS关键帧并没有为我们提供一个方便的测序方式和创作动画。这个问题最好的方法就是计划(故事板)你的动画时间轴,使用预处理器如Sass生成关键帧。

狐狸、转换和绝对时间偏移量(秒)被用来激活身体的每个部分概述了故事板后,当每个动画应该发生。这里有一个例子的狐狸的鼻子是SCSS中概述:

 

<code>$animations: ( // ... 'nose': ( // resting position (4s, 5s, 7s): rotateY(-4deg), // nose down 4.5s: rotateY(-4deg) rotateX(-3deg), // fox looks left (7.5s, 9s): rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg), // fox looks right (9.5s, 12s): rotateY(7deg), // fox looks straight ahead 13s: rotateY(0), ), // ... );</code>

在这里, $animationsSass地图,关键是动画的名字(例如 'nose')。每个动画名称的值是另一个映射的键是抵消或补偿在几秒钟内(例如列表 (7.5s, 9s)),是价值 transform属性为每个抵消的关键。

那么,我们如何把这张地图 @keyframe动画吗?首先,全球 $duration: 17s变量设置——这将是每个动画的总时间。然后,使用嵌套的萨斯 @each ... in ...循环,我们可以生成预期的CSS @keyframe声明为每个动画通过遍历 $animations地图:

 

<code>@each $animation-name, $animation in $animations { // keyframe declaration @keyframes #{$animation-name} { @each $offsets, $transform in $animation { @each $offset in $offsets { // offset declaration block #{percentage($offset / $duration)} { // transform property transform: #{$transform}; } } } } }</code>

这将生成关键帧,看起来像这样:

 

<code>@keyframes nose { 14.70588% { transform: rotateY(-4deg); } 23.52941% { transform: rotateY(-4deg); } 29.41176% { transform: rotateY(-4deg); } 41.17647% { transform: rotateY(-4deg); } 26.47059% { transform: rotateY(-4deg) rotateX(-3deg); } 44.11765% { transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); } 52.94118% { transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); } 55.88235% { transform: rotateY(7deg); } 70.58824% { transform: rotateY(7deg); } 76.47059% { transform: rotateY(0); } }</code>

这些百分比可能非常冗长的计算没有SCSS的使用。他们代表每个所需的时间价值的百分比抵消每个步骤的动画,相对于总 $duration.

动画可以应用到各自的身体部位,如。 animation: nose $duration none infinite;。重要的是每个动画都有相同的时间,这样他们就可以被无缝循环。

栩栩如生的缓和曲线

使动画看起来栩栩如生的另一个重要部分是仔细选择(或创建)缓和曲线为每个动画的一部分。最好的种活泼的缓和曲线用正弦曲线——换句话说,缓和曲线平稳波动。自然运动不来硬启动或停止,所以animation-timing-function应该反映这一点。

福克斯和哈士奇,我使用 cubic-bezier(0.645, 0.045, 0.355, 1)(预览)。这条曲线(见下文)的品质开始稍微迅速但来顺利停止。像往常一样,最好的实验曲线找到一个最适合你的动画。

制作CSS和SVG动画动物

最后一件事:在Chrome中,可以直观地检查你所有的测序动画,以确保它们在正确的时间出现。打开控制台,单击样式选项卡,并单击播放按钮:

制作CSS和SVG动画动物

  
 

除特别注明外,本站所有文章均为日升互动娱乐- 聚合数据平台原创,转载请注明出处来自http://www.rs-sx.com/zhizuocsshesvgdonghuadongwu/

关于

发表评论

表情 格式

暂无评论

切换注册

登录

忘记密码 ?

切换登录

注册

扫一扫二维码分享