【重温JS】JavaScript 巩固基础day20-各种运动函数梳理☆☆☆ 今天学习的内容: 开始学习**( 各种运动

这是我参与8月更文挑战的第20天，活动详情查看：8月更文挑战

☆☆☆ 今天学习的内容: 开始学习**( 各种运动函数梳理 )** !重要! ☆☆☆

可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中

结合自己的理解, 用白话文简单又全面概括 JavaScript 学习过程中的基础知识点, 方便加深理解!

开始今天的学习吧! '打牢地基才能筑高楼'! 加油! 认真对待!!

1、梳理复习昨天知识点

1.1 非行内元素样式值的获取：

function getStyle(obj,attr){
    if( window.getComputedStyle ){
        return window.getComputedStyle(obj,false)[attr];
    }else{
        return obj.currentStyle[attr]
    }
}

function startMove(obj,target,attr){
    clearInterval( obj.timer);
    obj.timer = setInterval(()=>{
        if( attr =="opacity" ){
            var current = parseFloat( getStyle(obj,attr) )*100;
        }else{
                        var current =parseInt( getStyle(obj,attr) );
        }
       
        var speed = ( target-current )/10;
        speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
        if( current == target ){
            clearInterval(obj.timer);
        }else{
            if( attr =="opacity" ){
                obj.style.opacity = (current+speed)/100;
            }else{
                obj.style[attr] = current + speed + "px"
            }
        }
    },30)
}

2. 链式运动

2.2 链式运动定义

一个运动完成后，进入下一个运动, 就是链式效果

解决方案：在运动函数上加一个参数，该参数代表一个函数，当上一个动作完成后开始调用这个回调函数

2.2 回调函数

如果一个函数作为参数，这样的函数叫做回调函数

3. 完美运动

同时改变多个样式值

4. 运动分类各种效果的运动

匀速运动---
缓冲运动---
多物体运动---
链式运动---
完美运动

function move(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var flag = true;
     for( var attr in json ){
        var current = parseInt( getStyle( obj,attr ) )
        var speed = (json[attr]-current)/10;
        speed =  speed > 0 ? Math.ceil(speed) : Math.floor( speed );
        if( json[attr]!= current ){
           flag = false;
        }
            
         obj.style[attr] = current + speed + "px";

        
    }
        if( flag ){
            clearInterval(obj.timer);
            if( fn ){
                fn();
            }
        }      

    },10)
}

window.getComputedStyle

function getStyle(obj,attr){
    return window.getComputedStyle(obj,false)[attr];
}

预告: 加油, 追梦人

学习就是一个不断进行的过程, 坚持下去, 定有收获!

日积月累, 巩固基础, 早进大厂!

坚持很不容易, 坚持下来更不容易, 你真棒!

Calm Down & Carry On!

【重温JS】JavaScript 巩固基础day20-各种运动函数梳理

1、梳理复习昨天知识点

1.1 非行内元素样式值的获取 ：

2. 链式运动

2.2 链式运动 定义