标签归档:HTML5动画

HTML5 3D 神秘游戏场景动画

今天分享的是一个基于Three.js的HTML5 3D动画,这个动画模拟了游戏中的一个炫酷的3D场景,支持360度视角查看,也支持鼠标滚轮进行缩放。画面中主要展现了一个游戏中传送门的效果,同时还有路两边的围栏、灯笼、石头,以及星光闪闪的萤火虫,整个画面显得十分神秘。不得不说,threejs作为webgl的上层库,基本可以满足我们动画制作的大部分需求。

html5-3d-game-scene

在线演示源码下载

HTML5 Canvas 照片撕裂切换动画

这是一个很有意思的HTML5 Canvas图片切换动画,我们可以用鼠标或者手指在屏幕上滑动,将照片撕成两半,然后再切换成另外一张新的照片。这个特效不足的地方在于,所有照片的撕裂裂纹都是一样的,这可能会显得不是那么逼真。如果你有一个相册应用,个人认为可以将这个效果添加到你的相册照片删除功能上,看到哪张照片不爽,直接将它撕成两半,是不是很过瘾。(注:该动画本地无法运行,需要上传到服务器才可以使用)

html5-canvas-photo-tear

在线演示源码下载

HTML5 Canvas人群流动模拟动画

这是一个基于HTML5 Canvas的动画特效,这个动画主要是模拟了大街上人群流动、熙熙攘攘的景象。首先每一个人物都是在Canvas上绘制而成,大街上男女老少都有,十分逼真。同时,为了让动画更加真实,每个人物的行走速度、行走动作都有一定的差异,这让整个HTML5动画显得更为真实,我们也不得不叹服,Canvas真是一个好东西。

html5-canvas-crowd

在线演示源码下载

HTML5 3D 陨石火球动画

今天要分享的又是一个基于HTML5 Canvas的炫酷动画,这是一个3D的陨石火球动画。从外观上看,这就像一颗正在坠落的陨石火球,还拖着一条长长的火焰尾巴。同时,我们可以通过拖拽鼠标从不同的视角来看这颗火球,并且可以通过鼠标滚轮来放大缩小火球,这便让人产生了不错的3D视觉效果。另外,右上角可以展开一个控制面板,允许你设置火球的颜色、大小、阴影等参数。

html5-canvas-toon-fireball

在线演示源码下载

基于Three.js的图片撕碎切换动画

这次要给大家带来一个特别炫酷的HTML5 Canvas图片切换动画,它是基于three.js动画库实现的,主要动画是图片以撕碎的特效进行切换,相当震撼。另外,在图片切换过程中,你也可以通过鼠标拖动来查看切换时的具体细节效果。如果将它制作成一个效果非常独特而华丽的相册或者焦点图插件,相信会很不错的。

three-js-image-animation

在线演示源码下载

HTML5 WebGL 3D樱花飘落动画

今天要给大家分享一个非常炫酷的HTML5 3D樱花飘落动画,基于WebGL技术。每一片樱花落叶都是在canvas上绘制而成,而且樱花叶片也会随着不同的角度发出不同的色泽光芒,总体呈现出3D立体的视觉效果。整个樱花飘落动画非常大气,如花雨一般,让人倍感震撼。另外,整个动画还可以通过按钮控制开启和暂停。

html5-webgl-sakura-animation

在线演示源码下载

HTML5圣诞礼物大炮发射3D动画

今天给大家带来一款基于HTML5的圣诞礼物大炮发射动画,这个动画主要是构造了一个3D的卧室场景,我们通过点击鼠标让一门大炮可以源源不断地发射各种各样的圣诞礼物,并且伴随大炮发射的声音,显得非常逼真有趣。这个HTML5动画主要算法是一些物体的碰撞检测,以及物体碰撞时的运动方向计算,对开发者的数学功底要求还是比较高的,有兴趣的朋友可以学习一些动画的JS代码。

html5-christmas-cannon

在线演示源码下载

HTML5 Canvas粒子螺旋线条3D动画

今天给大家带来一款效果很酷的HTML5 Canvas动画,它由几个基本动画组成,一个是粒子动画,另一个是螺旋动画。首先是在canvas画板上将像素粒子组合成一个螺旋形线条,然后用JavaScript让粒子运动起来,在视觉上形成螺旋线条波动的动画特效。

html5-canvas-spiral

在线演示源码下载

HTML5 Canvas柳枝随风飘摇动画

这是一款用HTML5 Canvas模拟的柳树随风飘摇的动画特效,首先柳枝和柳叶的模拟通过CSS实现,虽然不是很逼真,但是这并不是这个动画的重点。重点在于我们将鼠标滑过柳枝时,就像微风拂过一般,将柳枝和柳叶飘摇起来,这中间大家可以学习如何用HTML5技术在Canvas画板上实现动画。

html5-canvas-willow-swing

在线演示源码下载

基于TweenMax的HTML5 3D爱心破裂动画

TweenMax是GreenSock动画平台的核心插件,GreenSock是一套用于在所有主流浏览器中制作高性能HTML5动画的工具。今天给大家分享一款基于TweenMax的HTML5 3D爱心动画,它和之前分享的爱心动画不同在于,点击爱心后爱心会破裂,在点击爱心又会重新组合。

tweenmax-html5-3d-heart-break

在线演示源码下载