js匀速动画及动画库

最新推荐文章于 2019-08-28 14:56:29 发布
最新推荐文章于 2019-08-28 14:56:29 发布
阅读量396 收藏
点赞数
分类专栏： 前端-JS基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruirui_1996/article/details/78148676
版权
准备知识
1.定时器

使用定时器分为两步：设置定时器、设置等待时间

window.setInterval([function],[interval]); //设置一个定时器，到达指定的时间，每隔这么长时间都重复执行[function]
window.setTimeOut([function],[interval]); //只执行一次

定时器返回的是一个数字，代表当前是第几个定时器
清除定时器：

window.clearTimeOut(1); //数字表示清除掉第几个
window.clearInterval(timer2);
2.获取屏幕的宽高（兼容所有浏览器）
var curWidth = document.documentElement.clientWidth || document.body.clientWidth; //获取当前屏幕的宽度
var curHeight = document.documentElement.clientHeight || document.body.clientHeight; //获取当前屏幕的高度
1.在指定时间内实现单方向匀速运动

让蓝色方块向右匀速运动，2s后到达屏幕右侧，每10ms走一步，如图所示：
这里写图片描述
（1）通过计算步长来实现：
示意图：
这里写图片描述

<script type="text/javascript">
    var oBox = document.getElementById("box");
    //盒子走的距离：
    var maxLeft = (document.documentElement.clientWidth || document.body.clientWidth) - oBox.offsetWidth;
    //运动的时间为2s
    var duration = 2000;
    //步长=距离/时间*10
    var step = (maxLeft / duration) * 10;
    var timer = window.setInterval(function () {
        var curLeft = utils.css(oBox, "left"); //获取
        if (curLeft >= maxLeft) {
            window.clearInterval(timer);
            return; //不加会有滚动条
        }
        curLeft += step;
        utils.css(oBox, "left", curLeft); //设置
    }, 10);
</script>

（2）通过计算每次运动的距离来实现：
这里写图片描述

<script type="text/javascript">
    var oBox = document.getElementById('box'); //获取id是box的div元素
    var duration = 2000; //运动的总时间为2s
    //走的总距离/应该走的距离
    var target = (document.documentElement.clientWidth || document.body.clientWidth) - oBox.offsetWidth;
    var begin = utils.css(oBox, 'left'); //获取起始位置
    var change = target - begin; //剩下的距离
    var interval = 10; //每10毫秒执行一次
    var time = null;
    var timer = window.setInterval(function () { //建立定时器
        time += interval;
        if (time >= duration) { //当累加时间大于2秒时停止定时器
            window.clearInterval(timer);
            oBox.style.left = target + 'px'; //最后差一点，加这段代码补上最后的距离
            return;
        }
        oBox.style.left = begin + (time / duration) * change + 'px'; //现在运动的位置
    }, interval);
</script>
2.在指定步长内实现单方向匀速运动

让蓝色方块向右匀速运动，步长为5，到达屏幕右侧
注意边界问题：

<script type="text/javascript">
    var oBox = document.getElementById("box");
    //盒子走的距离：
    var maxLeft = (document.documentElement.clientWidth || document.body.clientWidth) - oBox.offsetWidth;
    var step = 5;
    var timer = window.setInterval(function () {
        var curLeft = utils.css(oBox, "left");
        if (curLeft+step >= maxLeft) { //在进行边界判断的时候加上步长来进行处理
            utils.css(oBox,"left",maxLeft);
            window.clearInterval(timer);
            return; //直接结束
        }
        curLeft += step;
        utils.css(oBox, "left", curLeft);
    }, 10);
</script>
3.使用setTimeout以及递归的方法实现

使用setTimeout设置动画，每一次在执行动画之前首先把上一次设置的那个没用的定时器清除掉，节约内存空间

<script type="text/javascript">
    var oBox = document.getElementById("box");
    //盒子走的距离：
    var maxLeft = (document.documentElement.clientWidth || document.body.clientWidth) - oBox.offsetWidth;
    var step = 5;
    var timer = null; //接收定时器的返回值,设置成全局变量
    function move() {
        window.setTimeout(timer);
        var curLeft = utils.css(oBox, "left");
        if (curLeft + step >= maxLeft) { //在进行边界判断的时候加上步长来进行处理
            utils.css(oBox, "left", maxLeft);
            return; //直接结束
        }
        curLeft += step;
        utils.css(oBox, "left", curLeft);
        timer = window.setTimeout(move, 10);
    }
    move();
