动画原理
来源：互联网 发布：七骑士亚服充值淘宝 编辑：程序博客网 时间：2024/06/10 21:40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01动画的原理.html</title>
<style>
html,body{overflow:hidden;}
img{position:absolute;top:0;left:0;width:100px;}
</style>
<script>
window.onload = function(){
// 匀速运动
// 速度保持不变的运动成为匀速运动
var bird = document.getElementById('bird');
// 改变元素的位置
var left = 0;
var top = 0;
var speed = 5;
var vspeed = 3;
setInterval(function(){
// top +=2;
// 边界反弹
if(left > window.innerWidth - bird.offsetWidth || left < 0){
speed *= -1
}
if(top > window.innerHeight - bird.offsetHeight || top < 0){
vspeed *= -1;
}
left += speed;
top += vspeed;
bird.style.left = left + 'px';
bird.style.top = top + 'px';
},30);//16.7
}
</script>
</head>
<body>
<img src="img/bird.jpg" id="bird" />
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01动画的原理.html</title>
<style>
html,body{overflow:hidden;}
img{position:absolute;top:0;left:0;width:100px;}
</style>
<script>
window.onload = function(){
// 匀速运动
// 速度保持不变的运动成为匀速运动
var bird = document.getElementById('bird');
// 改变元素的位置
var left = 0;
var top = 0;
var speed = 5;
var vspeed = 3;
setInterval(function(){
// top +=2;
// 边界反弹
if(left > window.innerWidth - bird.offsetWidth || left < 0){
speed *= -1
}
if(top > window.innerHeight - bird.offsetHeight || top < 0){
vspeed *= -1;
}
left += speed;
top += vspeed;
bird.style.left = left + 'px';
bird.style.top = top + 'px';
},30);//16.7
}
</script>
</head>
<body>
<img src="img/bird.jpg" id="bird" />
</body>
</html>
0 0
- 动画原理
- TCP原理动画观看
- 骨骼动画原理
- Android 动画原理
- android 动画原理二
- Android 动画框架原理
- Android 动画框架原理
- android动画原理分析
- Android动画原理
- 骨骼动画原理
- Android 动画原理
- Android 动画原理
- Android 动画原理
- Android 动画原理
- Android 动画原理
- Android 动画原理
- Android动画原理分析
- activity切换动画原理
- 多功能监护系统开发与设计
- zookeeper 分布式带来的不同开发设计点
- Android测试手机记录报错日志
- 欢迎使用CSDN-markdown编辑器
- 数组中只出现一次的数字
- 动画原理
- Pow(x, n)
- 欢迎使用CSDN-markdown编辑器
- 消除a标签的默认点击后虚线框的样式
- 【转自知乎】5G关键技术之波束成形
- /system/bin/service分析与使用
- [Ubertooth-general] sniff and decrypt/crack bluetooth 2.0
- 欢迎使用CSDN-markdown编辑器
- 七大比较排序总结
