JS动画（二）

作者: 大海孤了岛 | 来源:发表于2017-03-11 16:18 被阅读12次

前端第三方插件
vue的动画特效
js 动画二
JS动画（二）
JS动画效果
Vue中的Js动画与Velocityjs的结合
JS第七天-02
027 JS动画
有用的Vue第三方库
Vue.js第4课-Vue中的动画特效（part02）

实现鼠标移动改变图片的透明度

所用知识：
透明度属性：opacity
setInterval()方法：设置时间函数

setInternal
clearInterval()方法：取消时间函数

clearInterval.png

实现效果

animation1.gif

实现方法：

定义图像以及设置其初始化透明度属性

 <style>
        #img{
            opacity: 1;
        }
 </style>

<body>
    ![](Animation.jpg)
</body>

设置鼠标的移动事件

window.onload = function () {
            //检查是否支持getElementById方法
            if (! document.getElementById) return false;
            //获取到img元素
            var img = document.getElementById("img");
            //设置鼠标移入事件
            img.onmouseover = function () {
                startMove(50)
            };
            //设置鼠标移出事件
            img.onmouseout = function () {
                startMove(100)
            }
        };

设置时间函数

        //定义一个time事件，以便取消时间事件
        var timer = null;
        //设置一个临时变量，用来存取当前img的透明度
        var alpha = 0;
        function startMove(target) {
            //获取到img元素
            var img = document.getElementById("img");
            //取消其他time事件，防止鼠标多次的移入移出产生异常的效果
            clearInterval(timer);
            //设置time事件，每30ms执行一次
            timer = setInterval(function (){
                var speed = 0;
                //当前透明度超过目标值，则应该减少，速度设置为负数，否则速度设置为正数
                if (alpha > target){
                    speed = -10;
                } else {
                    speed = 10;
                }
                //达到目标值时，取消时间函数
                if (alpha == target){
                    clearInterval(timer);
                }
                //否则，继续改变透明度，并为img元素设置其属性
                else {
                    alpha += speed;
                    img.style.opacity = alpha / 100;
                }
            },30);
        }

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animation</title>

    <style>
        #img{
            opacity: 1;
        }
    </style>

    <script>
        window.onload = function () {
            //检查是否支持getElementById方法
            if (! document.getElementById) return false;
            //获取到img元素
            var img = document.getElementById("img");
            //设置鼠标移入事件
            img.onmouseover = function () {
                startMove(50)
            };
            //设置鼠标移出事件
            img.onmouseout = function () {
                startMove(100)
            }
        };

        //定义一个time事件，以便取消时间事件
        var timer = null;
        //设置一个临时变量，用来存取当前img的透明度
        var alpha = 0;
        function startMove(target) {
            //获取到img元素
            var img = document.getElementById("img");
            //取消其他time事件，防止鼠标多次的移入移出产生异常的效果
            clearInterval(timer);
            //设置time事件，每30ms执行一次
            timer = setInterval(function (){
                var speed = 0;
                //当前透明度超过目标值，则应该减少，速度设置为负数，否则速度设置为正数
                if (alpha > target){
                    speed = -10;
                } else {
                    speed = 10;
                }
                //达到目标值时，取消时间函数
                if (alpha == target){
                    clearInterval(timer);
                }
                //否则，继续改变透明度，并为img元素设置其属性
                else {
                    alpha += speed;
                    img.style.opacity = alpha / 100;
                }
            },30);
        }
    </script>

</head>
<body>
    ![](Animation.jpg)
</body>
</html>