不管什么版本的flash都不能使用手绘板 flash

特别声明:以上文章内容仅代表作者本人观点,不代表新浪看点观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与新浪看点联系。

}

素材描述:红动网提供办公学习精美素材免费下载,您当前访问素材主题是手绘粉色以色列地图上的首都耶路撒冷,编号是1567595,文件格式EPS,您下载的是一个压缩包文件,请解压后再使用看图软件打开,图片像素是602*983像素,素材大小 是。

(仅供参考学习使用,商业使用需要作者授权)

}

简介:无论动画以何种技术载体呈现,无论是传统的手绘动画,还是电脑生成的3D动画,也无论是用Flash还是CSS, 动画的基本原理和设计准则都未曾变过的。 在这篇文章中,我们会先解释CSS动画的基本概念,并且介绍使用CSS创建动画的要点。我们以一个例子贯穿始终,利用传统动画的准则来逐步构建这个动画。

(译者注:本文章中的示例页面需要翻墙,并推荐使用最新的FF,Chrome等查看)

Firefox和Webkit系列的浏览器都已经支持CSS 动画,是时候动手学习这个新的技术了。 不管动画以何种技术载体呈现,无论是传统的手绘动画,还是电脑生成的3D动画,也无论是使用Flash技术还是CSS3, 制作动画的基本原理和设计准则都未曾改变。 在这篇文章中,我们会先解释CSS动画的基本概念,并且介绍使用CSS创建动画的要点。我们将以一个网球下落的例子贯穿始终,利用传统动画的准则来逐步构建这个CSS动画。最后我们会看一些真实世界里的CSS动画用法。 

所支持。不支持这些属性的浏览器则会直接忽略它们,所以使用它们时最好确定你的页面不会完全依赖这些动画属性(译者:或者你可以使用一些代码来检查用户的浏览器是否支持css动画特性 和Chrome)在本文的示例代码中为简洁起见,我们只使用-webkit- 前缀。CSS动画的声明就是将一段描述动画的样式附加到目标元素上,

/* 这是一段动画代码*/ 
 
/* 这是动画即将应用的目标元素 */ 
} 
这段代码中,第一部分是描述动画的样式,名字叫“example",它可以出现在样式表中的任何位置,或前或后。在描述元素的类中可以使用animation-name 属性来指定要使用哪个动画效果。

跟其他的样式写法类似的,上面例子中的几个动画属性都可以简写成如下格式: 

甚至你也可以把所有的值都省略掉,这时浏览器会直接使用默认值。 好了,这些就是基本概念了,应该挺简单的吧?

迪士尼 - 传动动画的鼻祖和大师- 很早就提出了制作动画的12条准则,并出版了著作:The Illusion of life 来阐述这些准则。 这些基本的准则可以应用到所有的动画中去,实际上你不需要是个动画专家也可以学着遵循这些准则。 我们会试着遵循这12条“动画军规”,并使用CSS来实现更逼真可信的动画效果。 


如果物体在运动过程中它本身的形体不发生任何变化,那会显得的非常僵硬。上图演示是一个夸张的弹跳的网球的草图。当网球从高处落下并撞击地面时,你会看到球被压扁了,而后它再次离地弹起时,又被拉长了。 

球被压扁和拉伸的过程能够让人感觉到网球的弹性,想象一下如果是一个又重又硬的保龄球掉落下来,肯定不会有这样的效果, 那肯定要把地板砸出个窟窿。


实现上面草图中网球球落地压扁再拉伸的效果,我们只要应用CSS3中的transform属性就能实现:

上述代码会在动画的不同阶段把页面对象按照纵向(y轴) 拉伸1.2倍再变回原样。这段代码中我们使用了百分比的方式来指定了变形在动画过程中发生具体时间(也叫关键帧)。对于简单的动画,你可以直接使用from和to来指定开始和结束的动画状态。使用百分比,则可以更加精细的控制动画播放的关键过程。 接下来我们可以使用translate 属性来让物体动起来。我们可以把transform和translate合并使用:

} 使用translate属性可以在不改变对象其他属性(例如位置,高度或宽度)的前提下操纵对象的位置,因此该属性常用于CSS动画制作。上述例子代码,指定了球在动画播放中点(50%)处的样子,使它看起来像是正在反弹离开地面。 

注意:要看到我们的例子运行时的效果,你需要使用最新的FF,Chrome或Safari, 在本文写作时,Safari提供了最好的动画体验) 好吧,我得承认到目前为止,这个动画还是挺垃圾的。但是我们已经向“逼真”这个目标迈进了第一步!

}

我要回帖

更多关于 手绘板 flash 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信