原生js开发前端动画的效果

前端动画都是用什么开发?|web开发前端开发需要学什么?|为什么要转前端开发?

javascript 代码

1, 匀速动画效果
window.onload = function () {
    var odiv = document.getElementById(‘odiv’);
    odiv.onmouseover = function () {
        startMover(0);
    }
    odiv.onmouseout = function () {
        startMover(-200);
    }
}
var timer = null;
function startMover(itarget) { //目标值
    clearInterval(timer); //执行当前动画同时清除之前的动画
    var odiv = document.getElementById(‘odiv’);
    timer = setInterval(function () {
        var speed = 0;
        if (odiv.offsetLeft > itarget) {
            speed = -1;
        } else {
            speed = 1;
        }
        if (odiv.offsetLeft == itarget) {
            clearInterval(timer);
        } else {
            odiv.style.left = odiv.offsetLeft + speed + ‘px’;
        }
    }, 30);
}
2, 缓冲动画效果
window.onload = function () {
    var odiv = document.getElementById(‘odiv’);
    odiv.onmouseover = function () {
        startMover(0);
    }
    odiv.onmouseout = function () {
        startMover(-200);
    }
}
var timer = null;
function startMover(itarget) { //速度和目标值
    clearInterval(timer); //执行当前动画同时清除之前的动画
    var odiv = document.getElementById(‘odiv’);
    timer = setInterval(function () {
        var speed = (itarget – odiv.offsetLeft) / 10; //缓冲动画的速度参数变化值
        //如果速度是大于0,说明是向右走,那么就向上取整
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        //Math.floor();向下取整
        if (odiv.offsetLeft == itarget) {
            clearInterval(timer);
        } else {
            //clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离
            odiv.style.left = odiv.offsetLeft + speed + ‘px’;
        }
    }, 30);
}
3, 透明度动画
window.onload = function () {
    var odiv = document.getElementsByTagName(‘div’);
    for (var i = 0; i < odiv.length; i++) {
        odiv[i].onmouseover = function () {
            startOP(this, 100);
        }
        odiv[i].onmouseout = function () {
            startOP(this, 30);
        }
        odiv[i].timer = null; //事先定义
        odiv[i].alpha = null; //事先定义
        //这里发现一个问题,对象的动画属性可以不定义,但是透明度属性必须定义,否则报错
    }
}
function startOP(obj, utarget) {
    clearInterval(obj.timer); //先关闭定时器
    obj.timer = setInterval(function () {
        var speed = 0;
        if (obj.alpha > utarget) {
            speed = -10;
        } else {
            speed = 10;
        }
        obj.alpha = obj.alpha + speed;
        if (obj.alpha == utarget) {
            clearInterval(obj.timer);
        }
        obj.style.filter = ‘alpha(opacity:’ + obj.alpha + ‘)’; //基于IE的
        obj.style.opacity = parseInt(obj.alpha) / 100;
    }, 30);
}
4, 多物体动画
window.onload = function () {
    var olist = document.getElementsByTagName(‘li’);
    for (var i = 0; i < olist.length; i++) {
        olist[i].onmouseover = function () {
            startmov(this, 400);
        };
        olist[i].onmouseleave = function () {
            startmov(this, 200);
        };
        olist[i].timer = null;
    }
    function startmov(obj, itarget) {
        clearInterval(obj.timer); //执行动画之前清除动画
        obj.timer = setInterval(function () {
            var speed = 0;
            speed = (itarget – obj.offsetWidth) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (obj.offsetWidth == itarget) {
                clearInterval(obj.timer);
            } else {
                obj.style.width = obj.offsetWidth + speed + ‘px’;
            }
        }, 30);
    }
}
5, 获取样式动画
window.onload = function () {
    var odiv = document.getElementById(‘odiv’);
    odiv.onmouseover = function () {
        startMov(this);
    };
    function startMov(obj) {
        setInterval(function () {
            obj.style.width = parseInt(getStyle(obj, ‘width’)) + 1 + ‘px’;
            obj.style.fontSize = parseInt(getStyle(obj, ‘fontSize’)) + 1 + ‘px’;
        }, 30);
    }
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
}
6, 多物体复杂动画
window.onload = function () {
    var li1 = document.getElementById(‘li1’);
    var li2 = document.getElementById(‘li2’);
    li1.onmouseover = function () {
        startMov(this, 400, ‘width’);
    };
    li1.onmouseout = function () {
        startMov(this, 200, ‘width’);
    };
    li2.onmouseover = function () {
        startMov(this, 200, ‘height’);
    };
    li2.onmouseout = function () {
        startMov(this, 100, ‘height’);
    };
    function startMov(obj, itarget, attr) {
        clearInterval(obj.timer); //执行动画之前清除动画
        obj.timer = setInterval(function () {
            var icur = parseInt(getStyle(obj, attr));
            var speed = 0;
            speed = (itarget – icur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (icur == itarget) {
                clearInterval(obj.timer);
            } else {
                obj.style[attr] = icur + speed + ‘px’;
            }
        }, 30);
    }
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
}
7, 多物体复杂动画( 带透明度的)
window.onload = function () {
    var li1 = document.getElementById(‘li1’);
    var li2 = document.getElementById(‘li2’);
    li1.onmouseover = function () {
        startMov(this, 100, ‘opacity’);
    };
    li1.onmouseout = function () {
        startMov(this, 30, ‘opacity’);
    };
    li2.onmouseover = function () {
        startMov(this, 200, ‘height’);
    };
    li2.onmouseout = function () {
        startMov(this, 100, ‘height’);
    }
    li1.timer = null;
    li2.timer = null;
    function startMov(obj, itarget, attr) {
        clearInterval(obj.timer); //执行动画之前清除动画
        obj.timer = setInterval(function () {
            var icur = 0;
            if (attr == ‘opacity’) {
                icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //转换成整数,并且四舍五入下
                //计算机在计算小数的时候往往是不准确的!
            } else {
                icur = parseInt(getStyle(obj, attr));
            }
            var speed = 0;
            speed = (itarget – icur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (icur == itarget) {
                clearInterval(obj.timer);
            } else {
                if (attr == ‘opacity’) {
                    obj.style.filter = ‘alpha(opacity:’ + (icur + speed) + ‘)’;
                    obj.style.opacity = (icur + speed) / 100;
                } else {
                    obj.style[attr] = icur + speed + ‘px’;
                }
            }
        }, 30);
    }
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
}
8, 链式动画
window.onload = function () {
    var li1 = document.getElementById(‘li1’);
    li1.onmouseover = function () {
        startMov(li1, 400, ‘width’, function () {
            startMov(li1, 200, ‘height’, function () {
                startMov(li1, 100, ‘opacity’);
            });
        });
    };
    li1.onmouseout = function () {
        startMov(li1, 30, ‘opacity’, function () {
            startMov(li1, 100, ‘height’, function () {
                startMov(li1, 100, ‘width’);
            });
        });
    };
    li1.timer = null;
    function startMov(obj, itarget, attr, fn) { //fn回调函数
        clearInterval(obj.timer); //执行动画之前清除动画
        obj.timer = setInterval(function () {
            var icur = 0;
            if (attr == ‘opacity’) {
                icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //转换成整数,并且四舍五入下
                //计算机在计算小数的时候往往是不准确的!
            } else {
                icur = parseInt(getStyle(obj, attr));
            }
            var speed = 0;
            speed = (itarget – icur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (icur == itarget) {
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                }
            } else {
                if (attr == ‘opacity’) {
                    obj.style.filter = ‘alpha(opacity:’ + (icur + speed) + ‘)’;
                    obj.style.opacity = (icur + speed) / 100;
                } else {
                    obj.style[attr] = icur + speed + ‘px’;
                }
            }
        }, 30);
    }
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
}
9, 多物体同时运动动画
window.onload = function () {
    var li1 = document.getElementById(‘li1’);
    li1.onmouseover = function () {
        startMov(li1, {
            width: 201,
            height: 200,
            opacity: 100
        });
    };
    li1.onmouseout = function () {
        startMov(li1, {
            width: 200,
            height: 100,
            opacity: 30
        });
    };
    li1.timer = null;
    function startMov(obj, json, fn) { //fn回调函数
        clearInterval(obj.timer); //执行动画之前清除动画
        var flag = true; //是否动画都完成了
        obj.timer = setInterval(function () {
            for (var attr in json) {
                var icur = 0;
                if (attr == ‘opacity’) {
                    icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); //转换成整数,并且四舍五入下
                    //计算机在计算小数的时候往往是不准确的!
                } else {
                    icur = parseInt(getStyle(obj, attr));
                }
                var speed = 0;
                speed = (json[attr] – icur) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if (icur != json[attr]) {
                    flag = false;
                }
                if (attr == ‘opacity’) {
                    obj.style.filter = ‘alpha(opacity:’ + (icur + speed) + ‘)’;
                    obj.style.opacity = (icur + speed) / 100;
                } else {
                    obj.style[attr] = icur + speed + ‘px’;
                }
                if (flag) {
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                    }
                }
            }
        }, 30);
    }
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
}
前端开发web app用什么?|h5前端开发专业|web前端开发做一个动画网页
» 本文来自:前端开发者 » 《原生js开发前端动画的效果》
» 本文链接地址:https://www.rokub.com/4014.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!