JS动画效果

JavaScript 动画框架 框架封装


相信大家在很多门户网站上都可以看到动画的交互效果,通过这些动画生动地体现了我们在网页上的交互效果,现在我们就来学习一下这些动画效果的分解动作吧。作为学习了网页设计初步的一个进阶选修课。

动画的实现思路都是通过连续改变物体的属性值来实现效果的。一般来说都是改变一个物体的left,right,width,height,opacity.

一.简单动画

1.透明度动画 首先一点预备知识,下面是两种浏览器的透明度的属性表示,且都是表示0.3的透明度,1表示不透明。

IE浏览器透明度:filter: alpha(opacity:30); Chrome浏览器透明度:opacity: 0.3; 一个简单的Div透明度改变动画实例:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,div{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 200px;
            height:200px;
            background:red;
            filter: alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
    <script>
        var timer = null;
        var alpha = 30;
        function startMove(iTarget) {
            var oDiv = document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function () {
                var speed = iTarget > alpha ? 10 : -10;
                if (iTarget == alpha){
                    clearInterval(timer);
                }else {
                    alpha+=speed;
                    oDiv.style.filter ='alpha(opacity:'+alpha+')';
                    oDiv.style.opacity = alpha/100;
                }
            },30);
        }
        window.onload=function () {
            var oDiv = document.getElementById('div1');
            oDiv.onmouseover=function () {
                startMove(100);
            }
            oDiv.onmouseout = function () {
                startMove(30);
            }
        }
    </script>
</head>
<body>
<div id="div1"></div>
</body>

2.速度动画 速度动画通过改变物体的坐标或者说距离他的父容器的左侧和上面的距离来实现。比如先获取一个div,在改变style中的left属性。下面的例子就是一个鼠标移入整个div右滑动,鼠标移开恢复原状。HTML样式是上个例子的样式,这里就不贴出了,一些细节的解释在代码中。

<script>
        window.onload=function () {
            //提取全局变量
            var timer = null;
            var div = document.getElementById('div1');

            function startMove(speed, target) {
                //定时器初始化
                clearInterval(timer);
                timer = setInterval(function () {
                    if (div.offsetLeft == target){
                        clearInterval(timer);
                    }else {
                        div.style.left = div.offsetLeft + speed;
                    }
                },30);
            }

            div.onmouseover = startMove(10,0);
            div.onmouseout = startMove(-10,-200);

        }
    </script>

二.缓存动画

同样是速度动画的例子里的,现在我们改变一下让他可以实现一个缓存的速度动画,并且速度越来越快。

<script>
        var timer = null;
        function startMove(iTarget) {
            clearInterval(timer);
            var div = document.getElementById('div1');
            timer = setInterval(function () {
                var speed = (iTarget - div.offsetLeft)/10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                if(div.offsetLeft == iTarget){
                    clearInterval(timer);
                }else{
                    div.style.left = div.offsetLeft + speed + 'px';
                }
            },30);
        }
        window.onload = function () {
            var div = document.getElementById('div1');
            div.onmouseover=function () {
                startMove(0);
            }
            div.onmouseout=function () {
                startMove(-200);
            }
        }
    </script>

三.多物体动画

