js原生实现链式动画效果

// 1. css样式

        div {
            width: 100px;
            height: 100px;
            background: olivedrab;
            position: absolute;
            left: 0px;
            opacity: 1;
        }

        .top {
            top: 100px;
        }

        .bottom {
            top: 300px;
        }   
// html和JavaScript代码

<div class="top"></div>
    <div class="bottom" style="background-color: coral;"></div>

    <script>
        // 多物体多值链式运动框架

        // 获取对象样式相对应属性的值
        var targetObj = {
            width: 400,
            height: 400,
            opacity: 50,
            left: 300,
            top: 200
        }
     // 获取对应的HTML元素
        oDivArray = document.getElementsByTagName(‘div‘);
     // 调用函数
        oDivArray[0].onclick = function() {
            startMove(this, targetObj, function() {
                startMove(oDivArray[1], targetObj);
            });
        }
     // 获取元素样式对应的属性值
        function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return window.getComputedStyle(obj, false)[attr];
            }
        }

        // 封装动画函数
        function startMove(obj, json, callback) {        // 清除目标对象的定时器,而非全局
            clearInterval(obj, timer);        // iSpeed:动画速度,iCur:当前样式属性的值,timer:定时器对象
            var iSpeed, iCur, timer;
            obj.timer = setInterval(function() {
                var bStop = true; // 标志位,上一个对象的动画是否完成
                for (var attr in json) {
                    if (attr === ‘opacity‘) { // 如果获取的是opacity,则乘100倍,否则正常获取值
                        iCur = parseFloat(getStyle(obj, attr)) * 100;
                    } else {
                        iCur = parseInt(getStyle(obj, attr));
                    }
                    iSpeed = (json[attr] - iCur) / 7;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //设置动画速度
                    if (attr == ‘opacity‘) {
                        obj.style.opacity = (iCur + iSpeed) / 100; // 乘100的值还原回去
                    } else {
                        obj.style[attr] = iCur + iSpeed + ‘px‘;
                    }
                    if (iCur != json[attr]) { // 如果当前属性的值不等于用户穿进来的对象里的属性对应的值,则继续执行动画
                        bStop = false;
                    } else { // 达到期待的目标,设置标志位为真,即可以停止
                        bStop = true;
                    }
                }
                if (bStop) {
                    clearInterval(obj.timer); //如果标志位为真,则达到用户期待的动画效果
                    typeof callback == ‘function‘ ? callback() : ‘‘;// 判断用户是否有传入回调函数,有则执行,无则结束。链式动画执行框架
                }
            }, 30)
        }
    </script>

end

原文地址:https://www.cnblogs.com/artsmp/p/12043889.html

时间: 2024-10-10 06:02:37

js原生实现链式动画效果的相关文章

js链式动画小例子

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>链式动画</title> <style> * { margin: 0; padding: 0; } #odiv { width: 100px; height: 100px; background: pink; opacity: 0.5; } </style> </hea

js简单实现链式调用

链式调用实现原理:对象中的方法执行后返回对象自身即可以实现链式操作.说白了就是每一次调用方法返回的是同一个对象才可以链式调用. js简单实现链式调用demo Object.prototype.show = function() {   console.log('show');   return this;  }  Object.prototype.hide = function() {   console.log('hide');   return this;  }  var div = doc

链式动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链式动画</title> <style> body,div{ margin: 0; padding:0; } #div1{ width:200px; height:100px; background-color:yellow; border:4p

h5+js随机拖动鼠标产生动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

原生js动画效果(源码解析)

在做页面中,多数情况下都会遇到页面上做动画效果,之前一直都是用jquery,一直没有试过用原生的js来做,今天正好看到一篇js原生动画的效果,特记录在此, 原文地址:http://www.it165.net/pro/html/201410/23513.html 1.匀速动画效果 说明:匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的 01.<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www

tween.js的动画效果

实现动画可以用好多种的方法,今天来看看用tween.js插件是如何实现动画效果的.  tween.js的使用 1.下载 2.引入 3.使用tween.js语法 需要哪些条件来做运动 1.初始位置 2.目标点 缓动函数 1.linear 匀速 2.Quad 二次方缓动效果 3.Cubic 三次方缓动效果 4.Quart 四次方缓动效果 5.Quint 五次方缓动效果 6.Sine  正弦缓动效果 7.Expo  指数缓动效果 8.Circ  圆形缓动函数 9.Elastic 指数衰减正弦曲线缓动函

动画效果之运动

今天开始学习<JS动画效果>,上午把整个课程了解了一遍,决定动手做做实践.一上手就发现看似简单的问题却总是报错,几经推敲才发现问题所在. 关于匀速运动: 首先,做一个简单的“分享到”匀速运动,即当鼠标移到“块”上时,隐藏的块匀速被拉出,移走鼠标,块匀速隐藏. 1.这里涉及到定时器的问题.在开启一个定时器之前一定要关掉定时器,以免出现鼠标不停划上去的时候不停的开启定时器: 2.鼠标进入与离开事件可用一个函数表示,传入不同参数即可通用一个函数(注意尽量少的参数,所以可以精简): 3.offset对

第126天:移动端-原生实现响应式模态框

下面采用HTML+CSS+JavaScript实现模态框,并采用Flex布局和多媒体查询实现响应式. 一.模态框HTML代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模态框实现</title> 6 <link rel="stylesheet" href

JavaScript之jQuery-5 jQuery 动画效果(隐藏和显示、自定义动画、并发与排列效果)

一.jQuery 隐藏和显示 基本显示.隐藏效果 - show() / hide() - 作用: 通过同时改变元素的宽度和高度来实现显示或隐藏 - 用法: $obj.show(执行时间,回调函数); 执行时间:slow,normal,fast或毫秒数 回调函数:动画执行完毕之后要执行的函数 滑动式动画效果 - slideDown() / slideUp() - 作用: 通过改变高度来实现显示或者隐藏的效果 - 用法同 show() / hidden() 淡入淡出式动画效果 - fadeIn()