AlloyTouch高仿native，实现滑动弹跳效果

前言

在APP中我们经常会在页面下拉时看到一些动效，例如下拉图片跟随放大、下拉刷新出现loading动画等，这个交互细节在各个主流APP以及手机原生系统中随处可见，能为APP增添个性亮点。那么我们在html移动开发网页能否实现类似效果呢？今天我就介绍一个实现这个效果的方法！

技术实现

这个实现主要运用了AlloyTouch已经transformjs这两个插件，实现代码如下：

var infoList = document.getElementById("infoList"),
            mockHTML = infoList.innerHTML,
            scroller = document.getElementById("scroller"),
            header = document.getElementById("header"),
            userLogo = document.getElementById("user-logo-wrapper"),
            loading = false,
            alloyTouch = null;

        Transform(scroller, true);
        Transform(header);
        header.originY = -70;
        header.translateY = -70;
        Transform(userLogo);

        alloyTouch = new AlloyTouch({
            touch: "#wrapper",
            vertical: true,
            target: scroller,
            property: "translateY",
            maxSpeed: 2,
            outFactor: 0.2,
            min: 160 * -20 + window.innerHeight - 202 - 50,
            max: 0,
            touchStart: function () {
                reastMin();
            },
            lockDirection: false,
            change: function (v) {
                if (v <= this.min + 5 && !loading) {
                    loading = true;
                    loadMore();
                }
                if (v < 0) {
                    if (v < -140) v = -140;
                    var scaleY = (240 + v) / 240;
                    header.scaleY = scaleY;
                    userLogo.scaleX = userLogo.scaleY = scaleY;
                    userLogo.translateY = v / 1.7;
                } else {
                    var scaleY = 1 + v / 240;
                    header.scaleY = scaleY;
                    userLogo.scaleX = userLogo.scaleY = scaleY;
                    userLogo.translateY = v / 1.7;
                }
            }
        })

        function loadMore() {
            setTimeout(function () {
                infoList.innerHTML += mockHTML;
                loading = false;
                reastMin();
            }, 500)
        }

        function reastMin() {
            alloyTouch.min = -1 * parseInt(getComputedStyle(scroller).height) + window.innerHeight - 202;
        }

        document.addEventListener("touchmove", function (evt) {
            evt.preventDefault();
        }, false);

代码介绍

上面代码不光能实现弹跳效果，而且下拉加载也实现了！

loadMore 函数就是下拉加载函数，通过mockHTML获取了原来页面中的html，然后通过如下代码：

           if (v <= this.min + 5 && !loading) {
                loading = true;
                loadMore();
            }

当到底部滑动的时候，添加到列表后面！

demo效果

实现如下图效果：

源码下载

这个效果我已经将源码上传到haorooms前端资源库了，插件下载地址是：http://resource.haorooms.com/softshow-29-267-1.html

感兴趣的可以预览一下！

这篇文章稍微偷懒一下，就介绍一下这个插件吧！！