#网页动画# 重力小球

网页重力小球动画

网页canvas重力小球动画

动画效果链接

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Title</title><style>canvas{width:100%;height:100%;background:lightslategrey;position:fixed;top:0;left:0;}</style>
</head>
<body><canvas></canvas><script>let canvas = document.querySelector("canvas");let context = canvas.getContext("2d");let width = canvas.width = canvas.offsetWidth;let height = canvas.height = canvas.offsetHeight;let r = 50; //小球半径let x = 50; //圆心横坐标let y = 50; //圆心纵坐标let vx = 2; //默认横向速度let vy = 0; //默认纵向速度let g = 0.5; //重力加速度(function draw(){//清空画布、重新绘制context.clearRect(0,0,width,height);context.beginPath();vy += g;x += vx;y += vy;//碰到底部if(y>=height-r){y=height-r;vy *= -0.6; //纵向速度方向改变 损耗0.3vx -= 0.05; //横向速度减少if(vx<=0){vx = 0;}}//画实心圆context.arc(x,y,r,0,Math.PI*2);context.fill();requestAnimationFrame(draw);}())</script>
</body>
</html>

#网页动画# 重力小球相关推荐

canvas重力小球 html+css+js
先看效果(完整代码在底部): 因为录屏软件的原因,动画看着有点迟钝,其实是动画很顺畅的~ https://space.bilibili.com/176586698 实现过程(可一步一步实现): 1.定 ...
HTML5网页动画效果
HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...
html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
html如何创建关键帧动画旋转,[教程] 用 CSS3 Animations(动画) 和 Keyframes(关键帧) 创建简单的网页动画 – CSS3 实现弹跳球动画...
通过这个有趣的教程学习 CSS Animations(动画) 和 Keyframes(关键帧). 我们要做什么? 下面是最终代码,也就是我们将要最终实现的演示: 基础准备对于这个实现,我们需要一个简 ...
Android实现重力小球
很简单的实现,作为软件专业大二在校生,接触安卓还没两个月,没事写着玩练练手,请大神们莫要嘲讽重力小球主要参考了http://www.xuanyusong.com/archives/337这篇文章,我 ...
android sensor之重力小球
安卓重力小球demo 要过年了,最近在公司也没事.于是就在研究android的一些SDK.看到sensor时,突然想到大学里面刚出现android的时候,还没有钱买android手机,那时候想要是有个 ...
【自定义view】android重力小球
android实现重力小球自定义小球view package com.project.demo.view;import static android.content.Context.SENSOR_S ...
css3雨滴掉落水面网页动画
下载地址 css3雨滴掉落水面网页动画,鼠标点击的时候触发雨滴掉落 dd:
CSS3实现3D魔方翻转网页动画特效
CSS3实现3D魔方翻转网页动画特效 <link rel="stylesheet" type="text/css" href="square.c ...

#网页动画# 重力小球

网页重力小球动画

#网页动画# 重力小球相关推荐

最新文章

热门文章