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 条评论
登录 后参与评论

相关文章

来自专栏Android开发与分享

【Android】RecyclerView:打造悬浮效果

1.1K100
来自专栏cnblogs

深入理解和应用display属性(二)

四、inline-block 此类元素是inline + block的合体 1) margin和padding都有效;width和height都有效; .inl...

22260
来自专栏lonelydawn的前端猿区

canvas星空的2d绘制示例

一切尽在注释里: <!DOCTYPE html> <html> <head>     <meta charset="utf-8"></meta>     <t...

22890
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(2)

Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来。接下里我会在本文中给各位介绍Canvas的...

29680
来自专栏HTML5学堂

一步步实现静态页面布局

本文内容概要: 1 CSS选择器 2 盒模型 3 浮动 4 页面布局案例 5 课后习题 上周我们详解的讲解了一个网站的开发流程以及如何使用标签来进行一个网页的布...

836100
来自专栏lzj_learn_note

Android ImageSpan与TextView同一行图片居中

在开发中常常会遇到标签(图片)+文字的需求,实现方式一般采用SpannableString的方式来实现。 这时候会遇到图片ImageSpan没有办法居中的问题。...

51620
来自专栏我和未来有约会

分析Silverlight Button控件布局

分析Silverlight Button控件布局 答:关于按钮自适应 Silverlight也算一个比较开放的技术。Button控件其实也是一些标准的Grid...

39350
来自专栏柠檬先生

css3 UI 修饰——回顾

1.box-shadow 属性向框添加一个或者多个阴影。   语法: box-shadow: h-shadow v-shadow blur spread col...

21290
来自专栏Android常用基础

自定义View(一)-动画- XML生成View动画

感觉好久没有写博客了。首先因为最近比较忙,有在学习即时通讯相关的开源项目,好不容易忙完了。有点时间就抓紧写博客。之前学习的开源项目百篮应用已经获得360+sta...

13910
来自专栏偏前端工程师的驿站

CSS魔法堂:深入理解line-height和vertical-align

前言 一直听说line-height是指两行文本的基线间的距离,然后又说行高等于行距,最近还听说有个叫行间距的家伙,@张鑫旭还说line-height和vert...

33680

扫码关注云+社区

领取腾讯云代金券