JS动画之速度动画和透明度变化

Posted 2020-08-09

一、运动框架实现思路：
1.速度（改变值left、right、width、height、opacity）
2.缓冲运动
3.多物体运动
4.任意值变动
5.链式运动
6.同时运动

二、匀速运动：
1、设置定时器，每隔一段时间更改位置，达到匀速运动
2、设置定时器前需清除定时器，以防多次触发重复生成多个定时器
3、当运动位置达到目标值时，可通过清除定时器停止运动
4、当定义函数多处相同时，可封装为一个函数，用不同参数调用，尽量少传递相同的参数
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            oDiv.onmouseover = function(){
                startMove(0);
            }
            oDiv.onmouseout = function(){
                startMove(-200);
            }
        }
        var timer=null;
        function startMove(iTarget){
            clearInterval(timer);
            var oDiv = document.getElementById("div1");
            timer=setInterval(function(){
                var speed=0;
                if(oDiv.offsetLeft>iTarget){
                    speed=-10;
                }
                else{speed=10;}
                if(oDiv.offsetLeft==iTarget){
                    clearInterval(timer);
                }
                else{
                oDiv.style.left=oDiv.offsetLeft+speed+"px";
                }
            },30)
        }

三、透明动画
// #div1{
//     width:200px;
//     height:200px;
//     background:red;
//     所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性
// 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)
//     filter:alpha(opacity:30);
//     opacity:0.3;
// }
        window.onload=function(){
            var oDiv=document.getElementById("div1");
            oDiv.onmouseover=function(){
                startMove(100);
            }
            oDiv.onmouseout=function(){
                startMove(30);
            }
        }
        var timer=null;
        var alpha=30;
        function startMove(iTarget){
            var oDiv=document.getElementById("div1");
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=0;
                if(alpha>iTarget){
                    speed=-10;
                }
                else{
                    speed=10;
                }
                if(alpha==iTarget){
                    clearInterval(timer);
                }
                else{
                    alpha+=speed;
                    oDiv.style.filter="alpha(opacity:"+alpha+")";
                    oDiv.style.opacity=alpha/100;
                }
            },30)
        }