Web动画:CSS Sprite Sheet动画 中文字幕

课程信息
英文名Web Motion: Animate a CSS Sprite Sheet
课程来源Lynda.com
讲师Tom Green
课程ID149119
课程时长0.5小时
下载所需积分50
解压密码课程压缩文件如果需要解压密码,则密码一律为 www.zwsub.com
所属类别Flash Photoshop 视频制作

CSS精灵表为web动画打开了另一扇门,让您可以高效地制作一系列图像 - 从按钮状态到角色姿势

在这个快速课程中,Tom Green向您展示了如何通过在Flash中创建精灵图表,在Fireworks中进行编辑,以及使用Edge Animate将其运动(并放入HTML)中来动画角色的漫步周期

- [配音]我花了一点时间来谈论网络上的大部分内容,只是把东西从这里移到那里。

在本练习中,您将看到我一直在谈论的内容,因为您使用CSS3代码将这个小补丁从屏幕的一侧移到另一侧,然后我们将它移回 再次。

我想从这个开始,因为重要的是要了解浏览器中的东西是如何移动的。

尽管您可以使用Edge Animate或Google Web Designer等工具以可视化的方式将对象放入运动中,但这些工具仍会编写使运动成为可能的CSS3代码。

为了了解这些工具在后台为您做些什么,您必须接触它。

在我们开始之前,一个警告的话。

CSS3标准是如此的新颖,但在那里的浏览器中还没有得到广泛的接受。

它适用于使用HTML5的许多现代浏览器,但如果您的浏览器不符合HTML5,则不会有任何效果。

就这样,让我们看看东西是如何从这里移动到那里的。

为了让自己开始,打开一个代码编辑器。

我在这里使用Coda 2,但任何Coda编辑都会这样做。

当编辑器启动时,导航到练习文件夹中找到的Here to There文件夹中的index.html文件。

当文件打开时,在浏览器中预览它。

正如我所说的计划是将补丁从页面的左侧移动到页面的右侧。

回到我们的编辑器,我需要向下滚动到这里的底部,在这里注意这一行。

正如我前面提到的,CSS3还是比较新的,CSS3代码中的厂商前缀会像花园里的杂草一样弹出。

这个缩小的小脚本使用JavaScript来处理供应商前缀的管理,我向你保证,这将使你的生活更轻松。

正如你所看到的,这个页面上的所有内容都是一个具有补丁类的图像。

你可以使用任何你想要的单词,但是任何要用CSS3移动的东西都需要和一个类相关联。

向上滚动到动画CSS Goes Here下方的第14行,让我们添加一些属性到我们的补丁类。

因此,我们将从.patch,花括号,花括号开始。

我们要添加的第一个属性是我们的动画名称,所以输入animation-name:moveit; 我们要添加的下一个属性是持续时间,换句话说,这个东西会玩多久。

动画,我要在这里选择它,这将是两秒钟。

我已经决定了两秒钟,但随时可以改变它。

这是两个基本的CSS3动画属性。

如果您没有名称属性,浏览器将不知道该怎么做。

如果您不添加持续时间,将会应用默认值零,我们的补丁就会坐在那里。

现在我们有了属性,我们需要确定运动的关键帧。

你需要做的是在补丁的大括号外面单击一下,我们将添加一条规则。

@keyframes moveIt,大括号,大括号,现在我们可以开始识别关键帧。

关键帧规则是魔术发生的地方,因为所有动画都发生在关键帧之间。

要做到这一点,我们进入相当熟悉的领域,因为用于移动对象的关键帧将它们从这里移到那里。

要设置第一个关键帧,从{transform:translateX(0);}输入,这是做什么用CSS转换方法来移动或翻译我们的补丁到页面上的零点。

现在我们已经有了,让我们进入下一行。

按回车键,输入变换,冒号,平移x,600像素,或600像素,关闭括号分号,然后我们去。

现在这条线所做的是将补丁600像素向右移动,这就是翻译x的意思。

将它在x轴上移动600像素。

那么让我们来看看那是什么,预览。

我们在页面上找到了一点小小的补丁。

如果你想添加更复杂的运动,或者在各种关键帧上改变它,这很容易实现,所有你需要做的就是将0和100%的点改为0%和100%,就像这样,从0 %,这是开始,时间轴上的0%到100%,这是600像素,你可以添加50,25,33,46%的值,并在这些点发生的事情。

所以让我们做出这个改变,然后再测试一次。

而且你可以看到,除了让你更容易找到关键帧之外,它并没有太大的改变。

您刚刚创建了一个非常基本的CSS动画,它需要一组定义的关键帧,动画的名称和持续时间。

我们应该在这里说亲,所以我们需要确定动画播放的次数,并加入所有重要的缓慢,缓慢的缓解。

我们首先添加缓动规则,然后在修补程序中,所以在动画持续时间后按Return键,然后输入以下修补程序规则。

动画,定时功能,和缓出,分号。

还有其他两个值可以使用,易于进入和易于进入。

现在让我们测试一下,看看贴片是否轻轻地滑入到位。

它确实如此。

让我们回到代码,而不是让动画玩一次,让我们玩两次。

按回车键进入,并添加动画,迭代计数,我们将有这个播放两次。

现在这是一个方便的属性,因为您可以确定动画播放的频率。

如果你想让它连续循环,我们把第二个字放在无限的单词中。

所以让我们来看看是否有效。

点击预览,一,二。

回到代码。

另一个属性需要添加。

你注意到动画结束时,补丁如何弹回到开始位置,在左边?

当动画结束时,我们保持这个补丁。

这是动画填充模式属性的作用。

按回车键并进入animation-fill-mode:forwards; 如果您测试它,补丁将播放两次,然后保持放在最后一个关键帧。

有四种可能的值可以在这里使用。

没有,后退,前进,或两者兼而有之。

最后,让补丁向右移动,然后将路线逆转回开始位置。

按Return Return键并添加动画方向:alternate现在,这个属性有四个值,normal是一个从左到右的动作,reverse是从右向左移动的alternate,这个属性绑定在duration属性上 首先从左向右移动,然后从右向左移动。

反过来说,与之前的属性完全相反,但它也与持续时间属性相关。

那么让我们来看看这是否有效。

点击预览,在那里,它返回并保持放置。

所以还有其他的

所以你有它,使用CSS3从这里移动的东西到那里。

最后,这个东西是新的,供应商前缀是编写代码时必须要有的。

我使用了Lea Verou提供的一个小的JavaScript,你可以在http://leaverou.github.io/prefixfree上找到它,我强烈建议你拿一个副本。

尽管这是一个非常基本的概述,但您现在应该了解在Animate或其他可视化编辑器中移动内容时发生的情况。

CSS动画还有很多可以做的事情,但是这会让你走。

中文课程网 提供全网最全,中文翻译质量最高的国外课程视频资源(Lynda / Pluralsight)

请先登陆 如果还没有账号,请先注册