多物体运动可以理解成多个单个物体的简单运动(有点拗口啊),从程序执行的角度来说,就是遍历设置每个物体的动画。下面的例子都是上面的简单动画例子的集成而已。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,ul{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul li{
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
        }
    </style>
    <script>
        function startMove(obj, target) {
            clearInterval(obj.timer);
            obj.timer=setInterval(function () {
                var speed = (target-obj.offsetWidth)/8;
                speed = speed > 0 ? Math.ceil(speed):Math.floor(speed);
                if (obj.offsetWidth == target){
                    clearInterval(obj.timer);
                }else {
                    obj.style.width = obj.offsetWidth + speed + 'px';
                }
            },30);
        }
        window.onload=function () {
            var aLi = document.getElementsByTagName('li');
            for (var i=0;i<aLi.length;i++){
                aLi[i].timer = null;
                aLi[i].onmouseover = function () {
                    startMove(this,400);
                }
                aLi[i].onmouseout = function () {
                    startMove(this,200);
                }
            }
        }
    </script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

四.链式动画

首先把上面的简单运动框架抽取出来然后加上透明度的变化,放进一个人通用的JS文件里movement.js:

function getStyle(obj,attr) {
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else {
        return getComputedStyle(obj,false)[attr];
    }
}
function startMove(obj,attr,target,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 = (target - icur)/8;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (icur == target){
            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);

然后我们简单的做一个长200px宽100px的透明度0.3黄色长方形先变长成400px然后宽长成200px,然后也是完全不透明(透明度1.0)的,鼠标移除再依次还原。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链式运动框架</title>
    <style>
        body,ul,li{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul li{
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 4px solid #000;
            filter: alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
    <script src="move.js"></script>
    <script>
        window.onload = function () {
            var li = document.getElementById('li1');
            li.onmouseover=function () {
                startMove(li,'width',400,function () {
                    startMove(li,'height',200,function () {
                        startMove(li,'opacity',100);
                    })
                });
            }
            li.onmouseout=function () {
                startMove(li,'opacity',30,function () {
                    startMove(li,'height',100,function () {
                        startMove(li,'width',200);
                    })
                })
            }
        }
    </script>
</head>
<body>
    <ul>
        <li id="li1"></li>
    </ul>
</body>
</html>

五.同时运动

上面的框架都是单个运动动作,如果要实现同时运动,我们就需要借助json了。

JSON的格式: {键:值,键:值} 完善后的运动框架js:movement.js

function getStyle(obj,attr) {
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else {
        return getComputedStyle(obj,false)[attr];
    }
}
function startMove(obj,json,fn) {
    flag=true;
    clearInterval(obj.timer);
    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 = (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);
}

然后把链式运动的代码改成

startMove(li,{'width':400,'height':200,'opacity':100});

效果果然是可以同时运动的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java集合解惑

    本文取自工匠若水的qq群里的Java基础题目,把里面有关Java集合放在一起。 全文github地址

    1025645
  • 在Android开发中怎样使用Application类

    自己独立开发项目才发现以前对Application类并不是十分了解,现在开始直接搭建一个新项目的框架才重新踩过这个坑。

    1025645
  • DOM事件探索

    1.HTML事件处理程序 2.DOMO级事件处理程序 3.DOM2级事件处理程序

    1025645
  • 基于PaddlePaddle的机器翻译教程 | 深度学习基础任务系列

    机器翻译(machine translation, MT)是用计算机来实现不同语言之间翻译的技术。需要翻译的语言通常称为源语言(source language)...

    深度学习与Python
  • 车联网、智慧物流将乘风而起?《交通强国建设纲要》全解读来了

    日前,中共中央、国务院印发《交通强国建设纲要》(以下简称“纲要”),纲要中明确了我国不同阶段的交通建设目标,同时也提到了大力发展智慧交通、智慧物流等内容,主要有...

    镁客网
  • 基于PaddlePaddle的机器翻译教程 | 深度学习基础任务系列

    机器翻译(machine translation, MT)是用计算机来实现不同语言之间翻译的技术。需要翻译的语言通常称为源语言(source language)...

    量子位
  • 如何用PaddlePaddle实现机器翻译?

    机器翻译(machine translation, MT)是用计算机来实现不同语言之间翻译的技术。需要翻译的语言通常称为源语言(source language)...

    用户1386409
  • R软件SIR模型网络结构扩散过程模拟

    基本的算法非常简单: 生成一个网络:g(V, E)。 随机选择一个或几个节点作为种子(seeds)。 每个感染者以概率p(可视作该节点的传染能力,通常表示为ββ...

    拓端
  • Visual Studio 2010 中JS注释制作

      Visual Studio 2010中的js注释已经很强大了,但怎么才能和调用c#的方法一样容易呢?怎样才能让每个参数都有注释说明呢?底下就是想要的答案。 ...

    Java中文社群-磊哥
  • 成立 5 周年:一文览尽 Facebook 人工智能研究院历年重要成果

    AI 科技评论按:五年前,Yann LeCun 等人创建了 Facebook 人工智能研究院 (Facebook AI Research,FAIR),试图通过开...

    AI科技评论

扫码关注云+社区

领取腾讯云代金券