电脑PHP动画制作画板,三分钟HTML5画布(Canvas)动画教程
此文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包。
它们都是开源的。
把鼠标放到上面的小丑脸上,然后移开,就会有如下效果。
第一步,画五官
这个小丑没有耳朵和眉毛,所以只剩下三官,但它的两个眼睛我们要分别绘制,所以一共是四个部分。下面先看看代码。
绘制左眼的代码var leftEye = new Kinetic.Line({
x: 150,
points: [0, 200, 50, 190, 100, 200, 50, 210],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
});
绘制右眼的代码var rightEye = new Kinetic.Line({
x: sw - 250,
points: [0, 200, 50, 190, 100, 200, 50, 210],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
});
绘制鼻子的代码var nose = new Kinetic.Line({
points: [240, 280, sw/2, 300, sw-240,280],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
});
绘制嘴巴的代码var mouth = new Kinetic.Line({
points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
tension: 0.5,
closed: true,
stroke: 'red',
strokeWidth: 10
});
简单讲解一下上面的代码。Kinetic就是我们使用的js工具包。在页面的头部,我们需要这样引用它:
其它几个分别是几个关键点,线条弹性,颜色,宽度等。这些都很容易理解。
第二步,让图动起来
这个动画之所以能吸引人,是因为它能响应你的鼠标动作,和用户有互动,这是一个成功的动画最关键的地方。如果你仔细观察,这个小丑五官的变化只是形状的变化,眼睛变大,嘴巴变大,鼻子变大,但特别的是这个变化不是瞬间变化,而是有过渡性的,这里面有一些算法,这就是最让人发愁的地方。幸运的是,这算法技术都非常的成熟,不需要我们来思考,在这些动画引擎库里都把这些技术封装成了非常简单方便的接口。下面我们来看看如何让动起来。
左眼的动画var leftEyeTween = new Kinetic.Tween({
node: leftEye,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut, y: -100,
points: [0, 200, 50, 150, 100, 200, 50, 200]
});
右眼的动画var rightEyeTween = new Kinetic.Tween({
node: rightEye,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut, y: -100,
points: [0, 200, 50, 150, 100, 200, 50, 200]
});
鼻子的动画var noseTween = new Kinetic.Tween({
node: nose,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut, y: -100,
points: [220, 280, sw/2, 200, sw-220,280]
});
嘴巴的动画var mouthTween = new Kinetic.Tween({
node: mouth,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
});
这些代码非常的简单,而且变量名能自释其意。稍微有点经验的程序员想看懂这些代码应该不难。基本每段代码都是让你提供一些点,指定动画动作的衰退模式和持续时间。
完整的动画代码
body { margin: 0px; padding: 0px; }
#container { background-color: black; }
var sw = 578; var sh = 400; var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 400
}); var layer = new Kinetic.Layer({
y: -30
}); var leftEye = new Kinetic.Line({
x: 150,
points: [0, 200, 50, 190, 100, 200, 50, 210],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
}); var rightEye = new Kinetic.Line({
x: sw - 250,
points: [0, 200, 50, 190, 100, 200, 50, 210],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
}); var nose = new Kinetic.Line({
points: [240, 280, sw/2, 300, sw-240,280],
tension: 0.5,
closed: true,
stroke: 'white',
strokeWidth: 10
}); var mouth = new Kinetic.Line({
points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
tension: 0.5,
closed: true,
stroke: 'red',
strokeWidth: 10
});
layer.add(leftEye)
.add(rightEye)
.add(nose)
.add(mouth);
stage.add(layer); // tweens
var leftEyeTween = new Kinetic.Tween({
node: leftEye,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
y: -100,
points: [0, 200, 50, 150, 100, 200, 50, 200]
});
var rightEyeTween = new Kinetic.Tween({
node: rightEye,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
y: -100,
points: [0, 200, 50, 150, 100, 200, 50, 200]
}); var noseTween = new Kinetic.Tween({
node: nose,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
y: -100,
points: [220, 280, sw/2, 200, sw-220,280]
});
var mouthTween = new Kinetic.Tween({
node: mouth,
duration: 1,
easing: Kinetic.Easings.ElasticEaseOut,
points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
});
stage.getContainer().addEventListener('mouseover', function() {
leftEyeTween.play();
rightEyeTween.play();
noseTween.play();
mouthTween.play();
});
stage.getContainer().addEventListener('mouseout', function() {
leftEyeTween.reverse();
rightEyeTween.reverse();
noseTween.reverse();
mouthTween.reverse();
});
我相信你已经在3三分钟内看完并看懂了这个动画的制作过程和原理。当然,这个动画很简单,我们这里只是粗浅的讲解一些HTML5画布(Canvas)动画技术的皮毛。如果想真正的成为Web动画告诉,那你还需要做很多的努力。但如果你只是业余爱好,我相信这已经足够让你骄傲了。
本文原创发布php中文网,转载请注明出处,感谢您的尊重!
电脑PHP动画制作画板,三分钟HTML5画布(Canvas)动画教程相关推荐
- 计算机动画制作第一节教案,付雪_ 第四章动画制作_第一节制作逐帧动画——教案设计(7页)-原创力文档...
信息技术课堂教学设计 教学内容 第四章 第一节 制作"逐帧"动画 学 校 北京市高井中学 授课教师 付 雪 课 型 新授课 课 时 1 日 期 教学 目标 = 1 \* GB1 ⒈ ...
- 在万彩手影大师上怎么制作微课_【真人手指动画制作软件】万彩手影大师教程 | 添加视频或SWF...
原标题:[真人手指动画制作软件]万彩手影大师教程 | 添加视频或SWF 为动画视频添加合适的视频和生动的SWF不仅可以更好的阐述观点,还能为观众带来更好的视觉效果,使演示内容更具吸引力. 1.添加本地 ...
- 未来技术 html5 app,未来web浏览技术提前体验:10个会让你惊叹不已的HTML5画布(canvas)技术应用演示...
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
- 用html5写一段文字画布中,10个让人惊叹的HTML5画布(canvas)技术效果
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
- html5画布作品,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
- html5好看画布,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
- html画布设计,10个会让你惊叹不已的HTML5画布(canvas)技术应用
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
- html5 2020视觉效果,体验未来:10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演示-UI博客精选...
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
- html5画布作品,10款面向HTML5 画布(Canvas)的JavaScript库
Processing.js Processing.js是一个开放的编程语言,在不使用Flash或Java小程序的前提下,可以实现程序图像.动画和互动的应用.Processing.js是轻量,易于了解掌 ...
最新文章
- 删除表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断,只留有rowid最小的记录...
- BFPRT 算法 (TOP-K 问题)——本质就是在利用分组中位数的中位数来找到较快排更合适的pivot元素...
- 自己动手开发智能聊天机器人完全指南(附python完整源码)
- Protobuf序列化的原理-总结
- 弹层,iframe页面
- SpringBoot整合springDataJPA
- Windows消息目录-消息大全
- BlackBerry 9900刷机
- from scipy.misc import comb ImportError: cannot import name ‘comb‘
- 美国弗吉尼亚大学计算机科学,弗吉尼亚大学计算机科学专业
- linux can远程帧,【值得收藏】详解Linux的CAN接口编程技巧
- 安全日志分析的五种类型
- Android , 打开系统播放器
- 中老年人谨防跟腱断裂
- 直播app源代码,android弹框的几种操作
- top是太阳吗_top是太阳吗_每日TOP榜:泡腾片“变身记”
- opencv,sobel求梯度,C++实现
- Dungeon Maste Java
- D3D12遇到的报错记录
- 博客搬家 pjblog 到 z-blog
热门文章
- 强推一门B站上学习大学物理的课程
- 现代软件工程 第7-9章作业 第3题 --原旭莹
- mysql 命令行 dump_MySQL命令行导出数据库:
- [rk3568]linux strip后可执行程序太大
- 【城市开发者职业成长交流 - 重庆】加强交流,共创成长:重庆程序员的线下交流会总结
- ps实时改变选中区域的颜色(纯颜色)
- python基础之发展应用产量格式化
- SS00004.flink——|HadoopFlink计算领域锋利的武器.v04|——|Flink.v01|StandAlone模式部署|
- python: 找到dataframe某列中含有特定字段字符串的行 遍历dataframe 函数返回为空 找到特定单元格
- Python关于strftime函数详细解析 附实战代码