js动画封装

超、凢脫俗 2023-06-25 10:08 60阅读 0赞

## js动画封装 ##

凡是可以看到过渡效果的基本都可以用到js动画，都能引用

function $_animation(el, str, end, tm,fn) {
        clearInterval(el.timer);
        // 1：获取初始样式
        var start = getSty(el,str);
        start = parseFloat(start);
        // 2: 求差
        var s = end-start;
        // 3；执行动画
         el.timer = setInterval(function(){
            start += s/tm*16.7; // 每次属性值的变化(例如每次移动距离)
            if(s>0){// end>start 业务
                if(start>=end){
                    start = end;
                    clearInterval(el.timer);
                    el.style[str]=  str==='opacity'?start:start+'px';
                    // 执行下一个动画业务从合理
                    fn?fn():null; // 判断是否有参数；如果有参数；执行回调函数
                    // 强制同步
                    flag = true
                }else{
                    el.style[str]=  str==='opacity'?start:start+'px';
                }
    
            }else{
                // 处理end <start 业务
                if(start<=end){
                    start = end;
                    clearInterval(el.timer);
                    el.style[str]=  str==='opacity'?start:start+'px';
                    fn?fn():null;
                     // 强制同步
                     flag = true
                }else{
                    el.style[str]=  str==='opacity'?start:start+'px';
                }
            }
    
        },16.7)
      }
    
      function getSty(el, str) {
        var res;
        if (el.currentStyle) {
          // ie
          res = el.currentStyle[str];
        } else {
          // 非IE
          res = getComputedStyle(el)[str];
        }
    
        return res;
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，60人围观）

还没有评论，来说两句吧...

相关阅读

相关 js原生，缓动动画封装

![20200222002539200.png][] <!DOCTYPE html> <html lang="en"> <head>

冷不防/ 2023年07月07日 08:25/ 0 赞/ 26 阅读

相关 JS封装缓动动画效果函数

原理 JS的动画效果原理其实就是添加一个定时器,每多少毫秒调用一次,就可以使盒子运动一次. 在这里我封装了一个缓动动画函数,只要有对象需要添加动画就可以调用这个动画函

亦凉/ 2023年07月07日 05:56/ 0 赞/ 39 阅读

相关 JS封装匀速动画

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N

比眉伴天荒/ 2023年07月04日 14:16/ 0 赞/ 2 阅读

相关 js动画封装

js动画封装凡是可以看到过渡效果的基本都可以用到js动画，都能引用 <!-- ani() 作用：动画给某个元素查看某个css 属性值

超、凢脫俗/ 2023年06月25日 10:08/ 0 赞/ 61 阅读

相关 JS动画封装

简单的运动函数 var demo1=document.getElementById("demo1"); demo1.onmouseover=funct

叁歲伎倆/ 2022年08月04日 05:22/ 0 赞/ 236 阅读

相关 js实现图片旋转动画的封装

//图片动画封装 function SearchAnim(opts) { for(var i in SearchAnim.DEF

末蓝、/ 2022年07月16日 01:48/ 0 赞/ 220 阅读

相关 js缓动动画及其封装

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

古城微笑少年丶/ 2022年07月13日 23:27/ 0 赞/ 231 阅读

相关 js动画基本原理和简单封装

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

左手的ㄟ右手/ 2022年07月13日 23:27/ 0 赞/ 113 阅读

相关 Vue_动画封装

我们写一个动画效果，如果在页面多处调用，就可以封装在一个组件里。使用插槽的形式。 eg： <fade :show='showfade'> <div>h

雨点打透心脏的1/2处/ 2022年05月20日 23:30/ 0 赞/ 261 阅读

相关封装animate动画

<style type="text/css"> { margin: 0; padding: 0; }

一时失言乱红尘/ 2021年09月02日 09:49/ 0 赞/ 530 阅读