</script>
4.反弹运动动画

写两个按钮，控制着方块向左和向右，如图：
这里写图片描述

<script type="text/javascript">
    var oBox = document.getElementById("box");
    var minLeft = 0;
    var maxLeft = (document.documentElement.clientWidth || document.body.clientWidth) - oBox.offsetWidth;
    var timer = null;
    function move(target) { //target:运动的目标位置
        window.clearTimeout(timer);
        var curLeft = utils.css(oBox, "left");
        if (curLeft < target) { //向右
            if (curLeft + 5 >= target) {
                utils.css(oBox, "left", target);
                return;
            }
            curLeft += 5;
            utils.css(oBox, "left", curLeft);
        } else if (curLeft > target) { //向左
            if (curLeft - 5 <= target) {
                utils.css(oBox, "left", target);
                return;
            }
            curLeft -= 5;
            utils.css(oBox, "left", curLeft);
        } else { //不需要动
            return;
        }
        timer = window.setTimeout(function () {
            move(target);
        }, 10);
    }
    document.getElementById("btn_left").onclick = function () {
        move(minLeft);
    };
    document.getElementById("btn_right").onclick = function () {
        move(maxLeft);
    };
</script>

但是这样写性能不好，因为每一次到达时间的时候，都要先执行一次匿名函数，形成一个私有作用域，在匿名函数中再执行move。但是move中需要用到的数据值在第一次执行的move方法中，需要把匿名函数形成的这个私有作用域作为跳板找到之前的，这样就导致了匿名函数形成的这个私有作用域不能销毁。
解决方法：可以在move()中嵌套一个_move()方法

<script type="text/javascript">
    var oBox = document.getElementById("box");
    var minLeft = 0;
    var maxLeft = (document.documentElement.clientWidth || document.body.clientWidth) - oBox.offsetWidth;
    var timer = null;
    function move(target) { //target:运动的目标位置
        _move();
        function _move() {
            window.clearTimeout(timer);
            var curLeft = utils.css(oBox, "left");
            if (curLeft < target) { //向右
                if (curLeft + 5 >= target) {
                    utils.css(oBox, "left", target);
                    return;
                }
                curLeft += 5;
                utils.css(oBox, "left", curLeft);
            } else if (curLeft > target) { //向左
                if (curLeft - 5 <= target) {
                    utils.css(oBox, "left", target);
                    return;
                }
                curLeft -= 5;
                utils.css(oBox, "left", curLeft);
            } else { //不需要动
                return;
            }
            timer = window.setTimeout(_move, 10);
        }
        timer = window.setTimeout(function () {
            move(target);
        }, 10);
    }
    document.getElementById("btn_left").onclick = function () {
        move(minLeft);
    };
    document.getElementById("btn_right").onclick = function () {
        move(maxLeft);
    };
</script>
5.多方向匀速运动

top和left同时改变
这里写图片描述

<script type="text/javascript">
    function Linear(t, b, c, d) {
        return c * t / d + b;
    }
    var oBox = document.getElementById("box");
    var beginLeft = utils.css(oBox, "left"), beginTop = utils.css(oBox, "top");
    var targetLeft = 1000, targetTop = 500;
    var changeLeft = targetLeft - beginLeft, changeTop = targetTop - beginTop;
    var duration = 1000, time = 0;
    oBox.timer = window.setInterval(function () {
        time += 10;
        if (time >= duration) {
            utils.css(oBox, {
                left: targetLeft,
                top: targetTop
            });
            window.clearInterval(oBox.timer);
            return;
        }
        var curLeft = Linear(time, beginLeft, changeLeft, duration);
        var curTop = Linear(time, beginTop, changeTop, duration);
        utils.css(oBox, {
            left: curLeft,
            top: curTop
        });
    }, 10);
