js实现动画
运动的三要素
- 起始点
一个运动的起始点其实就是当前元素的位置，我们通过API获取当前元素的位置，让这个位置作为运动的起始。
- 目标
- 速度
基本的元素移动
<script>
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>css transition 过渡动画
当元素 从一种样式变换为另一种样式 时为元素添加效果
语法
transition: propertyName duration+s timing-function dealytransition的各项子属性详细值
| name | value | 是否必须 | 备注 |
|---|---|---|---|
| transition-property | 需要应用过渡效果的CSS 属性的名字/all | 是 | 填写一个属性名则监听一个，填 all 则监听该元素的所有样式变化，当指定的 CSS 属性改变时，过渡效果将开始执行。 |
| transition-duration | 过渡时间 | 是 | 不填写默认为0，不会发生动画渐变效果 |
| transition-timing-function | 过渡效果的时间曲线 | 否 | 贝塞尔曲线，默认ease |
| transition-delay | 是否延迟执行过渡 | 否 | 不填写时默认为0 |
css动画总结
时间块 - Timer
setTimeout("function", interval)，让指定的函数经过某段时间（interval）之后才开始执行，单位为毫秒。 variable = setTimeout("function", interval);
取消等待执行的某个函数：clearTimeout(variable) 设置5秒后，移动，期间随时可以使用clearTimeout(movement)来取消移动。
<body>
<p id="message">where</p>
<p id="message2">whoa!</p>
<script>
function positionMessage(){
var elem = document.getElementById("message");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "100px";
moveElement("message",125,25,20);
var elem = document.getElementById("message2");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "50px";
moveElement("message2",125,125,10);
//movement = setTimeout("moveMessage()", 5000);
}
function moveElement(elementID,final_x,final_y,interval){
var elem = document.getElementById(elementID);
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos == final_x && ypos == final_y){
return true;
}
if(xpos < final_x){
xpos++;
}
if(xpos > final_x){
xpos--;
}
if(ypos < final_y){
ypos++;
}
if(ypos > final_y){
ypos--;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
movement = setTimeout(repeat,interval);
}
// function moveMessage(){
// var elem = document.getElementById("message");
// elem.style.left = "200px";
// }
positionMessage();
// moveMessage();
</script>
</body>css属性 动画注意点
overflow属性处理元素尺寸超过容器的情况。 overflow可取属性有四种：visible，hidden，scroll，auto
- visible：不裁减溢出内容
- hidden：隐藏溢出内容
- scroll：隐藏溢出内容，但有一个滚动条
- auto：发生溢出时才有滚动条，无溢出不滚动
动画例子
跟着鼠标走的动画
<style>
#img{
position: absolute;
}
body{
height: 1000px;
width: 1000px;
}
</style>
</head>
<body>
<img id="img" src="这里插入图片地址" alt="">
<script>
var img=document.getElementById("img");
document.onmousemove = function(event){
//解决兼容问题
event = event||window.event;
//获取鼠标的坐标
//client可见窗口坐标
// var X=event.clientX;
// var Y=event.clientY;
//div的偏移量是相对于整个页面的
// var X=event.pageX;//IE8不适用
// var Y=event.pageY;
var X=event.clientX;
var Y=event.clientY;
//设置图片坐标
img.style.left=X+sl+"px";
img.style.top=Y+st+"px";
}
</script>
</body>匀速移动代码
<style>
* {
margin: 0;
padding: 0;
}
div {
margin-top: 20px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv">
<script src="common.js"></script>
<script>
//点击按钮移动div
my$("btn1").onclick = function () {
animate(my$("dv"), 400);
};
my$("btn2").onclick = function () {
animate(my$("dv"), 800);
};
//匀速动画
function animate(element, target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = element.offsetLeft;
//移动的步数
var step = 10;
step = target > current ? step : -step;
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 20);
}
function my$(id) {
return document.getElementById(id);
}
</script>
</div>
</body>变速移动代码
<script>
//点击按钮移动div
my$("btn1").onclick = function () {
animate(my$("dv"), 400);
};
my$("btn2").onclick = function () {
animate(my$("dv"), 800);
};
//变速动画
function animate(element, target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = element.offsetLeft;
//移动的步数
var step = (target-current)/10;
step = step>0?Math.ceil(step):Math.floor(step);
current += step;
element.style.left = current + "px";
if(current==target) {
//清理定时器
clearInterval(element.timeId);
}
}, 20);
}
function my$(id) {
return document.getElementById(id);
}
</script>@keyframes制作动画
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
不同浏览器需要查一下
语法：
@keyframes animationname {keyframes-selector {css-styles;}}向下移动
<style>
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
.element{
animation-name: mymove;
animation-duration: 0.4s}
</style>在一个动画中改变多个 CSS 样式
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}带有多个 CSS 样式的多个 keyframe 选择器
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
