JS函数封装

标签：prototype   绑定   count   math   防止   offset   技术   radius   自己   

在JS中元素运动的时候我们需要使用一些运动的操作，这里作者自己设计了一个简单的运动函数，可以实现匀速和缓冲运动效果。

/*
 * @Descripttion: 
 * @version: 
 * @Author: 小小荧
 * @Date: 2020-03-17 18:01:21
 * @LastEditors: 小小荧
 * @LastEditTime: 2020-03-17 19:11:01
 */
/**
 * 多属性的动画函数
 * @param {*} ele 需要运动的节点
 * @param {*} attr_options 传入的是一个需要运动的属性包括运动的目标值，操作的节点属性 
 * @param {*} timefn 运动的形式，默认是缓冲运动
 * @param {*} speed  运动的速度
 */
function animate(ele, attr_options, callback, timefn = "swing", speed = 5) {

    // 我们需要把传入的options处理成
    /* 
        {“width : {
            target : 200,
            iNow : 100
        }}这个形式
    */

    for (var attr in attr_options) {
        attr_options[attr] = {
            target: attr === "opacity" ? parseInt(attr_options[attr] * 100) : attr_options[attr],
            // 需要计算得到
            iNow: attr === "opacity" ? parseInt(getComputedStyle(ele)[attr] * 100) : parseInt(getComputedStyle(ele)[attr])
        }
    }

    // 判断是不是匀速运动
    if (timefn === "liner") {
        speed = attr_options[attr].iNow  0 ? Math.ceil(speed) : Math.floor(speed);
            }

            // 运动之中条件的判断
            if (Math.abs(target - iNow) 

参数解释
animate(ele, attr_options, callback, timefn(可选), speed(可选))
ele : 需要运动的元素节点
att_options：需要运动的元素节点
callback ： 回调函数，是运动结束之后需要完成的操作
timefn : 可选参数，是值运动的效果 可选liner匀速运算，swing缓冲运算
speed ： 可选参数，值运动的速度

演示

JS函数封装

标签：prototype   绑定   count   math   防止   offset   技术   radius   自己   

原文地址：https://www.cnblogs.com/xfy196/p/12546156.html