</script>
6.创建运动动画库
~function () {
    var tweenEffect = {
        //匀速
        Linear: function (t, b, c, d) {
            return c * t / d + b;
        },

        //指数衰减的反弹缓动
        Bounce: {
            easeIn: function (t, b, c, d) {
                return c - tweenEffect.Bounce.easeOut(d - t, 0, c, d) + b;
            },
            easeOut: function (t, b, c, d) {
                if ((t /= d) < (1 / 2.75)) {
                    return c * (7.5625 * t * t) + b;
                } else if (t < (2 / 2.75)) {
                    return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
                } else if (t < (2.5 / 2.75)) {
                    return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
                } else {
                    return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
                }
            },
            easeInOut: function (t, b, c, d) {
                if (t < d / 2) {
                    return tweenEffect.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
                }
                return tweenEffect.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
            }
        },

        //二次方的缓动
        Quad: {
            easeIn: function (t, b, c, d) {
                return c * (t /= d) * t + b;
            },
            easeOut: function (t, b, c, d) {
                return -c * (t /= d) * (t - 2) + b;
            },
            easeInOut: function (t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return c / 2 * t * t + b;
                }
                return -c / 2 * ((--t) * (t - 2) - 1) + b;
            }
        },

        //三次方的缓动
        Cubic: {
            easeIn: function (t, b, c, d) {
                return c * (t /= d) * t * t + b;
            },
            easeOut: function (t, b, c, d) {
                return c * ((t = t / d - 1) * t * t + 1) + b;
            },
            easeInOut: function (t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return c / 2 * t * t * t + b;
                }
                return c / 2 * ((t -= 2) * t * t + 2) + b;
            }
        },

        //四次方的缓动
        Quart: {
            easeIn: function (t, b, c, d) {
                return c * (t /= d) * t * t * t + b;
            },
            easeOut: function (t, b, c, d) {
                return -c * ((t = t / d - 1) * t * t * t - 1) + b;
            },
            easeInOut: function (t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return c / 2 * t * t * t * t + b;
                }
                return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
            }
        },

        //五次方的缓动
        Quint: {
            easeIn: function (t, b, c, d) {
                return c * (t /= d) * t * t * t * t + b;
            },
            easeOut: function (t, b, c, d) {
                return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
            },
            easeInOut: function (t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return c / 2 * t * t * t * t * t + b;
                }
                return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
            }
        },

        //正弦曲线的缓动
        Sine: {
            easeIn: function (t, b, c, d) {
                return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
            },
            easeOut: function (t, b, c, d) {
                return c * Math.sin(t / d * (Math.PI / 2)) + b;
            },
            easeInOut: function (t, b, c, d) {
                return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
            }
        },

        //指数曲线的缓动
        Expo: {
            easeIn: function (t, b, c, d) {
                return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
            },
            easeOut: function (t, b, c, d) {
                return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
            },
            easeInOut: function (t, b, c, d) {
                if (t == 0) return b;
                if (t == d) return b + c;
                if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
                return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
            }
        },

        //圆形曲线的缓动
        Circ: {
            easeIn: function (t, b, c, d) {
                return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
            },
            easeOut: function (t, b, c, d) {
                return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
            },
            easeInOut: function (t, b, c, d) {
                if ((t /= d / 2) < 1) {
                    return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
                }
                return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
            }
        },

        //超过范围的三次方缓动
        Back: {
            easeIn: function (t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                return c * (t /= d) * t * ((s + 1) * t - s) + b;
            },
            easeOut: function (t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
            },
            easeInOut: function (t, b, c, d, s) {
                if (s == undefined) s = 1.70158;
                if ((t /= d / 2) < 1) {
                    return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
                }
                return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
            }
        },

        //指数衰减的正弦曲线缓动
        Elastic: {
            easeIn: function (t, b, c, d, a, p) {
                if (t == 0) return b;
                if ((t /= d) == 1) return b + c;
                if (!p) p = d * .3;
                var s;
                !a || a < Math.abs(c) ? (a = c, s = p / 4) : s = p / (2 * Math.PI) * Math.asin(c / a);
                return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
            },
            easeOut: function (t, b, c, d, a, p) {
                if (t == 0) return b;
                if ((t /= d) == 1) return b + c;
                if (!p) p = d * .3;
                var s;
                !a || a < Math.abs(c) ? (a = c, s = p / 4) : s = p / (2 * Math.PI) * Math.asin(c / a);
                return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
            },
            easeInOut: function (t, b, c, d, a, p) {
                if (t == 0) return b;
                if ((t /= d / 2) == 2) return b + c;
                if (!p) p = d * (.3 * 1.5);
                var s;
                !a || a < Math.abs(c) ? (a = c, s = p / 4) : s = p / (2 * Math.PI) * Math.asin(c / a);
                if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
                return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
            }
        }
    };

    function move(curEle, target, duration, effect, callback) { //让哪个元素运动
        var tempEffect = tweenEffect.Linear;
        if (typeof effect == 'number') {
            switch (effect) {
                case 0:
                    tempEffect = tweenEffect.Linear;
                    break;
                case 1:
                    tempEffect = tweenEffect.Bounce.easeIn;
                    break;
                case 2:
                    tempEffect = tweenEffect.Quart.easeInOut;
            }
        } else if (effect instanceof Array) {
            tempEffect = effect.length >= 2 ? tweenEffect[effect[0]][effect[1]] : tweenEffect[effect[0]];
        } else if (typeof effect == 'function') { //用来做回调函数
            callback = effect;
        }


        //根据target获取每一个方向的起始值和总距离
        //首先清除定时器
        window.clearInterval(curEle.tweenTimer);
        var begin = {};
        var change = {};
        var time = 0;
        var interval = 10;
        for (var key in target) {
            if (target.hasOwnProperty(key)) {
                begin[key] = utils.getCss(curEle, key);
                change[key] = target[key] - begin[key];
            }
        }
        curEle.tweenTimer = window.setInterval(function () {
            time += interval;
            if (time >= duration) { //到达目标
                window.clearInterval(curEle.tweenTimer);
                utils.setGroupCss(curEle, target);
                typeof callback == 'function' && callback.call(curEle); //回调函数判断
                return;
            }
            //没到达目标,分别获取每个方向，然后并且设置
            for (var key in target) {
                if (target.hasOwnProperty(key)) {
                    var curPosi = tempEffect(time, begin[key], change[key], duration);
                    utils.setCss(curEle, key, curPosi);
                }
            }
        }, interval);
    }

    //可以用return返回出来个一个对象，或者直接赋值给window
    window.tweenAnimate = move;

}();
ruirui_1996
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Tween动画
gswdzh的博客
06-20 395
动画：Tween动画（Animation）、Frame动画（AnimationDrawable）、属性动画（Animator）Tween动画通过对一个视图不断的进行平移、旋转、放大、缩小、透明变换所形成的动画透明度动画//创建动画对象 AlphaAnimation anim = new AlphaAnimation(1.0f,0); //设置时间 anim.setDuration(1000); //
TWEEN动画
weixin_30496751的博客
06-26 115
TWEEN动画黄金法则四条: 一.边界判断加步长 二.清掉没有用的定时器 三.在大move要传参的情况下在里面写一个 小_move来避免不销毁作用域的累积 四.把定时器的返回值放在自定义属性上,来防止一个元素同时有多个动画来运行 需求:实现一个匀速运动,在指定时间内完成动画:计算出总距离\总时间,根据总距离和总时间求出对应的步长(每走10ms走一步的话需要走多远) 设置一个定时器,让元素每一次...
TweenLite匀速函数
weixin_30388677的博客
07-05 183
Linear.easeNone 转载于:https://www.cnblogs.com/louissong/p/3174009.html
TweenJS
JQG的博客
10-18 670
DOCTYPE html> html> head> meta charset="UTF-8"> title>TweenJStitle> style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 50px; height: 50px; background: red; positi
Unity iTween的匀速运动
SmillCool的博客
02-01 1942
iTween.MoveTo(gameobject, iTween.Hash("x", 0, "y", 0f, "z", -2000f, "time", 1f, "islocal", true, "EaseType", "linear")); 重点是EaseType 的模式 linear 表示线性运动
Javascript动画的实现原理浅析
10-24
JavaScript动画的实现原理主要涉及到如何利用JavaScript控制网页元素在一定时间内连续改变状态，从而创造出动态效果。动画的本质是快速连续地改变元素的某些属性，如位置、大小、颜色等，给人眼造成连续运动的视觉...
wobbly:一个简单的js动画库
05-15
这个是一个轻量级的 js 弹性动画库，能够帮助你轻松的创建弹性动画。几个简单的 api 就能快速上手 [removed][removed] API Wobbly Wobbly.move Wobbly.all Wobbly.color Wobbly(options: Object, process: Function)...
制作简单的动画效果1
08-08
JavaScript和jQuery库为我们提供了创建动态用户体验的工具。本文将详细介绍如何使用jQuery的`animate`方法来制作简单的动画效果。 JavaScript实现动画的基本原理是通过连续改变元素的CSS属性值，如`left`或`top`，...
easing动画运动效果特效代码
03-20
此外，压缩包中的"使用帮助.txt"文件应该提供了关于如何引入和使用这个动画库的详细说明，包括如何配置动画持续时间、延迟、重复次数以及如何指定easing函数等。"谷普下载.url"和"说明.url"可能分别是项目在第三方...
百度地图marker动画的实现
05-07
3. `animation-timing-function`: 描述动画的速度曲线，如匀速、加速、减速等。 4. `animation-delay`: 在动画开始之前等待的时间。 5. `animation-iteration-count`: 动画播放次数，可以是无限次。 6. `animation-...
tween.js详解
github_37360787的博客
02-02 9396
demo演示：点击打开链接；演示地址2：点击打开链接；轮播图demo演示：点击打开链接github 地址：https://github.com/fuyz/tween.js先贴下基础知识,然后在解释如何使用Tween.js：1.第三方动画 tween.js 2.实现:缓动公式(效果:控制物体在某个时间段内的运动速度) 缓动函数:1.linear 匀速 2.Quad 二次方缓动效果 3.Cubic...
分析android动画模块
sdfisdf的专栏
10-20 185
主要思路     Tween 动画通过对 View 的内容完成一系列的图形变换 (包括平移、缩放、旋转、改变透明度)来实现动画效果。 具体来讲，预先定义一组指令，这些指令指定了图形变换的类型、触发时间、持续时间。这些指令可以是以 XML 文件方式定义，也可以是以源代码方式定义。程序沿着时间线执行这些指令就可以实现动画效果。 动画的进度使用 Interpolator 控制，andro...
动画库tween.js
weixin_33733810的博客
05-22 102
动画库tween.js var Tween = { Linear:function (start,alter,curTime,dur) {return start+curTime/dur*alter;},//最简单的线性变化,即匀速运动 Quad:{//二次方缓动 easeIn:function (start,alter,curTime,dur) { return start...
UGUI研究院之界面中使用DoTween（七）
12-17 951
转载：http://www.xuanyusong.com/archives/3330 因为NGUI中已经有UITween了，可是UGUI中是没有这样的Tween的。我看过UGUI的Demo它的实现方式是用Animator来做的，这样每一个需要移动的对象就要挂上一个AmimationController并且还要去编辑动画。。 想想都恐怖，我觉得真没必要那么做。。 我强烈建议新
DOTween插件动画播放的曲线设置，取消缓动采用匀速的方式。
Nice_66的博客
08-28 4938
主要采用的是SetEase方法 transform.DOMoveX(4, 1).SetEase(Ease.Linear); 参考缓动的枚举来设置自己的缓动数据 DOTWeen缓动枚举 public enum Ease { Unset =0, Linear =1, InSine =2, OutSine =3, InOutSi...
Tween 若干年后我尽然还要学数学 曲线到底是什么鬼啊
weixin_30415113的博客
05-31 123
var Tween = { linear: function (t, b, c, d){ //匀速 return c*t/d + b; }, easeIn: function(t, b, c, d){ //加速曲线 return c*(t/=d)*t + b; }, easeOut: function(t, b, c, d...
tween缓动画的基本算法
huhudeni的博客
07-02 912
笔者在做canvas的游戏框架的时候遇到了动画的相关算法问题 下面就是通常使用的一些 动画的算法 可以给大家一些参考 下面是相关的变量 这个是示意图 /* * t: current time（当前时间）； * b: beginning value（初始值）； * c: change in value（变化量）； * d: duration（持续时间）。 */ Linear：线性...
Tween.js各类原生动画运动缓动算法
macleer的博客
02-10 2620
Linear：线性匀速运动效果；Quadratic：二次方的缓动（t^2）；Cubic：三次方的缓动（t^3）；Quartic：四次方的缓动（t^4）；Quintic：五次方的缓动（t^5）；Sinusoidal：正弦曲线的缓动（sin(t)）；Exponential：指数曲线的缓动（2^t）；Circular：圆形曲线的缓动（sqrt(1-t^2)）；Elastic：指数衰减的正弦曲线缓动；Ba
js 匀速/缓动动画 简单封装
09-10 6452
.box1 { width: 300px; height: 300px; padding: 100px; margin: 100px; position: relative; border: 100px solid #000;
android 匀速飘屏动画
最新发布
05-19
实现 Android 匀速飘屏动画可以借助 ValueAnimator 和 ObjectAnimator 类。下面是一个简单的实现方式： 1. 在 XML 文件中定义一个 ImageView 控件，作为需要飘屏的对象。 ``` android:id="@+id/imageView" ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值